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世界 顶级 Web 技 术 专家 ， 现 为 雅虎 公司 界面 呈现 架构 
师 ， 负 责 My Yahool! 和 雅虎 首页 等 大 访问 量 站 点 的 设 
计 。 尼 古 拉 斯 拥有 丰富 的 Web 开 发 和 界面 设计 经 验 ， 
曾经 参与 许多 世界 级 大 公司 的 Web 解 决 方案 开发 。 他 
还 是 High Performance JavaScript 一 书 的 作者 ， 并 与 
他 人 合作 撰写 了 Professional Ajax 和 Even Faster Web 
Sites。 尼 上 古 拉 斯 拥有 梅里 马克 学 院 计算 机 科学 学 士 学 
位 和 埃 迪 柯 特 学 院 MBA 学 位 。 他 的 个 人 网 站 是 
www.nczonline.net， 他 的 Twitter 别名 是 @slicknet。 
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内 容 提 要 


本 书 是 JavaScript 超级 畅销 书 的 最 新 版 。ECMAScript 5 和 HTMLS5 在 标准 之 争 中 双双 胜出 ， 使 大 量 
专 有 实现 和 客户 端 扩展 正式 进入 规范 ， 同 时 也 为 JavaScript 增添 了 很 多 适应 未 来 发 展 的 新 特性 。 本 书 这 
一 版 除 增加 5 章 全 新 内 容 外 ， 其 他 章节 也 有 较 大 幅度 的 增补 和 修订 ， 新 内 容 篇 幅 约 占 三 分 之 一 。 全 书 从 
JavaScript 语言 实现 的 各 个 组 成 部 分 一 一 语言 核心 、DOM、BOM、 事 件 模 型 讲 起 ， 深 入 浅 出 地 探讨 了 面向 
对 象 编 程 、Ajax 与 Comet 服务 器 端 通信 ，HTML5 表单 、 媒 体 、Canvas (包括 WebGL) 及 Web Workers、 
地 理 定位 、 跨 文档 传递 消息 、 客 户 端 存储 (包括 mdexedDB) 等 新 API， 还 介绍 了 离线 应 用 和 与 维护 、 性 
能 、 部 署 相关 的 最 佳 开发 实践 。 本 书 附 录 展 望 了 未 来 的 API 和 ECMAScript Harmony 规范 。 

本 书 适合 有 一 定编 程 经 验 的 Web 应 用 开发 人 员 阅 读 ， 也 可 作为 高 校 及 社会 实用 技术 培训 相关 专业 课 
程 的 教材 。 
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20 多 年 的 职业 生涯 , 我 也 长 出 了 





人 万 
实话 ， 我 也 并 非 一 
只 能 用 来 做 
佑 端 天 
永远 也 忘 不 了 
我 也 开始 了 解 它 ， 

















直 都 是 JavaScript 的 信徒 。 跟 询 
些 旋转 的 横幅 广告 , 或 者 在 页 面 
F 发 的 ， 我 们 都 对 这 种 玩具 语言 不 感冒 ， 





白头 发 。 





























P 添 加 一 些 有 意思 的 交互 效果 作为 装饰 。 
该 死 的 ! 可 是 ， 后 来 Ajax 出 现 了 。 








回首 往事 ,曾经 对 我 的 职业 道路 产生 过 重要 影响 的 技术 和 
历 在 目 。 如 果 让 我 只 说 一 种 技术 ， 一 种 对 我 产生 了 最 大 正面 影响 的 技术 ,那么 就 是 JavaScript。 说 
F 多 人 一 样 ， 我 以 前 也 把 它 当 作 一 门 玩具 语言 ， 


认为 它 
我 原来 是 做 服务 








当时 无 孔 不 人 的 Ajax, 大 家 都 认为 它 是 一 种 非常 酷 、 非 常 新 , 同时 极 
阅读 相关 资料 。 知 道 这 门 曾 被 我 虽 














具 创 造 性 的 技术 。 








之 以 鼻 的 玩具 语言 如 今 被 每 一 位 专业 Web 开发 人 


员 津 津 乐 道 之 后 ， 我 感到 很 震惊 。 突 然 ， 我 的 看 法 就 转变 了 。 随 着 探索 Ajax 的 继续 深入 ,我 认识 到 


JavaScript 的 强大 威力 , 急切 地 想 了 解 它 


之 中 , 不仅 努 力学 


对 JavaScript 了 解 得 越 深 ， 接 触 的 天 

















能 提供 的 所 有 “法 3 
团队 ， 专 门 从 事 客户 端 开发 。 我 














习 这 门 语言 ， 还 加 入 了 jQuery 项 目 

















人 物 。 


尼古拉斯 泽 卡 





斯 (本 书 作 者 ) 就 是 这 样 一 位 开发 人 员 。 我 一 直 记 得 在 读本 














老 
月 


而 生 的 喜悦 之 ， 





虽然 我 也 有 多 稀 


日 





























读 来 就 好 像 尼 古 拉 斯 对 不 同 层次 的 读者 都 了 如 指 掌 ， 所 以 他 的 风格 才 那 么 贴切 自 











E”。 于 是 , 我 全 刁 心 地 投入 用 


F 发 人 员 就 越 多 ， 其 中 不 乏 今 天 在 我 眼 里 依然 是 


| 学 习 JavaScript 
的 日 子 过 得 很 爽 。 
巨星 和 导师 级 的 








第 2 版 时 心中 油 然 
F 的 积累 , 但 仍然 从 中 学 到 了 很 多 新 东西 。 这 本 书 实 实在 在 、 深入浅出 ， 
然 。 对 于 技术 书 来 说 ， 


这 是 非常 突出 的 一 个 特色 。 多 数 作者 都 想 靠 坚 深 的 技术 给 人 留 下 印象 ， 但 这 本 书 不 同 。 所 以 ， 它 很 快 就 


成 为 了 我 案头 必 备 
对 这 本 书 都 能 有 跟 














的 书 ， 我 也 会 向 那些 有 志 全 面 掌握 JavaScript 的 开发 人 员 推 荐 这 本 书 。 我 希望 每 个 人 
我 一 样 的 体会 ， 认 识 到 它 的 价值 所 在 。 

















后 来 ,在 一 次 jQuery 大 会 上 ,我 来 境地 见 到 了 尼古拉斯 本 人 ,站 在 我 面前 的 是 一 位 世界 顶级 的 JavaScript 








开发 人 员 ， 而 且 


正 负责 世界 上 最 重要 的 一 个 Web 站 点 ( 




















LE 虎 )。 尼 十 拉 











的 ， 见 到 他 的 时 候 我 有 一 种 追 与 
的 人 。 不 仅 他 的 书 改变 了 我 对 JavaScript 的 认识 ， 而 
































听 说 尼 古 拉 





也 是 他 本 人 有 多么 令 


自己 为 什么 觉得 这 
看 来 ， 这 本 书 为 读 

这 本 书 从 介绍 
大 量 篇 幅 花 在 讲解 
相 比 ， 这 本 
的 代码 ， 构 建 出 令 

















让 人 感觉 细致 周到 、 亲 切 自 然 。 这 是 








本 书 如 此 重要 。 我 看 过 很 多 JavaScript 图 书 ， 的 确 也 有 很 多 令 人 叹 月 
者 成 为 全 方位 的 JavaScript 高 手提 供 了 “一 揽 子 方案 ”。 
表达 式 和 变量 声明 玫 


作 量 所 
4b 所 | 


月 时 














sa 
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已 胰 











‘Eb 人 DO 2 
本 写 给 “ 普 


人 ”的 书 ， 











人 叫绝 的 网 站 。 
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UUU0U0O00000UjiQueryrU0O0UOU0000 


斯 是 我 见 过 的 最 随和 的 人 之 一 。 真 
E 族 的 幻觉 。 但 他 就 是 那么 一 个 活生生 的 人 , 一 个 想 帮助 开发 人 员 成 就 梦想 
且 尼 古 拉 斯 这 个 人 ， 也 让 我 愿意 接近 ， 愿 意 了 解 。 

斯 要 请 我 作 序 ， 我 激动 得 不 知道 说 什么 才 好 。 在 此 ,我 代表 大 牛 来 为 本 书 暖 场 。 这 个 序 
人 景仰 的 一 个 明证 。 不 过 ,更 重要 的 是 ,这 也 给 了 我 一 个 机 会 ， 计 


[我 能 跟 大 家 分 训 
的 佳作 。 但 在 我 











F 始 ,平滑 地 过 渡 到 了 闭 包 、 面 向 对 象 开 发 等 高 级 主题 。 与 那些 把 
知识 上 的 书 ， 以 及 那些 让 人 感觉 好 像 是 要 使 用 JavaScript 开发 导弹 制导 系统 的 书 
让 你 编写 出 引 以 为 荣 


DD Rey Bango 


EE 
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献 给 我 的 父母 ， 是 他 们 永远 给 我 支持 和 鼓励 35 








从 驱动 全 球 商业 、 贸 易 及 管理 领域 不 计 其 数 的 复杂 应 用 程序 的 角度 来 看 ， 说 JavaScript 已 经 成 为 当 
今世 界 上 最 流行 的 编程 语言 一 点 儿 都 不 为 过 。 

JavaScript 是 一 种 非常 松散 的 面向 对 象 语言 ， 也 是 Web 开发 中 极 受 欢迎 的 一 门 语言 。JavaScript， 尽 
管 它 的 语法 和 编程 风格 与 Java 都 很 相似 ， 但 它 却 不 是 Java 的 “ 轻 量 级 ”版 本 ， 甚 至 与 Java 没有 任何 关 
系 。JavaScript 是 一 种 全 新 的 动态 语言 ， 它 植 根 于 全 球 数 亿 网 民 都 在 使 用 的 Web 浏览 器 之 中 ， 致 力 于 增 
强 网 站 和 Web 应 用 程序 的 交互 性 。 

在 本 书 中 ,我们 将 对 JavaScript 追根 溯源 ， 从 它 在 最 早 的 Netscape 浏览 器 中 诞生 谈 起 ， 一 直 谈 到 今 
天 的 它 对 DOM 和 Ajax 的 强大 支持 。 读者 将 通过 本 书 掌握 如 何 运 用 和 扩展 这 门 语言 , 从 而 更 好 地 满足 自 
己 的 需求 ， 以 及 如 何 实现 客户 端 与 服务 器 的 无 颖 通信， 而 又 不 必 求 助 于 Java 或 隐藏 的 网 页 框架 ( frame 
元 素 )。 一 言 以 蔽 之 ， 本 书 将 教会 你 在 面 对 各 种 常见 的 Web 开发 问题 时 ， 如 何 拿 出 自己 的 JavaScript 解 
决 方案 。 


本 书 读者 对 象 


本 书 将 下 列 三 类 人 员 作 为 目标 读者 : 

(1) 熟悉 面向 对 象 编程 、 经 验 丰富 而 又 打算 学 习 JavaScript 的 开发 人 员 ，JavaScript 毕竟 与 Java、C++ 
等 传统 OO 语言 存在 着 诸多 联系 ; 

(2) 有 意 提 升 自己 网 站 和 Web 应 用 程序 易 用 性 的 Web 开发 人 员 ; 

(3) 希望 全 面 深 入 地 理解 这 门 语言 的 初级 JavaScript 开发 人 员 。 

此 外 ， 本 书 也 适合 熟悉 下 列 相关 技术 的 读者 阅读 : 

(1) Java 

(2) PHP 

(G3) ASPNET 

(4) HTML 

(5) CSS 

(6) XML 

本 书 不 适合 没有 计算 机 基础 知识 的 初学 者 ,也 不 适合 只 想 为 网 站 添加 简单 交互 功能 的 读者 。 建议 这 
些 朋友 学 习 阅 读 Beginning JavaScript, 3rd Edition( Wiley, 2007 ) 一 书 "。 
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Q@ 本 书 中 文 版 《JavaScript 人 门 经 典 (第 3 版 )》 已 经 由 清华 大 学 出 版 社 出 版 。 一 一 译 者 注 ( 以 下 脚注 如 无 特殊 说 明 ， 
均 为 译 者 注 ) 
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本 书 内 容 


本 书 提供 了 JavaScript 开发 人 员 必 须 掌 握 的 内 容 ， 全 面 涵盖 了 JavaScript 的 各 种 高 级 、 有 用 的 特性 。 

本 书 首先 介绍 了 JavaScript 的 起 源 及 其 发 展现 状 ， 随 后 讨论 了 构成 JavaScript 实现 的 各 个 组 成 部 分 ， 
重点 讲解 了 ECMAScript 和 DOM 标准。 此外， 还 对 不 同 Web 浏览 器 的 JavaScript 实现 之 间 存 在 的 差异 ， 
给 出 了 相应 的 说 明 。 

在 此 基础 上 , 本 书 从 讲解 JavaScript 的 基本 概念 人 手 , 探讨 了 JavaScript 面向 对 象 程序 设计 和 继承 的 
方式 ， 以 及 如 何在 HTML 等 标记 语言 中 使 用 它 。 在 深入 剖析 了 事件 和 事件 处 理 之 后 ， 又 解释 了 各 种 浏 
览 器 检测 技术 。 本 书 还 探讨 了 HTML5 、Selectors API 和 File API 等 一 系列 新 API。 

本 书 最 后 一 部 分 专门 讨论 了 高 级 主题 ， 涉 及 性 能 和 内 存 优 化 、 最 佳 实践 以 及 对 JavaScript 未 来 的 
展望 。 


本 书 结构 


本 书 共 25 章 ， 各 章 简 介 如 下 。 

第 1 章 “JavaScript 简介 ”讲述 了 JavaScript 的 起 源 : 因 何 而 生 ， 如 何 发 展 ， 现 状 如 何 。 涉 及 的 
概念 主要 有 JavaScript 与 ECMAScript 之 间 的 关系 、DOM (Document Object Model， 文 档 对 象 模型 )、 
BOM ( Browser Object Model ， 浏 览 器 对 象 模型 )。 此 外 ， 还 将 讨论 ECMA ( European Computer 
Manufacturer's Association， 欧 洲 计算 机 制造 商 协会 ) 和 W3C ( World Wide Web Consortium， 万 维 网 联 
盟 ) 制定 的 一 些 相 关 标 准 。 

第 2 章 “ 在 HTML 中 使 用 JavaScript”， 介绍 了 如 何在 HTML 中 使 用 JavaScript 创建 动态 网 页 。 
这 一 章 不 仅 展示 了 在 网 页 中 般 入 JavaScript 的 各 种 方式 , 还 讨论 了 JavaScript 内 容 类 型 ( content-type ) 及 
其 与 <script> 元 素 的 关系 。 

第 3 章 “ 基 本 概念 ”讨论 了 JavaScript 语言 的 基本 概念 ， 包 括 语 法 和 流 控制 语句 。 这 一 章 也 分 析 
了 JavaScript 与 其 他 基于 C 的 语言 在 语法 上 的 相同 和 不 同 之 处 ， 还 介绍 了 与 内 置 操 作 符 有 关 的 类 型 转换 
问题 。 

第 4 章 “ 变 量 、 作 用 域 和 内 存 问题 ”>， 探 讨 了 JavaScript 如 何 处 理 其 松散 类 型 的 变量 。 这 一 章 还 讨 
论 了 原始 值 和 引用 值 之 间 的 差别 ， 以 及 与 变量 有 关 的 执行 环境 的 相应 内 容 。 最 后 ， 通 过 介绍 JavaScript 
的 垃圾 收集 机 制 ， 解 释 了 变量 在 退出 作用 域 时 释放 其 内 存 的 问题 。 

第 5 章 “ 引 用 类 型 >， 详尽 介绍 了 JavaScript 内 置 的 所 有 引用 类 型 ， 如 object 和 Array。 这 一 
章 对 ECMA-262 规范 中 描述 的 每 一 种 引用 类 型 既 做 了 理论 上 的 阐释 ， 又 从 浏览 器 实现 的 角度 给 出 了 
介绍 。 

第 6 章 “ 面 向 对 象 的 程序 设计 ”， 讲 述 了 在 JavaScript 中 如 何 实现 面向 对 象 的 程序 设计 。 由 于 
JavaScript 没有 类 的 概念 ， 因 此 这 一 章 从 对 象 创建 和 继承 的 层面 上 展示 了 一 些 流行 的 技术 。 此 外 ， 这 一 
章 还 讲解 了 函数 原型 的 概念 ， 并 对 函数 原型 与 整个 面向 对 象 方法 的 关系 进行 了 探讨 。 

第 7 章 “ 函 数 表 达 式 ”， 集 中 介绍 了 JavaScript 中 最 为 强大 的 一 个 特性 一 一 函数 表达 式 。 相 关 的 内 
容 涉及 闭 包 、this 对 象 的 角色 、 模 块 模式 和 创建 私有 对 和 象 成 员 等 。 

第 8 章 “BOM”,， 介绍 BOM ( Browser Object Model， 浏览 器 对 象 模型 )， 即 负责 处 理 与 浏览 器 自 
身 有 关 的 交互 操作 的 对 象 集合 。 这 一 章 全 面 介绍 了 每 一 个 BOM 对 象 ， 包括 window、document、 
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location、 navigator 和 screen。 

第 9 章 “ 客 户 端 检 测 ” 讨论 了 检测 客户 端 机 器 及 其 支持 特性 的 各 种 手段 , 包括 特性 检测 及 用 户 代 
晶 字 符 串 检测 的 不 同 技术 。 这 一 章 还 就 每 种 手段 的 优 缺 点 及 适用 情形 给 出 了 详细 说 明 。 

第 10 章 “DOM”, 介绍 DOM( Document Object Model, 文档 对 象 模型 ), 即 DOM1 规定 的 JavaScript 
中 的 DOM 对 象 。 这 一 章 也 简要 介绍 了 XML 及 其 与 DOM 的 关系 , 为 深入 探讨 所 有 DOM 规范 及 其 定义 
的 操作 网 页 的 方式 莫 定 了 基础 。 

第 11 章 “DOM 扩展 ”介绍 了 其 他 API 以 及 浏览 器 本 身 为 DOM 添加 的 各 种 功能 。 涉 及 内 容 包括 
Selectors API、Element Traversal API 和 HTMLS 扩展 。 

第 12 章 “DOM2 和 DOM3”， 在 前 两 章 的 基础 上 继续 探讨 了 DOM2 和 DOM3 中 新 增 的 DOM 属 
性 、 方 法 和 对 象 。 这 一 章 还 讨论 了 下 与 其 他 浏览 器 的 兼容 性 问题 。 

第 13 章 “ 事 件 ”, 解释 了 JavaScript 中 事件 的 本 质 ， 对 遗留 机 制 的 支持 ， 以 及 DOM 对 事件 机 制 的 
重新 定义 。 这 一 章 讨论 了 多 种 设备 ， 包 括 Wii 和 iPhone。 

第 14 章 “ 表 单 脚本 ”， 讲 述 如 何 使 用 JavaScript 增强 表单 的 交互 性 ， 突 破 浏 览 器 的 局 限 性 。 这 一 
章 的 讨论 主要 围绕 单个 表单 元 素 如 文本 框 、 选 择 框 ， 以 及 围绕 数据 验证 和 操作 展开 。 

第 15 章 “ 使 用 Canvas 绘图 ” 讨论 了 <canvas> 标 签 以 及 如 何 通过 它 来 动态 绘图 。 不 仅 涵 盖 2D 
上 下 文 ， 也 将 讨论 WebGL (3D ) 上 下 文 ， 可 以 为 创建 动画 和 游戏 夯实 基础 。 

第 16 章 “HTML5 脚本 编程 ”>， 介 绍 了 HIML5 规定 的 JavaScript API， 涉 及 跨 文 档 传递 消息 、 拖 
放 API 和 以 编程 方式 控制 <audio> 和 <video> 元 素 ， 以 及 管理 历史 状态 。 

第 17 章 “ 错 误 处 理 与 调试 ” 讨论 浏览 器 如 何 处 理 JavaScript 代码 错误 ， 并 展示 了 一 些 处 理 错误 
的 方式 。 这 一 章 针对 每 种 浏览 器 分 别 讨 论 了 相应 的 调试 工具 和 技术 ， 还 给 出 了 简化 调试 工作 的 建议 。 

第 18 章 “JavaScript 与 XML”， 展 示 了 JavaScript 中 用 于 读 取 和 操作 XML (eXtensible Markup 
Language， 可 扩展 标记 语言 ) 的 特性 。 这 一 章 分 析 了 不 同 浏览 器 提供 的 XML 支持 和 对 象 的 差异 ， 给 出 
了 编写 跨 浏览 器 代码 的 简易 方法 ,此 外 ,这 一 章 还 介绍 了 用 于 在 客户 端 转换 XML 数 据 的 XSLT( eXtensible 
Stylesheet Language Transformations， 可 扩展 样式 表 语 言 转换 ) 技术 。 

第 19 章 “E4X”， 讨论 了 E4X (ECMAScriptforXML，ECMAScript 中 的 XML 扩展 ); 设计 E4X 的 
出 发 点 是 简化 XML 处 理 任务 。 这 一 章 探讨 了 在 处 理 XML 时 ,使 用 E4X 与 使 用 DOM 相 比 有 哪些 
优势 。 

第 20 章 “JSON”, 介绍 了 作为 XML 替代 格式 的 JSON， 包 含 浏览 器 原生 支持 的 JSON 解析 和 序 
列 化 ， 以 及 使 用 JSON 时 要 注意 的 安全 问题 。 

第 21 章 “Ajax 与 Comet”, 讲解 了 常用 的 Ajax 技术 , 包括 使 用 XMLHttpRequest 对 象 及 CORS 
( Cross-Origin Resource Sharing ， 跨 来源 资源 共享 ) API 实现 跨 域 Ajax 通信 。 这 一 章 展示 了 浏览 器 在 实 
现 与 支持 方面 存在 的 差异 ， 同 时 也 给 出 了 一 些 使 用 建议 。 

第 22 章 “ 高 级 技巧 >， 深 入 讲解 了 一 些 JavaScript 中 较 复 杂 的 模式 ， 包 括 函 数 柯 里 化 (currying )、 
部 分 函数 应 用 和 动态 函数 。 这 一 章 还 讨论 了 如 何 创建 自 定义 的 事件 框架 和 使 用 ECMAScript 5 创建 防 自 
改 对 象 。 

第 23 章 “ 离 线 应 用 与 客户 端 存储 ”， 讨 论 了 如 何 检测 应 用 离线 以 及 在 客户 端 机 器 中 存储 数据 的 各 
种 技术 。 先 从 受到 最 广泛 支持 的 特性 cookie 谈 起 ， 继 而 介绍 了 新 兴 的 客户 端 存储 技术 ， 如 Web Storage 
和 IndexedDB。 
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第 24 章 “ 最 佳 实 践 ”， 探 讨 了 在 企业 级 环境 中 使 用 JavaScript 的 各 种 方式 。 其 中 ， 着 眼 于 提高 可 
维护 性 的 内 容 包 括 编码 技巧 、 格 式 化 和 通用 编程 实践 。 这 一 章 还 介绍 了 改善 代码 执行 性 能 及 速度 优化 的 
一 些 技术 。 最 后 讨论 了 部 署 问题 ， 包 括 如 何 创建 构建 过 程 。 

第 25 章 “ 新 兴 的 API”, 介绍 了 为 增强 浏览 器 中 的 JavaScript 而 创建 的 新 API。 虽然 这 些 API 还 没 
有 得 到 完整 或 全 面 的 支持 ， 但 它们 已 经 细 露 头角 ， 有 些 浏览 器 也 已 经 部 分 地 实现 了 这 些 API。 这 一 章 的 
内 容 主要 是 Web 计时 和 文件 API。 


使 用 示例 


要 运行 本 书 中 的 示例 ， 需 要 安装 下 列 软件 : 
口 Windows XP、Windows 7 或 Mac OS Xi 
口 Internet Explorer 6 及 更 高 版 本 、Firefox 2 及 更 高 版 本 、Opera 9 及 更 高 的 版 本 、Chrome、 Safari 2 


























及 更 高 版 本 。 
完整 的 示例 源 代码 可 以 从 http:/www.wrox.com/ 中 下 载 (下 载 步 又 见 “ 源 代码 ”一 节 ) ”。 
排版 约定 


为 了 让 读者 更 好 地 理解 本 书 内 容 ， 同 时 把 握 住 全 书 的 重点 ， 本 书 将 采用 以 下 排版 约定 。 








这 种 带 警 告 图 标的 方 框 样式 ， 表 示 与 上 下 文 相关 的 重要 的 、 需 要 牢记 的 内 容 。 


这 种 带 钢 笔 图 标的 方 框 样式 ,表示 与 上 下 文 相 关 的 说 明 、 提 示 、 技 巧 、 窍 门 和 背 


景 知识 。 





正文 中 的 样式 说 明 如 下 。 

(1) 新 术语 及 重要 的 词汇 在 首次 出 现时 使 用 加 粗 字 体 以 示 强 调 ; 

(2) 表示 键盘 命令 组 合 的 方式 是 Ctrl+A; 

(3) 正文 中 的 代码 使 用 等 宽 字 体 ， 如 persistence.properties; 
(4) 代码 有 两 种 样式 : 


var obj = new Object () : // 大 多 数 示例 代码 都 没有 加 粗 
var obj = new Object(); // 加 粗 的 代码 表示 在 上 下 文中 特别 重要 





源 代码 


在 学 习 本 书 示例 代码 时 ,可 以 手工 襄 入 所 有 代码 ,也 可 以 使 用 随 书 的 源 代码 文件 。 本 书 所 有 源 代码 
都 可 以 到 www.wrox.com 中 下 载 。 登 录 该 站 点 后 ， 先 找到 本 书 ( 通过 搜索 或 者 图 书 列表 )， 打 开本 书页 





























读者 也 可 以 在 图 灵 社 区 (http://www.ituring.com.cn/ ) 本 书 的 页 面 中 免费 注册 下 载 。 





图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 

















面 后 ， 单 击 其 中 的 Download Code 链接 ， 就 可 以 下 载 本 书 的 源 代 码 了 "。 对 于 包含 在 下 载 文件 中 的 源 代 
码 ， 书 中 会 添加 以 下 图 标 : 


本 书 代码 示例 旁边 会 附 有 文件 名 ， 从 中 可 以 找到 对 应 的 代码 片段 。 文 件 名 的 格式 如 下 : 
代码 片段 所 在 的 文件 名 





由 于 很 多 书 的 书 名 看 起 来 类 似 ， 所 以 更 好 的 方式 是 通过 书 的 ISBN 来 搜索 它 。 本 


书 原版 的 ISBN 是 978-1-118-02669-4。 





下 载 完 代码 后 ， 请 使 用 解压 缩 软件 将 其 解压 缩 。 此 外 ， 读 者 也 可 以 登录 Wrox 代码 下 载 主页 
www.wrox.com/dynamic/books/download.aspx， 查 找 并 下 载 本 书 及 其 他 Wrox 图 书 的 示例 代码 。 


勘误 信息 


我 们 尽 最 大 努力 确保 正文 和 代码 没有 错误 。 可 是 , 金 无 足 赤 ,错误 在 所 难免 。 如 果 读 者 发 现 我 们 书 
中 的 任何 错误 ,例如 错别字 或 代码 片段 无 法 运行 等 , 希望 您 能 及 时 给 我 们 反馈 。 您 提交 的 勘误 不 仅 能 让 
其 他 读者 受益 ， 而 且 也 能 帮助 我 们 进一步 提高 图 书 质量 。 

本 书 原版 的 勘误 页 面 位 于 www.wrox.com 中 ， 登 录 该 站 点 后 可 以 通过 搜索 或 查询 图 书 列表 找到 本 
书页 面 ， 然 后 单 击 页 面 中 的 Errata (勘误 ) 链接 。 然 后 可 以 看 到 其 他 读者 已 经 提交 并 由 Wrox 的 编辑 发 
布 的 勘误 信息 。 另 外 ， 在 www.wrox.com/misc-pages/booklist.shtml 页 面 中 也 可 以 找到 本 书 及 勘误 页 面 
的 链接 。 

如 果 读 者 在 本 书 勘 误 页 面 中 没有 发 现 “ 你 的 ”错误 ,麻烦 打开 www.wrox.com/contact/techsupport.shtml 
页 面 ， 填 写 其 中 的 表单 并 将 错误 发 送 给 我 们 。 我 们 会 认真 核对 您 提交 的 错误 ， 如 果 错 误 确 实 存 在 ,我 们 
将 把 它 补充 到 本 书 勘 误 页 面 中 。 同 时 ， 也 将 根据 您 提供 的 信息 对 本 书后 续 版 本 加 以 改正 。 
















































































p2p.wrox.com 








如 果 您 想 与 本 书 作者 或 者 其 他 读者 沟通 ， 请 加 入 P2P 论坛 (p2p.wrox.com )。 该 论坛 是 基于 Web 的 
系统 ， 您 可 以 在 其 中 发 表 与 Wrox 图 书 及 相关 技术 有 关 的 帖子 ， 并 同 其 他 读者 或 者 技术 用 户 交 流 。 论 坛 
提供 了 一 个 订阅 功能 ， 您 可 以 选择 当 发 表 您 感 兴趣 的 帖子 时 通过 邮件 通知 您 。Wrox 的 作者 、 编 辑 、 其 
他 行业 的 专家 以 及 与 您 正在 读 同一 本 书 的 读者 都 会 出 现在 这 个 论坛 中 。 
在 http://p2p.wrox.com 中 , 有 很 多 论坛 不 仅 对 您 理解 本 书 有 帮助 , 而 且 还 会 对 开发 应 用 程序 有 帮助 。 
要 加 入 这 个 论坛 ， 请 按 下 面 几 个 步骤 进行 : 
(1) 登录 到 p2p.wrox.com， 单 击 Register ( 注册 ) 链接 ; 
























































GD 翻译 本 书 时 ，wrox.com 中 下 载 本 书 代码 的 短 地 址 为 :http://tinyurl.com/projs-3rd-code。 
@ 您 也 可 以 登录 图 灵 社 区 ( http://www.ituring.com.cn/ )， 在 本 书页 面 中 提交 您 发 现 的 错误 。 
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(2) 阅读 使 用 条 款 并 单 击 Agree ( 同意 ); 
(3) 完成 必 填 信息 和 您 愿意 提供 的 可 选 信息 ， 然 后 单 击 Submit ( 提交 ); 
(4) 随后 ， 您 会 收 到 一 封 电 子 邮 件 ， 其 中 包含 如 何 验证 账号 和 完成 注册 过 程 的 信息 。 



































如 果 不 加 入 P2P 论坛 ， 虽然 也 可 以 阅读 其 中 的 帖子 , 但 却 不 能 发 表 帖 子 ， 只 有 注 


册 后 才能 发 表 。 











在 加 入 论坛 后 , 既 可 以 发 表 新 帖子 也 可 以 回复 其 他 用 户 的 帖子 。 可 以 在 任何 时 间 上 网 浏览 论坛 中 的 
帖子 。 如 果 希 望 将 某 个 论坛 中 的 新 帖子 通过 电子 邮件 发 送 给 您 ， 请 在 论坛 列表 中 单 击 与 论坛 名 相关 的 
Subscribe to this Forum ( 订阅 这 个 论坛 ) 图 标 。 

如 果 想 了 解 有 关 如 何 使 用 Wrox P2P 的 更 多 信息 , 请 阅读 包含 论坛 规则 、P2P 及 Wrox 图 书 常见 问题 
的 P2P FAQ; 要 阅读 FAQ， 可 以 在 任何 P2P 页 面 中 单 击 FAQ 链接 。 
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avaScript 诞 生 于 1995 年 。 当 时 ， 它 的 主要 目的 是 处 理 以 前 由 服务 器 端 语言 (如 Perl ) 负责 的 一 





F 操 作 。 在 JavaScript 问世 之 前 ， 必 须 把 表单 数据 发 送 到 服务 器 端 才能 确定 用 户 是 否 





没有 填写 某 个 必 填 域 ， 是 否 输入 了 无 效 的 值 。Netscape Navigator 希望 通过 JavaScript 来 解决 这 个 问题 。 
在 人 们 普遍 使 用 电话 拔 号 上 网 的 年 代 , 能 够 在 客户 端 完成 一 些 基本 的 验证 任务 绝对 是 令 人 兴奋 的 。 毕 竞 ， 
拨号 上 网 的 速度 之 慢 ， 导 致 了 与 服务 器 的 每 一 次 数据 交换 事实 上 都 成 了 对 人 们 耐心 的 一 次 考验 。 


自 此 以 后 ，JavaScript 逐渐 成 为 市 面 上 常见 浏览 器 必 备 的 一 项 特色 功能 。 如 今 ，JavaScript 的 用 途 早 



































已 不 再 局 限于 简单 的 数据 验证 , 而 是 具备 了 与 浏览 器 窗口 及 其 内 容 等 几乎 所 有 方面 交互 的 能 力 。 今天 的 
JavaScript 已 经 成 为 一 门 功能 全 面 的 编程 语言 ,能 够 处 理 复杂 的 计算 和 交互 , 拥有 了 闭 包 、 匿 名 (lamda， 
拉 姆 达 ) 函数 ， 其 至 元 编程 等 特性 。 作 为 Web 的 一 个 重要 组 成 部 分 ，JavaScript 的 重要 性 是 不 言 而 喻 的 ， 





















































为 典型 。 











其 至 那些 专 为 残障 人 士 设 计 的 浏览 器 等 非常 规 浏览 器 都 支持 它 。 当 然 ， 微 软 的 例子 更 





就 连 手机 浏览 需 ， 











然 有 自己 的 客户 端 脚本 语言 VBScript， 但 微软 仍然 在 Internet Explorer 的 早期 版 本 中 加 入 了 








自己 的 JavaScript 实现 ”。 





JavaScript 从 一 个 简单 的 输入 验证 咒 发 展 成 为 一 门 强大 的 编程 语言 ， 完 全 出 乎 人 们 的 意料 。 应 该 说 ， 
它 既 是 一 门 非常 简单 的 语言 ， 又 是 一 门 非常 复杂 的 语言 。 说 它 简 单 ， 是 因为 学 会 使 用 它 只 需 片 刻 功夫 ; 
而 说 它 复 杂 ， 是 因为 要 真正 掌握 它 则 需要 数 年 时 间 。 要 想 全 面 理解 和 掌握 JavaScript， 关 键 在 于 弄 清楚 
它 的 本 质 、 历 史 和 局 限 性 。 


1.1 


























JavaScript 简 史 


在 Web 日 益 流行 的 同时 ， 人们 对 客户 端 脚 本 语言 的 需求 也 越 来 越 强烈 。 那个 时 候 , 绝 大 多 数 
特 网 用 户 都 使 用 速度 仅 为 28.8kbit/s 的 “ 猫 ” (调制解调器 ) 上 网 , 但 网 页 的 大 小 和 复杂 性 却 不 断 增 


加 














加 。 为 完成 简单 的 表单 验证 而 频繁 地 与 服务 器 交换 数据 只 会 加 重用 户 的 负担 。 想 象 一 下 : 用 户 填写 
完 一 个 表单 ， 单 击 “ 提 交 ” 按 钮 ， 然 后 等 待 30 秒 钟 ， 最 终 服 务 器 返回 消息 说 有 一 个 必 填 字段 没有 














对 





正 而 言 , 当 我 们 提 到 JavaScript 时 , 实际 上 就 是 指 正 对 JavaScript( ECMAScript ) 的 实现 
于 Netscape JavaScript 1.0 开 发 ， 于 1996 年 8 月 随同 Internet Explorer 3.0 发 布 。 








JScript。 最早 的 JScript 
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填 好 …… 当时 走 在 技术 革新 最 前 沿 的 Netscape 公司 , 决定 着 手 开发 一 种 客户 端 语言 ,用 来 处 理 这 种 
简单 的 验证 。 

当时 就 职 于 Netscape 公司 的 布 兰 登 艾 奇 (Brendan Eich )， 开 始 着 手 为 计划 于 1995 年 2 月 发 布 的 
Netscape Navigator 2 开发 一 种 名 为 LiveScript 的 脚本 语言 一 一 该 语言 将 同时 在 浏览 器 和 服务 器 中 使 用 
( 它 在 服务 器 上 的 名 字 叫 LiveWire )。 为 了 赶 在 发 布 日 期 前 完成 LiveScript 的 开发 ，Netscape 与 Sun 公司 
建立 了 一 个 开发 联盟 。 在 Netscape Navigator 2 正式 发 布 前 夕 , Netscape 为 了 搭 上 媒体 热 炒 Java 的 顺风 车 ， 
俐 时 把 LiveScript 改名 为 JavaScript。 

由 于 JavaScript 1.0 获得 了 巨大 成 功 ,Netscape 随即 在 Netscape Navigator 3 中 又 发 布 了 JavaScript 1.1。 
Web 虽然 巴豆 未 丰 ， 但 用 户 关注 度 却 屡 创 新 高 。 在 这 样 的 背景 下 ，Netscape 把 自己 定位 为 市 场 领袖 型 公 
司 。 与 此 同时 , 微软 决定 向 与 Navigator 竞争 的 自家 产品 Internet Explorer 浏览 器 投入 更 多 资源 。Netscape 
Navigator 3 发 布 后 不 久 ， 微 软 就 在 其 Internet Explorer 3 中 加 入 了 名 为 JScript 的 JavaScript 实现 ( 命名 为 
JScript 是 为 了 避 开 与 Netscape 有 关 的 授权 问题 ), 以 现在 的 眼光 来 看 , 微软 1996 年 8 月 为 进入 Web 浏览 
器 领域 而 实施 的 这 个 重大 举措 ,是 导致 Netscape 日 后 蒙 着 的 一 个 标志 性 事件 。 然 而 ， 这 个 重大 举措 同时 
也 标志 着 JavaScript 作为 一 门 语言 ， 其 开发 向 前 迈进 了 一 大 步 。 

微软 推出 其 JavaScript 实现 意味 着 有 了 两 个 不 同 的 JavaScript 版 本 : Netscape Navigator 中 的 
JavaScript、Internet Explorer 中 的 JScript。 与 C 及 其 他 编程 语言 不 同 ， 当 时 还 没有 标准 规定 JavaScript 的 
语法 和 特性 ,两 个 不 同 版 本 并 存 的 局 面 已 经 完全 暴露 了 这 个 问题 。 随 着 业界 担心 的 日 益 加 剧 ，JavaScript 
的 标准 化 问题 被 提 上 了 议事 日 程 。 

1997 年 ， 以 JavaScript 1.1 为 蓝本 的 建议 被 提交 给 了 欧洲 计算 机 制造 商 协会 (ECMA，European 
Computer Manufacturers Association )。 该 协会 指定 39 号 技术 委员 会 (TC39，Technical Committee #39 ) 
负责 “标准 化 一 种 通用 、 跨 平台 、 供 应 商 中 立 的 脚本 语言 的 语法 和 语义 ”( http:/www.ecma 
international.org/memento/TC39.htm )。TC39 由 来 自 Netscape 、Sun、 微 软 、Borland 及 其 他 关注 脚本 语言 
发 展 的 公司 的 程序 员 组 成 ， 他 们 经 过 数 月 的 努力 完成 了 ECMA-262 一 一 定义 一 种 名 为 ECMAScript ( 发 
音 为 “ek-ma-script”) 的 新 脚本 语言 的 标准 。 

第 二 年 ，ISO/IEC ( International Organization for Standardization and International Electrotechnical 
Commission, 国标 标准 化 组 织 和 国际 电工 委员 会 ) 也 采用 了 了 ECMAScript 作为 标准 ( 即 ISO/EC-16262 )。 
自 此 以 后 ,浏览 絮 开发 商 就 开始 致力 于 将 ECMAScript 作为 各 自 JavaScript 实现 的 基础 ， 也 在 不 同 程度 
上 取得 了 成 功 。 






















































































































































































1.2 JavaScript 实现 





虽然 JavaScript 和 ECMAScript 通常 都 被 人 们 用 来 表达 
相同 的 含义 ,但 JavaScript 的 含义 却 比 ECMA-262 中 规定 的 
要 多 得 多 。 没 错 ， 一 个 完整 的 JavaScript 实现 应 该 由 下 列 三 JS 
个 不 同 的 部 分 组 成 ( 见 图 1-1 )。 












































Ss ECMAScript DOM BOM 
口 核心 ( ECMAScript ) 
口 文档 对 象 模型 (DOM ) 
口 浏览 锅 对 象 模型 (BOM ) 图 1-1 
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1.2.1 ECMAScript 


由 ECMA-262 定义 的 ECMAScript 与 Web 浏览 器 没有 依赖 关系 。 实际 上 , 这 门 语言 本 身 并 不 包含 输 
入 和 输出 定义 。ECMA-262 定义 的 只 是 这 门 语言 的 基础 ， 而 在 此 基础 之 上 可 以 构建 更 完善 的 脚本 语言 。 
我 们 常见 的 Web 浏览 器 只 是 ECMAScript 实现 可 能 的 宿主 环境 之 一 。 宿 主 环境 不 仅 提供 基本 的 
ECMAScript 实现 ， 同 时 也 会 提供 该 语言 的 扩展 ， 以 便 语言 与 环境 之 间 对 接 交 互 。 而 这 些 扩 展 一 一 如 
DOM， 则 利用 ECMAScript 的 核心 类 型 和 语法 提供 更 多 更 具体 的 功能 ， 以 便 实 现 针 对 环境 的 操作 。 其 他 
答 主 环境 包括 Node ( 一 种 服务 端 JavaScript 平 台 ) 和 Adobe Flash。 

既然 ECMA-262 标准 没有 参照 Web 浏览 器 ， 那 它 都 规定 了 些 什么 内 容 呢 ? 大 致 说 来 ， 它 规定 了 这 
门 语 言 的 下 列 组 成 部 分 : 
口 语法 
口 类 型 
口 语句 
口 关键 字 
口 保留 字 
口 操作 符 
口 对 象 

ECMAScript 就 是 对 实现 该 标准 规定 的 各 个 方面 内 容 的 语言 的 描述 。JavaScript 实 现 了 了 ECMAScript， 
Adobe ActionScript 同样 也 实现 了 了 ECMAScript。 

1. ECMAScript 的 版 本 

ECMAScript 的 不 同 版 本 又 称 为 版 次 ， 以 第 * 版 表示 ( 意 即 描述 特定 实现 的 ECMA-262 规范 的 第 x 
个 版 本 )。ECMA-262 的 最 近 一 版 是 第 5 版， 发布 于 2009 年 。 而 ECMA-262 的 第 1 版 本 质 上 与 Netscape 
的 JavaScript 1.1 相同 一 一 只 不 过 删除 了 所 有 针对 浏览 器 的 代码 并 作 了 一 些 较 小 的 改动 : ECMA-262 要 求 
支持 Unicode 标准 ( 从 而 支持 多 语言 开发 )， 而且 对 象 也 变 成 了 平台 无 关 的 ( Netscape JavaScript 1.1 的 对 
象 在 不 同 平台 中 的 实现 不 一 样 , 例如 Date 对 象 ), 这 也 是 JavaScript 1.1 和 1.2 与 ECMA-262 第 1 版 不 一 
致 的 主要 原因 。 

ECMA-262 第 2 版 主要 是 编辑 加 工 的 结果 。 这 一 版 中 内 容 的 更 新 是 为 了 与 ISO/IEC-16262 保持 严格 
一 致 , 没有 作 任 何 新 增 、 修 改 或 删节 处 理 。 因 此 , 一 般 不 使 用 第 2 版 来 衡量 ECMAScript 实现 的 兼容 性 。 

ECMA-262 第 3 版 才 是 对 该 标准 第 一 次 真正 的 修改 。 修 改 的 内 容 涉 及 字符 串 处 理 、 错 误 定义 和 数 
值 输出 。 这 一 版 还 新 增 了 对 正则 表达 式 、 新 控制 语句 、try-catch 异常 处 理 的 支持 ， 并 围绕 标准 的 
国际 化 做 出 了 一 些小 的 修改 。 从 各 方面 综合 来 看 ， 第 3 版 标志 着 ECMAScript 成 为 了 一 门 真正 的 编程 
语言 。 

ECMA-262 第 4 版 对 这 门 语言 进行 了 一 次 全 面 的 检 核 修订 。 由 于 JavaScript 在 Web 上 日 益 流 行 ， 开 
发 人 员 纷 纷 建议 修订 ECMAScript， 以 使 其 能 够 满足 不 断 增长 的 Web 开发 需求 。 作 为 回应 , ECMA TC39 
重新 召集 相关 人 员 共 同谋 划 这 门 语言 的 未 来 。 结 果 , 出 台 后 的 标准 几乎 在 第 3 版 基础 上 完全 定义 了 一 门 
新 语言 。 第 4 版 不 仅 包含 了 强 类 型 变量 、 新 语句 和 新 数据 结构 、 真 正 的 类 和 经 典 继 承 ， 还 定义 了 与 数据 
交互 的 新 方式 。 

与 此 同时 ，TC39 下 属 的 一 个 小 组 也 提出 了 一 个 名 为 ECMAScript 3.1 的 替代 性 建议 ， 该 建议 只 对 这 
门 语 言 进 行 了 较 少 的 改进 。 这 个 小 组 认为 第 4 版 给 这 门 语言 带 来 的 跨越 太 大 了 。 因 此 ， 该 小 组 建议 对 这 
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门 语 言 进 行 小 幅 修订 , 能 够 在 现 有 JavaScript 引擎 基础 上 实现 。 最 终 ,， ES3.1 附属 委员 会 获得 的 支持 超过 
了 TC39，ECMA-262 第 4 版 在 正式 发 布 前 被 放弃 。 

ECMAScript 3.1 成 为 ECMA-262 第 5 版 ， 并 于 2009 年 12 月 3 日 正式 发 布 。 第 5 版 力求 澄清 第 3 
版 中 已 知 的 歧义 并 增添 了 新 的 功能 。 新 功能 包括 原生 JSON 对 象 (用 于 解析 和 序列 化 JSON 数据 )、 继 
承 的 方法 和 高 级 属性 定义 , 另外 还 包含 一 种 严格 模式 , 对 ECMAScript 引擎 解释 和 执行 代码 进行 了 补充 
说 明 。 

2. 什么 是 ECMAScript 兼容 

ECMA-262 给 出 了 了 ECMAScript 兼容 的 定义 。 要 想 成 为 ECMAScript 的 实现 ， 则 该 实现 必须 做 到 : 

口 支持 ECMA-262 描述 的 所 有 “类 型 、 值 、 对 象 、 属 性 、 函 数 以 及 程序 句法 和 语义 ”( ECMA-262 

第 1 页 ); 

口 支持 Unicode 字符 标准 。 

此 外 ， 兼 容 的 实现 还 可 以 进行 下 列 扩展 。 

口 添加 ECMA-262 没有 描述 的 “更 多 类 型 、 值 、 对 象 、 属 性 和 函数 ”"。ECMA-262 所 说 的 这 些 新 增 

特性 ， 主 要 是 指 该 标准 中 没有 规定 的 新 对 象 和 对 象 的 新 属性 。 

口 支持 ECMA-262 没有 定义 的 “程序 和 正则 表达 式 语法 ”。( 也 就 是 说 ， 可 以 修改 和 扩展 内 置 的 正 
则 表达 式 语法 。) 

上 述 要 求 为 兼容 实现 的 开发 人 员 基 于 ECMAScript 开发 一 门 新 语言 提供 了 广阔 的 空间 和 极 大 的 灵活 
性 ， 这 也 从 另 一 个 侧面 说 明了 ECMAScript 受 开发 人 员 欢 迎 的 原因 。 

3. Web 浏览 器 对 ECMAScript 的 支持 

1996 年 ，Netscape Navigator 3 捆绑 发 布 了 JavaScript 1.1。 而 相同 的 JavaScript 1.1 设计 规范 随后 作为 
对 新 标准 (ECMA-262 ) 的 建议 被 提交 给 Eema。 伴 随 着 JavaScript 的 迅速 走红 ，Netscape 豪情 满怀 地 着 
手 开发 JavaScript 1.2。 然 而 ， 问 题 是 Ecma 当时 还 没有 接受 Netscape 的 建议 。 

Netscape Navigator 3 发 布 后 不 久 ， 微 软 也 推出 了 Internet Explorer 3。 微 软 在 IE 的 这 一 版 中 捆绑 了 
JScript 1.0， 很 多 人 都 认为 JScript 1.0 与 JavaScript 1.1 应 该 是 一 样 的 。 但 是 ， 由 于 没有 文档 依据 ， 加 之 不 
适当 的 特性 模仿 ，JScript 1.0 还 是 很 难 与 JavaScript 1.1 相提并论 。 

1997 年 ， 内 置 JavaScript 1.2 的 Netscape Navigator 4 发布; 而 到 这 一 年 年 底 ，ECMA-262 第 1 版 也 
被 接受 并 实现 了 标准 化 。 结 果 ， 虽 然 ECMAScript 被 认为 是 基于 JavaScript 1.1 制定 的 ， 但 JavaScript 1.2 
与 ECMAScript 的 第 1 版 并 不 兼容 。 

JScript 的 升级 版 是 Internet Explorer 4 中 内 置 的 JScript 3.0( 随同 微软 IS 3.0 发 布 的 JScript 2.0 从 来 
也 没有 移植 到 浏览 器 中 )。 微 软 通过 媒体 大 肆 宣 传 JScript 3.0 是 世界 上 第 一 个 ECMA 兼容 的 脚本 语言 ， 
但 当时 的 ECMA-262 尚未 定稿 。 于 是 ，JScript 3.0 与 JavaScript 1.2 都 遭遇 了 相同 的 尴 众 局 面 一 一 谁 都 没 
有 按照 最 终 的 ECMAScript 标准 来 实现 。 

Netscape 决定 更 新 其 JavaScript 实现 ， 即 在 Netscape Navigator 4.06 中 发 布 JavaScript 1.3 ， 从 而 做 到 
了 与 ECMA-262 的 第 一 个 版 本 完全 兼容 。 在 JavaScript 1.3 中 ，Netscape 增加 了 对 Unicode 标准 的 支持 ， 
并 在 保留 JavaScript 1.2 新 增 特 性 的 同时 实现 了 所 有 对 象 的 平台 中 立 化 。 

在 Netscape 以 Mozilla 项 目的 名 义 开 放 其 源 代码 时 ， 预 期 JavaScript 1.4 将 随同 Netscape Navigator 5 
一 道 发 布 。 然 而 , 一 个 激进 的 决定 , 彻底 重新 设计 Netscape 代码 , 打 乱 了 原 有 计划 。 后 来 ,JavaScript 1.4 
只 发 布 了 针对 Netscape Enterprise Server 的 服务 器 版 ， 而 没有 内 置 于 Web 浏览 器 中 。 

到 了 2008 年 ,五 大 主流 Web 浏览 器 (I 王 、Firefox、Safari、Chrome 和 Opera ) 全 部 做 到 了 与 ECMA-262 
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兼容 。IE8 是 第 一 个 着 手 实现 ECMA-262 第 5 版 的 浏览 器 ， 并 在 IE9 中 提供 了 完整 


的 支持 。Fire 


加 

















紧 随 其 后 做 到 兼容 。 下 表 列 出 了 ECMAScript 受 主流 Web 浏览 器 支持 的 情况 。 
浏览 昌 ECMAScript 兼 容 性 浏览 器 ECMAScript 兼 容 性 
Netscape Navigator 2 Opera 6~7.1 第 2 版 
Netscape Navigator 3 = Opera 7.2+ 第 3 版 
Netscape Navigator 4 ~ 4.05 和 Safari 1 ~2.0.x 第 3 版 * 
Netscape Navigator 4.06 ~ 4.79 第 1 版 Safari 3.x 第 3 版 
Netscape 6+ ( Mozilla 0.6.0+ ) 第 3 版 Safari 4.x~5.x 第 5 版 * 
IE3 == Chrome 1+ 第 3 版 
IE4 Firefox 1 一 2 第 3 版 
ES 第 1 版 Firefox 3.0x 第 3 版 
1BE5.5 1E7 第 3 版 Firefox 3.5~3.6 第 5 版 * 
Us 第 5 版 Firefox 4.0 十 第 5 版 
IE9+ 第 5 版 
* 不 完全 兼容 的 实现 
1.2.2 ”文档 对 象 模型 CDOM ) 
文档 对 象 模型 (DOM，Document Object Model ) 是 针对 XML 但 经 过 扩展 用 于 HTML 的 应 用 程序 编 


程 接口 (API，Application Programming Interface )。DOM 把 整个 页 国 





























i 映射 为 一 个 多 层 节 点 结构 。HTML 


或 XML 页 面 中 的 每 个 组 成 部 分 都 是 某 种 类 型 的 节点 ， 这 些 节 点 又 包含 着 不 同类 型 的 数据 。 看 下 面 这 个 


HTML 页 面 : 


<html> 
<head> 


<title>Sample Page</title> 


</head> 
<body> 


<p>Hello World!</p> 


</body> 
</html> 





中 


在 DOM 中 ， 


DOM 提供 的 API， 姑 


这 个 页 面 








pe 
se 


F 发 人 员 可 以 轻松 自如 地 











~ 





1. 为 什么 要 使 用 


在 Internet Explorer 4 和 Netscape Navigator 4 分别 支持 的 不 同 


DOM 


可 以 通过 图 1-2 所 示 的 分 层 节点 图 表示 。 
通过 DOM 创建 的 这 个 表示 文档 的 树 


图 ， 开 发 人 员 获 得 了 探 人 





判 页 面 内 容 和 结构 的 主动 权 。 借 助 





























础 上 ， 开 发 人 员 首 次 无 需 重 新 加 载 


展 带 来 巨大 进步 的 同 





去 那个 只 编写 一 个 HTML 页 面 就 能 够 在 任何 浏览 器 中 
果 想 继续 保持 Web 跨 平台 的 天 性 ， 就 必须 额外 多 做 一 些 工 作 。 而 人 们 真正 担 
心 的 是 ， 如 果 不 对 Netscape 和 微软 加 以 控制 ，Web 开发 领域 就 会 出 现 技 术 上 两 强 割 据 ， 浏 览 右 互 不 弄 





对 开发 人 员 而 言 


























时 ,也 带 来 了 








， 如 





一 


运行 


删除 、 添 加 、 蔡 换 或 修改 任何 节点 。 


攻 式 的 DHTML (Dynamic HTML ) 基 
网 页 ， 就 可 以 修改 其 外 观 和 内 容 了 。 然 而 ，DHTML 在 给 Web 技术 发 
巨大 的 问题 。 由 于 Netscape 和 微软 在 开发 DHTML 方面 各 持 已 见 , 过 
的 时 代 结 束 了 。 
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容 的 局 面 。 此 时 ， 负 责 制定 Web 通信 标准 的 W3C ( World Wide Web Consortium， 万 维 网 联盟 ) 开始 着 


手 规划 DOM。 
html | 












































-人 Sample Page 












































Hello World! 











2. DOM 级 别 

DOM1 级 (DOMLevell ) 于 1998 年 10 月 成 为 W3C 的 推荐 标准 。 DOMI1 级 由 两 个 模块 组 成 : DOM 
核心 (DOM Core ) 和 DOM HTML。 其 中 ，DOM 核心 规定 的 是 如 何 映射 基于 XML 的 文档 结构 ， 以 便 
简化 对 文档 中 任意 部 分 的 访问 和 操作 。DOM HTML 模块 则 在 DOM 核心 的 基础 上 加 以 扩展 ， 添 加 了 针 
对 HTML 的 对 象 和 方法 。 





















请 读者 注意 , DOM 并 不 只 是 针对 JavaScript 的 , 很 多 别 的 语言 也 都 实现 了 DOM。 
不 过 ， 在 Web 浏览 器 中 ， 基 于 ECMAScript 实现 的 DOM 的 确 已 经 成 为 JavaScript 这 
门 语 言 的 一 个 重要 组 成 部 分 。 





如 果 说 DOMI1 级 的 目标 主要 是 映射 文档 的 结构 ， 那 么 DOM2 级 的 目标 就 要 宽泛 多 了 。DOM2 级 在 
原来 DOM 的 基础 上 又 扩充 了 (DHTML 一 直 都 支持 的 ) 鼠标 和 用 户 界 面 事件 、 范 围 、 遍 历 ( 迭 代 DOM 
文档 的 方法 ) 等 细 分 模块 ， 而 且 通过 对 象 接口 增加 了 对 CSS ( Cascading Style Sheets ， 层 二 样 式 表 ) 的 
支持 。DOMI 级 中 的 DOM 核心 模块 也 经 过 扩展 开始 支持 XML 命名 空间 。 

DOM2 级 引入 了 下 列 新 模块 ， 也 给 出 了 众多 新 类 型 和 新 接口 的 定义 。 

口 DOM 视图 (DOM Views ): 定义 了 跟踪 不 同文 档 ( 例如 ， 应 用 CSS 之 前 和 之 后 的 文档 ) 视图 的 
接口 ; 
口 DOM 事件 (DOM Events ): 定义 了 事件 和 事件 处 理 的 接口 ; 

口 DOM 样式 (DOM Style ): 定义 了 基于 CSS 为 元 素 应 用 样式 的 接口 ; 

口 DOM 遍历 和 范围 ( DOM Traversal and Range ): 定义 了 遍历 和 操作 文档 树 的 接口 。 

DOM3 级 则 进一步 扩展 了 DOM， 引 入 了 以 统一 方式 加 载 和 保存 文档 的 方法 一 一 在 DOM 加 载 和 保 
存 (DOM Load and Save ) 模块 中 定义 ; 新 增 了 验证 文档 的 方法 一 一 在 DOM 验证 (DOM Validation ) 模 
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块 中 定义 。DOM3 级 也 对 DOM 核心 进行 了 扩展 ， 开 始 支持 XML 1.0 规范 ,涉及 XML Infoset、XPath 
和 XML Base。 










在 阅读 DOM 标准 的 时 候 ， 读 者 可 能 会 看 到 DOM0 级 (DOM Level 0 ) 的 字眼 。 
实际 上 ，DOM0 级 标准 是 不 存在 的 ; 所 谓 DOM0 级 只 是 DOM 历史 坐标 中 的 一 个 参照 
点 而 已 。 有 具体 说 来 ，DOM0 级 指 的 是 Internet Explorer 4.0 和 Netscape Navigator 4.0 最 
初 支持 的 DHTML。 


3. 其 他 DOM 标准 

除了 DOM 核心 和 DOM HTML 接口 之 外 ， 另 外 几 种 语言 还 发 布 了 只 针对 自己 的 DOM 标准 。 下 独 
列 出 的 语言 都 是 基于 XML 的 ， 每 种 语言 的 DOM 标准 都 添加 了 与 特定 语言 相关 的 新 方法 和 新 接口 : 
口 SVG ( Scalable Vector Graphic， 可 伸缩 矢量 图 ) 1.0; 
口 MathML ( Mathematical Markup Language， 数 学 标记 语言 ) 1.0; 
口 SMIL (Synchronized Multimedia Integration Language， 同 步 多 媒体 集成 语言 )。 

还 有 一 些 语言 也 开发 了 自己 的 DOM 实现 ,例如 Mozilla 的 XUL( XML User Interface Language, XML 
用 户 界 面 语言 )。 但 是 ， 只 有 上 面 列 出 的 几 种 语言 是 W3C 的 推荐 标准 。 

4. Web 浏览 器 对 DOM 的 支持 

在 DOM 标准 出 现 了 一 段 时 间 之 后 ，Web 浏览 带 才 开始 实现 它 。 微 软 在 IE5 中 首次 尝试 实现 DOM ， 
但 直到 IE5.5 才 算 是 真正 支持 DOM1 级 。 在 随后 的 IE6 和 IE7 中 ， 微 软 都 没有 引入 新 的 DOM 功能 ， 而 
到 了 IE8 才 对 以 前 DOM 实现 中 的 bug 进行 了 修复 。 

Netscape 直到 Netscape 6 ( Mozilla 0.6.0 ) 才 开 始 支持 DOM。 在 Netscape 7 之 后 ，Mozilla 把 开发 重心 转 
向 了 Firefox 浏览 器 。Firefox 3 完全 支持 DOMI1 级 ， 儿 乎 完全 支持 DOM2 级 ， 基 至 还 支持 DOM3 级 的 一 部 
分 。( Mozilla 开发 团队 的 目标 是 构建 与 标准 100% 兼 容 的 浏览 器 ， 而 他 们 的 努力 也 得 到 了 回报 。) 
目前 , 支持 DOM 已 经 成 为 浏览 器 开发 商 的 首要 目标 , 主流 浏览 器 每 次 发 布 新 版 本 都 会 改进 对 DOM 
的 支持 。 下 表 列 出 了 主流 浏览 带 对 DOM 标准 的 支持 情况 。 


































































































浏览 晶 DOM 兼 容 性 
Netscape Navigator 1. ~ 4.x = 
Netscape 6+ (Mozilla 0.6.0+ ) 1 级 、2 级 ( 几乎 全 部 ) 、3 级 (部 分 ) 
IE2~IE4.x 二 
IE5 1 级 〈 最 小 限度 ) 
IE5.5 一 IE8 1 级 ( 几乎 全 部 ) 
IE9+ 1 级 、2 级 、3 级 
Opera 1 一 6 二 二 
Opera 7 一 8 1 级 ( 几乎 全 部 ) 、2 级 〈 部 分 ) 
Opera 9 一 9.9 1 级 、2 级 ( 几乎 全 部 ) 、3 级 (部 分 ) 
Opera 10+ 1 级 、2 级 、3 级 ( 部 分 ) 
Safari 1.0.x 1 级 
Safari 2+ 1 级 、2 级 (部 分 ) 
Chrome 1+ 1 级 、2 级 (部 分 ) 
Firefox 1+ 1 级 、2 级 ( 几乎 全 部 ) 、3 级 ( 部 分 ) 
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1.2.3 ”浏览 器 对 象 模型 (BOM ) 


Internet Explorer 3 和 Netscape Navigator 3 有 一 个 共同 的 特色 ， 那 就 是 支持 可 以 访问 和 操作 浏览 器 和 窗 
口 的 浏览 器 对 象 模 型 ( BOM，Browser Object Model )。 开 发 人 员 使 用 BOM 可 以 控制 浏览 器 显示 的 页 耳 
以 外 的 部 分 。 而 BOM 真正 与 众 不 同 的 地 方 ( 也 是 经 常会 导致 问题 的 地 方 )， 还 是 它 作 为 JavaScript 实现 
的 一 部 分 但 却 没有 相关 的 标准 。 这 个 问题 在 HTMLS5 中 得 到 了 解决 , HTML5 致力 于 把 很 多 BOM 功能 写 
入 正式 规范 。HTML5 发 布 后 ， 很 多 关于 BOM 的 困惑 烟消云散 。 

从 根本 上 讲 , BOM 只 处 理 浏览 器 窗口 和 框架 ; 但 人 们 习惯 上 也 把 所 有 针对 浏览 器 的 JavaScript 扩展 

算 作 BOM 的 一 部 分 。 下 面 就 是 一 些 这 样 的 扩展 : 

口 弹出 新 浏览 器 窗口 的 功能 ; 

口 移动 、 缩 放 和 关闭 浏览 器 窗口 的 功能 ; 

口 提供 浏览 器 详 细 信 息 的 navigator 对 象 ; 

口 提供 浏览 器 所 加 载 页 面 的 详细 信息 的 location 对 象 ; 

口 提供 用 户 显 示 器 分 辩 率 详细 信息 的 screen 对 象 ; 

口 对 cookies 的 支持 ; 

口 像 XMLHttpRequest 和 下 的 ActivexXobject 这 样 的 自 定义 对 象 。 

由 于 没有 BOM 标准 可 以 遵循 ， 因 此 每 个 浏览 器 都 有 自己 的 实现 。 虽 然 也 存在 一 些 事实 标准 ， 例 如 
要 有 window 对 象 和 navigator 对 象 等 ,但 每 个 浏览 器 都 会 为 这 两 个 对 象 乃至 其 他 对 象 定义 自己 的 属 
性 和 方法 。 现 在 有 了 HIML5，BOM 实现 的 细节 有 望 朝 着 兼容 性 越 来 越 高 的 方向 发 展 。 第 8 章 将 深入 讨 
论 BOM。 


1.3 ” JavaScript 版 本 


作为 Netscape“ 继 承 人 ”的 Mozilla 公司 ,是 目前 唯一 还 在 沿用 最 初 的 JavaScript 版 本 编号 序列 的 浏 
览 器 开发 商 。 在 Netscape 将 源 代码 提交 给 开源 的 Mozilla 项 目的 时 候 ，JavaScript 在 浏览 器 中 的 最 后 一 个 
版 本 号 是 1.3。( 如 前 所 述 ,1.4 版 是 只 针对 服务 需 的 实现 。 辣 来 , 随 着 Mozilla 基金 会 继续 开发 JavaScript， 
添加 新 的 特性 、 关 键 字 和 语法 ，JavaScript 的 版 本 号 继续 递增 。 下 表 列 出 了 Netscape/Mozilla 浏览 絮 中 
JavaScript 版 本 号 的 递增 过 程 : 























































































































浏览 器 JavaScript 版 本 浏览 器 JavaScript 版 本 
Netscape Navigator 2 1.0 Firefox 1.5 1.6 
Netscape Navigator 3 1.1 Firefox 2 1:7 
Netscape Navigator 4 1.2 Firefox 3 1.8 
Netscape Navigator 4.06 1.3 Firefox 3.5 1.8.1 
Netscape 6+ ( Mozilla 0.6.0+ ) 1.5 Firefox 3.6 1.8.2 
Firefox 1 I:S 











实际 上 ， 上 表 中 的 编号 方案 源 自 Firefox 4 将 内 置 JavaScript 2.0 这 一 共识 。 因 此 ，2.0 版 之 前 每 个 递 
增 的 版 本 号 ， 表 示 的 是 相应 实现 与 JavaScript 2.0 开发 目标 还 有 多 大 的 距离 。 虽 然 原 计划 是 这 样 ， 但 
JavaScript 的 这 种 发 展 速度 让 这 个 计划 不 再 可 行 。 目 前 ，JavaScript 2.0 还 没有 目标 实现 。 
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请 注意 ， 只 有 Netscape/Mozilla 浏览 器 才 遵 循 这 种 编号 模式 。 例 如 ， 下 的 JScript 
就 采用 了 另 一 种 版 本 命名 方案 。 换 名 话说 ，JScript 的 版 本 号 与 上 表 中 JavaScript 的 版 
本 号 之 间 不 存在 任何 对 应 关系 。 而 有 全， 大 多 数 浏览 器 在 提 及 对 JavaScript 的 支持 情况 
时 ， 一 般 都 以 ECMAScript 兼容 性 和 对 DOM 的 支持 情况 为 准 。 







1.4 小结 


JavaScript 是 一 种 专 为 与 网 页 交互 而 设计 的 脚本 语言 ， 由 下 列 三 个 不 同 的 部 分 组 成 : 
口 ECMAScript， 由 ECMA-262 定义 ， 提 供 核心 语言 功能 ; 
口 文档 对 象 模型 (DOM )， 提 供 访问 和 操作 网 页 内 容 的 方法 和 接口 ; 
口 浏览 器 对 象 模 型 (BOM )， 提 供与 浏览 器 交互 的 方法 和 接口 。 

JavaScript 的 这 三 个 组 成 部 分 ， 在 当前 五 个 主要 浏览 器 (IE、Firefox、Chrome、Safari 和 Opera ) 中 
都 得 到 了 不 同 程度 的 支持 。 其 中 ， 所 有 浏览 器 对 ECMAScript 第 3 版 的 支持 大 体 上 都 还 不 错 ， 而 对 
ECMAScript 5 的 支持 程度 越 来 越 高 ， 但 对 DOM 的 支持 则 彼此 相差 比较 多 。 对 已 经 正式 纳入 HTML5 标 
准 的 BOM 来 说 ， 尽 管 各 浏览 器 都 实现 了 某 些 众所周知 的 共同 特性 ， 但 其 他 特性 还 是 会 因 浏览 器 而 异 。 
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在 HTML 中 使 用 JavaScript 





本 章 内 容 

口 使 用 <script> 元 素 

口授 入 脚本 与 外 部 脚本 

口 文档 模式 对 JavaScript 的 影响 
口 考虑 禁用 JavaScript 的 场景 



































口 要 一 提 到 把 JavaScript 放 到 网 页 中 ， 就 不 得 不 涉及 Web 的 核心 语言 


一 一 HTML。 在 当初 开发 





人 JavaScript 的 时 候 , Netscape 要 解决 的 一 个 重要 问题 就 是 如 何 做 到 让 JavaScript 既 能 与 HTML 

















当中 。 


.1 <script> 元 素 























面 共 存 ， 又 不 影响 那些 页 面 在 其 他 浏览 器 中 的 呈现 效果 。 经 过 尝试 、 纠 错 和 争论 ， 最 终 的 决定 就 是 
Web 增加 统一 的 脚本 支持 。 而 Web 诞生 早期 的 很 多 做 法 也 都 保留 了 下 来 ， 并 被 正式 纳入 HTML 规 


向 HTML 页 面 中 插入 JavaScript 的 主要 方法 ， 就 是 使 用 <script> 元 素 。 这 个 元 素 由 Netscape 创造 























等 待 加 载 其 他 脚本 。 只 对 外 部 脚本 文件 有 效 。 











此 这 个 属性 很 少 有 人 用 。 


口 charset: 可 选 。 表 示 通 过 src 属性 指定 的 代码 的 字符 集 。 由 于 大 多 数 浏 览 髓 会 忽 


并 在 Netscape Navigator 2 中 首先 实现 。 后 来 ， 这 个 元 素 被 加 入 到 正式 的 HTML 规范 中 。HTML 4.01 为 
<script> 定 义 了 下 列 6 个 属性 。 
口 async: 可 选 。 表 示 应 该 立即 下 载 脚本 ， 但 不 应 妨碍 页 面 中 的 其 他 操作 ， 比 如 下 载 其 他 资源 或 


名 它 的 值 ， 








口 aefer: 可 选 。 表 示 脚 本 可 以 延迟 到 文档 完全 被 解析 和 显示 之 后 是 
效 。IE7 及 更 早 版 本 对 藤 入 脚本 也 支持 这 个 属性 。 



































了 执行。 只 对 外 部 朋 




















口 src: 可 选 。 表 示 包 含 要 执行 代码 的 外 部 文件 。 






































口 type: 可 选 。 可 以 看 成 是 language 的 替代 属性 ; 表示 编写 代码 使 用 的 脚本 语言 的 内 


即 本 文件 有 


口 language: 已 废弃 ,原来 用 于 表示 编写 代码 使 用 的 脚本 语言 (如 Javascript、JavaScript1.2 
或 VBScript )。 大 多 数 浏 览 器 会 匆 略 这 个 属性 ， 因 此 也 没有 必要 再 用 了 。 


容 类 型 (也 


称 为 MIME 类 型 ), 虽然 cext/javascript 和 text/ecmascript 都 已 经 不 被 推荐 使 用 , 但 人 
们 一 直 以 来 使 用 的 都 还 是 text/javascript。 实 际 上 ， 服 务 右 在 传送 JavaScript 文件 时 使 用 的 
MIME 类 型 通常 是 application/x-javascript, 但 在 type 中 设置 这 个 值 却 可 能 导致 脚本 被 
忽略 .另外 ,在 非 耻 浏览 器 中 还 可 以 使 用 以 下 值 :application/javascript 和 application/ 
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ecmascript。 考 虑 到 约定 俗 成 和 最 大 限度 的 浏览 器 兼容 性 ， 目 前 type 属性 的 值 依旧 还 是 
text/javascript。 不 过， 这 个 属性 并 不 是 必需 的 ， 如 果 没 有 指定 这 个 属性 ， 则 其 默认 值 仍 为 
text/javascripto 
使 用 <script> 元 素 的 方式 有 两 种 : 直接 在 页 面 中 能 入 JavaScript 代码 和 包含 外 部 JavaScript 
文件 。 
在 使 用 <script> 元 素 能 入 JavaScript 代码 时 ， 只 须 为 <script> 指 定 type 属性 。 然 后 ， 像 下 面 这 
样 把 JavaScript 代码 直接 放 在 元 素 内 部 即 可 : 
<script type="text/javascript"> 


function SayHi(){ 
lert( "HLL ); 























} 


</BCELOt 

包含 在 <script> 元 素 内 部 的 JavaScript 代码 将 被 从 上 至 下 依次 解释 。 就 拿 前 面 这 个 例子 来 说 , 解释 
器 会 解释 一 个 函数 的 定义 ， 然 后 将 该 定义 保存 在 自己 的 环境 当中 。 在 解释 器 对 <script> 元 素 内 部 的 所 
有 代码 求 值 完毕 以 前 ， 页 面 中 的 其 余 内 容 都 不 会 被 浏览 器 加 载 或 显示 。 

在 使 用 <script> 舱 入 JavaScript 代码 时 , 记 住 不 要 在 代码 中 的 任何 地 方 出 现 "</script>" 字 符 串 。 
例如 ， 浏 览 器 在 加 载 下 面 所 示 的 代码 时 就 会 产生 一 个 错误 : 

<script type="text/javascript"> 


function sayScript()t{ 
alert ("</script>"); 


























} 
</script> 
因为 按照 解析 般 入 式 代 码 的 规则 ， 当 浏览 器 遇 到 字符 串 "</script>" 时 ， 就 会 认为 那 是 结束 的 
</script> 标 签 。 而 通过 转 义 字符 “/” 可 以 解决 这 个 问题 ， 例 如 : 

<script type="text/javascript"> 


function sayScript(){ 
alert ("<\/script>"); 





} 


</script> 

这 样 写 代码 浏览 器 可 以 接受 ， 因 而 也 就 不 会 导致 错误 了 。 

如 果 要 通过 <script> 元 素来 包含 外 部 JavaScript 文件 ， 那 么 src 属性 就 是 必需 的 。 这 个 属性 的 值 
是 一 个 指向 外 部 JavaScript 文件 的 链接 ， 例 如 : 

<script type="text/javascript" src="example.js"></script> 

在 这 个 例子 中 , 外 部 文件 example .js 将 被 加 载 到 当前 页 面 中 。 外 部 文件 只 须 包含 通常 要 放 在 开始 
的 <script> 和 结束 的 </script> 之 间 的 那些 JavaScript 代码 即 可 。 与 解析 能 入 式 JavaScript 代码 一 样 ， 
在 解析 外 部 JavaScript 文件 (包括 下 载 该 文件 ) 时 ， 页面 的 处 理 也 会 暂时 停止 。 如 果 是 在 XHTML 文档 
中 ， 也 可 以 省 略 前 面 示例 代码 中 结束 的 </script> 标 签 ， 例如: 

<script type="text/javascript" src="example.js" /> 

但 是 ,不 能 在 HTML 文档 使 用 这 种 语法 。 原 因 是 这 种 语法 不 符合 HTML 规范 ， 而 且 也 得 不 到 某 些 
浏览 器 (尤其 是 正 ) 的 正确 解析 。 
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按照 惯例 ， 外 部 JavaScript 文件 带 有 .js 扩展 名 。 但 这 个 扩展 名 不 是 必需 的 ， 因 为 
浏览 器 不 会 检查 包含 JavaScript 的 文件 的 扩展 名 。 这 样 一 来 ， 使 用 JSP、PHP 或 其 他 
服务 器 端 语言 动态 生成 JavaScript 代码 也 就 成 为 了 可 能 。 但 是 ， 服 务 器 通常 还 是 需要 
看 扩展 名 决定 为 响应 应 用 哪 种 MIME 类 型 。 如 果 不 使 用 .js 扩展 名 ， 请 确保 服务 器 能 
返回 正确 的 MIME 类 型 。 










需要 注意 的 是 ， 带 有 src 属性 的 <script> 元 素 不 应 该 在 其 <script> 和 </script> 标 签 之 间 再 
包含 额外 的 JavaScript 代码 。 如 果 包 含 了 般 入 的 代码 ， 则 只 会 下 载 并 执行 外 部 脚本 文件 ， 般 入 的 代码 
会 被 忽略 。 

另外 ， 通 过 <script> 元 素 的 src 属性 还 可 以 包含 来 自 外 部 域 的 JavaScript 文件 。 这 一 点 既 让 
<script> 元 素 倍 显 强大 , 又 让 它 备 受 争议 ,在 这 一 点 上 , <script> 与 <img> 元 素 非常 相似 , 即 它 的 src 
属性 可 以 是 指向 当前 HTML 页 面 所 在 域 之 外 的 某 个 域 中 的 完整 URL， 例 如 : 

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script> 

这 样 ， 位 于 外 部 域 中 的 代码 也 会 被 加 载 和 解析 ， 就 像 这 些 代码 位 于 加 载 它们 的 页 面 中 一 样 。 利 用 这 
一 点 就 可 以 在 必要 时 通过 不 同 的 域 来 提供 JavaScript 文件 。 不 过 ， 在 访问 自己 不 能 控制 的 服务 器 上 的 
JavaScript 文件 时 则 要 多 加 小 心 。 如 果 不 幸 遇 到 了 怀 有 恶意 的 程序 员 ， 那 他 们 随时 都 可 能 蔡 换 该 文件 中 
的 代码 。 因 此 ， 如 果 想 包含 来 自 不 同 域 的 代码 ， 则 要 么 你 是 那个 域 的 所 有 者 ,要么 那个 域 的 所 有 者 值得 
信赖 。 

无 论 如 何 包含 代码 ， 只 要 不 存在 defer 和 async 属性 ， 浏 览 器 都 会 按照 <script> 元 素 在 页 面 中 
出 现 的 先后 顺序 对 它们 依次 进行 解析 。 换 句 话 说， 在 第 一 个 <script> 元 素 包含 的 代码 解析 完成 后 ， 第 
二 个 <script> 包 含 的 代码 才 会 被 解析 ， 然 后 才 是 第 三 个 、 第 四 个 …… 



















































































2.1.1 标签 的 位 置 
按照 传统 的 做 法 ， 所 有 <script> 元 素 都 应 该 放 在 页 面 的 <nead> 元 素 中 ,例如 : 


<1DOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" src="examplel.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 放 内 容 --> 
</body> 
</html> 


这 种 做 法 的 目的 就 是 把 所 有 外 部 文件 (包括 CSS 文件 和 JavaScript 文件 ) 的 引用 都 放 在 相同 的 地 方 。 
可 是 , 在 文档 的 <head> 元 素 中 包含 所 有 JavaScript 文件 , 意味 着 必须 等 到 全 部 JavaScript 代码 都 被 下 载 、 
解析 和 执行 完成 以 后 ,才能 开始 呈现 页 面 的 内 容 (浏览 器 在 遇 到 <boqy> 标 签 时 才 开始 呈现 内 容 )。 对 于 
那些 需要 很 多 JavaScript 代码 的 页 面 来 说 ， 这 无 疑 会 导致 浏览 器 在 呈现 页 面 时 出 现 明显 的 延迟 ， 而 延迟 
期 间 的 浏览 器 窗口 中 将 是 一 片 空白 。 为 了 避免 这 个 问题 现代 Web 应 用 程序 一 般 都 把 全 部 JavaScript 引 
用 放 在 <body> 元 素 中 页 面 内 容 的 后 面 ， 如 下 例 所 示 : 
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<!IDOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<!-- 这 里 放 内 容 --> 
<script type="text/javascript" src="examplel.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</body> 
</html> 








这 样 ， 在 解析 包含 的 JavaScript 代码 之 前 ， 页 面 的 内 容 将 完全 呈现 在 浏览 器 中 。 而 用 户 也 会 因为 济 




















览 器 窗口 显示 空白 页 面 的 时 间 缩 短 而 感到 打开 页 面 的 速度 加 快 了 。 


2.1.2 ”延迟 脚本 




















HTML4.01 为 <script> 标 签 定义 了 aefer 属性 。 这 个 属性 的 用 途 是 表明 脚本 在 执行 时 不 会 影响 页 




















defer 属性 ， 相 当 于 告诉 浏览 器 立即 下 载 ， 但 延迟 执行 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" defer="defer" src="examplel.js"></script> 
<script type="text/javascript" defer="defer" src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 放 内 容 --> 
</body> 
</html> 

















面 的 构造 。 也 就 是 说 ， 脚 本 会 被 延迟 到 整个 页 面 都 解析 完毕 后 再 运行 。 因 此 ， 在 <script> 元 素 中 设置 





在 这 个 例子 中 ,虽然 我 们 把 <script> 元 素 放 在 了 文档 的 <headq> 元 素 中 , 但 其 中 包含 的 脚本 将 延迟 
到 浏览 器 遇 到 </html> 标 签 后 再 执行 。HTML5 规范 要 求 脚 本 按照 它们 出 现 的 先后 顺序 执行 ， 因 此 第 一 


个 延迟 脚本 会 先 于 第 二 个 延迟 脚本 执行 , 而 这 两 个 脚本 会 先 于 DoMcontentLoaded 事件 ( 详 见 第 1 





3 章 ) 


执行 。 在 现实 当中 ,延迟 脚本 并 不 一 定 会 按照 顺序 执行 ， 也 不 一 定 会 在 DOMContentLoaded 事件 触发 


前 执行 ， 因 此 最 好 只 包含 一 个 延迟 脚本 。 

















前 面 提 到 过 ，aqaefer 属性 只 适用 于 外 部 脚本 文件 。 这 一 点 在 HIMLS 中 已 经 明确 规定 ， 因 此 支持 
HTMLS5 的 实现 会 忽略 给 内 入 脚本 设置 的 defer 属性 。IE4 ~ IE7 还 支持 对 散 入 脚本 的 defer 属性 , 但 























IE8 及 之 后 版 本 则 完全 支持 HTML5 规定 的 行为 。 








IE4、Firefox 3.5、Safari 5 和 Chrome 是 最 早 支持 defer 属性 的 浏览 器 。 其 他 浏览 器 会 忽略 这 个 属 














性 ， 像 平常 一 样 处 理 脚 本 。 为 此 ， 把 延迟 脚本 放 在 页 面 底部 仍然 是 最 佳 选择 。 





在 XHTML 文档 中 ， 要 把 defer 属性 设置 为 defer="defer"。 


2.1.3 “异步 脚本 











脚本 





HTML5 为 <script> 元 素 定 义 了 async 属性 。 这 个 属性 与 defer 属性 类 似 ， 都 用 于 改变 处 理 
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的 行为 。 同 样 与 defer 类 似 , async 只 适用 于 外 部 脚本 文件 , 并 告诉 浏览 器 立即 下 载 文件 。 但 与 defer 
不 同 的 是 ,标记 为 async 的 脚本 并 不 保证 按照 指定 它们 的 先后 顺序 执行 。 例 如 : 


<1DOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" async src="examplel.js"></script> 
<script type="text/javascript" async src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 放 内 容 --> 
</body> 
</html> 


在 以 上 代码 中 , 第 二 个 脚本 文件 可 能 会 在 第 一 个 脚本 文件 之 前 执行 。 因此, 确保 两 者 之 间 互 不 依赖 
非常 重要 。 指 定 async 属性 的 目的 是 不 让 页 面 等 待 两 个 脚本 下 载 和 执行 ， 从 而 异步 加 载 页 面 其 他 内 容 。 
为 此 ， 建 议 异步 脚本 不 要 在 加 载 期 间 修 改 DOM。 

异步 脚本 一 定 会 在 页 面 的 1oaqd 事件 前 执行 ,但 可 能 会 在 DOMContentLoaded 事件 触发 之 前 或 之 
后 执行 。 支 持 异步 脚本 的 浏览 器 有 Firefox 3.6、Safari5 和 Chrome。 





















































在 XHTML 文档 中 ， 要 把 async 属性 设置 为 async="async"。 





2.1.4 在 XHTML 中 的 用 法 ? 


可 扩展 超 文本 标记 语言 ， 即 XHTML ( Extensible HyperText Markup Language )， 是 将 HTML 作为 
XML 的 应 用 而 重新 定义 的 一 个 标准 。 编 写 XHTML 代码 的 规则 要 比 编写 HTML 严格 得 多 ， 而 且 直 接 影 
响 能 否 在 般 入 JavaScript 代码 时 使 用 <script/> 标 签 。 以 下 面 的 代码 块 为 例 , 虽然 它们 在 HTML 中 是 有 
效 的 ， 但 在 XHTML 中 则 是 无 效 的 。 




















<script type="text/javascript"> 
function compare(a, b) { 
if (a < b) { 
alert ("A is less than B"); 
} else if (a > b) { 
alert ("A is greater than B"); 
} else { 
alert ("A is equal to B"); 
} 
} 


/SCrLGES 

在 HTML 中 ， 有 特殊 的 规则 用 以 确定 <sczript> 元 素 中 的 哪些 内 容 可 以 被 解析 ， 但 这 些 特殊 的 规则 
在 XHTML 中 不 适用 。 这 里 比较 语句 a < b 中 的 小 于 号 (<) 在 XHTML 中 将 被 当 作 开始 一 个 新 标签 来 
解析 。 但 是 作为 标签 来 讲 ， 小 于 号 后 面 不 能 跟 空格 ， 因 此 就 会 导致 语法 错误 。 

















GD HTMLS5 正 快速 地 被 前 端 开发 人 员 采 用 ， 建 议 读者 在 学 习 和 开发 中 遵循 HIML5 标准 ， 本 节 内 容 可 以 跳 过 。 
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避免 在 XHTML 中 出 现 类 似 语法 错误 的 方法 有 两 个 。 一 是 用 相应 的 HTML 实体 ( &1t; ) 替换 代码 
中 所 有 的 小 于 号 (< )， 替 换 后 的 代码 类 似 如 下 所 示 : 


<script type="text/javascript"> 
function compare(a, b) { 
if (a &lt; b) { 
alert ("A is less than B"); 
} else if (a > b) { 
alert("A is greater than B"); 
} else { 
alert("A is equal to B"); 
} 
} 


</script> 


虽然 这 样 可 以 让 代码 在 XHTML 中 正常 运行 , 但 却 导 致 代码 不 好 理解 了 。 为 此 ,我 们 可 以 考虑 采用 
另 一 个 方法 。 

保证 让 相同 代码 在 XHTML 中 正常 运行 的 第 二 个 方法 ， 就 是 用 一 个 CData 片段 来 包含 JavaScript 代 
人 码 。 在 XHTML (XML ) 中 ，CData 片段 是 文档 中 的 一 个 特殊 区 域 ， 这 个 区 域 中 可 以 包含 不 需要 解析 的 
任意 格式 的 文本 内 容 。 因 此 , 在 CData 片段 中 就 可 以 使 用 任意 字符 小 于 号 当然 也 没有 问题 ， 而 且 不 
会 导致 语法 错误 。 引 入 CData 片段 后 的 JavaScript 代码 块 如 下 所 示 : 


<script type="text/javascript"><! [CDATATI 
function compare(a, b) { 
if (a < b) { 
alert('"A is less than B"); 
} else if (a > b) { 
alert("A is greater than B"); 
} else { 
alert("A is equal to B"); 
































} 
} 


]]></script> 


在 兼容 XHTML 的 浏览 占 中 , 这 个 方法 可 以 解决 问题 但 实际 上 , 还 有 不 少 浏览 器 不 兼容 XHTML， 
而 不 支持 CData 片段 。 怎 么 办 呢 ? 再 使 用 JavaScript 注释 将 CData 标记 注释 掉 就 可 以 了 : 


<script type="text/javascript"> 
//<! [CDATATI 
function compare(a, b) { 
计生 (全 之 BB) 所 
alert('"A is less than B"); 
} else if (a > b) { 
alert("A is greater than B"); 
} else { 
alert("A is equal to B"); 






































} 
} 
/1/1]> 
</HCriDtS 
这 种 格式 在 所 有 现代 浏览 器 中 都 可 以 正常 使 用 。 虽 然 有 几 分 hack 的 味道 ， 但 它 能 通过 XHTML 验 
证 ， 而 且 对 XHTML 之 前 的 浏览 器 也 会 平稳 退化 。 
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在 将 页 面 的 MIME 类 型 指定 为 "application/xhtml+xml" 的 情况 下 会 触发 


XHTML 模式 。 并 不 是 所 有 浏览 器 都 支持 以 这 种 方式 提供 XHTML 文档 。 





2.1.5 不 推荐 使 用 的 语法 


在 最 早 引 入 <script> 元 素 的 时 候 ， 该 元 素 与 传统 HTML 的 解析 规则 是 有 冲突 的 。 由 于 要 对 这 个 元 
素 应 用 特殊 的 解析 规则 , 因此 在 那些 不 支持 JavaScript 的 浏览 器 ( 最 典型 的 是 Mosaic ) 中 就 会 导致 问题 。 
具体 来 说 , 不 支持 JavaScript 的 浏览 絮 会 把 <script> 元 素 的 内 容 直 接 输 出 到 页 面 中 , 因而 会 破坏 页 面 的 
布局 和 外 观 。 

Netscape 与 Mosaic 协商 并 提出 了 一 个 解决 方案 ,让 不 支持 <script> 元 素 的 浏览 器 能 够 隐藏 租 入 的 
JavaScript 代码 。 这 个 方案 就 是 把 JavaScript 代码 包含 在 一 个 HTML 注释 中 , 像 下 面 这 样 : 



































<script><!-- 
function sayHi(){ 
alert ("Hi!"); 
} 
//--></script> 
给 脚本 加 上 HTML 注释 后 ，Mosaic 等 浏览 器 就 会 忽略 <script> 标 签 中 的 内 容 ; 而 那些 支持 
JavaScript 的 浏览 器 在 遇 到 这 种 情况 时 ， 则 必须 进一步 确认 其 中 是 否 包 含 需要 解析 的 JavaScript 代码 。 
虽然 这 种 注释 JavaScript 代码 的 格式 得 到 了 所 有 浏览 右 的 认可 ， 也 能 被 正确 解释 ,但 由 于 所 有 浏览 
器 都 已 经 支持 JavaScript， 因 此 也 就 没有 必要 再 使 用 这 种 格式 了 。 在 XHTML 模式 下 ， 因 为 脚本 包含 在 
XML 注释 中 ， 所 以 脚本 会 被 忽略 。 


2.2 骨 入 代码 与 外 部 文件 


在 HTML 中 髋 入 JavaScript 代码 虽然 没有 问题 , 但 一 般 认 为 最 好 的 做 法 还 是 尽 可 能 使 用 外 部 文件 来 
包含 JavaScript 代码 。 不 过 ， 并 不 存在 必须 使 用 外 部 文件 的 硬性 规定 ， 但 支持 使 用 外 部 文件 的 人 多 会 强 
调 如 下 优点 。 

口 可 维护 性 : 遍及 不 同 HTML 页 面 的 JavaScript 会 造成 维护 问题 。 但 把 所 有 JavaScript 文件 都 放 在 

一 个 文件 夹 中 , 维护 起 来 就 轻松 多 了 。 而 且 开 发 人 员 因 此 也 能 够 在 不 触及 HTML 标记 的 情况 下 ， 
集中 精力 编辑 JavaScript 代码 。 

口 可 缓存 : 浏览 器 能 够 根据 具体 的 设置 缓存 链接 的 所 有 外 部 JavaScript 文 件 。 也 就 是 说 ， 如 果 有 两 个 

页 面 都 使 用 同一 个 文件 ， 那 么 这 个 文件 只 需 下 载 一 次 。 因 此 ， 最 终结 果 就 是 能 够 加 快 页 面 加 载 的 
速度 。 

口 适应 未 来 : 通过 外 部 文件 来 包含 JavaScript 无 须 使 用 前 面 提 到 XHTML 或 注释 hack。HTML 和 

XHTML 包含 外 部 文件 的 语法 是 相同 的 。 


2.3 ”文档 模式 


IE5.5 引入 了 文档 模式 的 概念 ， 而 这 个 概念 是 通过 使 用 文档 类 型 ( doctype ) 切换 实现 的 。 最 初 的 两 
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种 文档 模式 是 : 混杂 模式 (quirks mode ) “和 标准 模式 ( standards mode )。 混 杂 模 式 会 让 IE 的 行为 与 ( 包 
含 非 标准 特性 的 ) IE5 相同 ， 而 标准 模式 则 让 IE 的 行为 更 接近 标准 行为 。 虽 然 这 两 种 模式 主要 影响 CSS 
内 容 的 呈现 ， 但 在 某 些 情况 下 也 会 影响 到 JavaScript 的 解释 执行 。 本 书 将 在 必要 时 再 讨论 这 些 因 文 档 模 
式 而 影响 JavaScript 执行 的 情况 。 

在 IE 引入 文档 模式 的 概念 后 ， 其 他 浏览 器 也 纷纷 效仿 。 在 此 之 后 ，IE 又 提出 一 种 所 谓 的 准 标准 模 
式 (almost standards mode )。 这 种 模式 下 的 浏览 器 特性 有 很 多 都 是 符合 标准 的 ， 但 也 不 尽 然 。 不 标准 的 
地 方 主 要 体现 在 处 理 图 片 间隙 的 时 候 ( 在 表格 中 使 用 图 片 时 间 题 最 明显 )。 

如 果 在 文档 开始 处 没有 发 现 文档 类 型 声明 , 则 所 有 浏览 器 都 会 默认 开启 混杂 模式 。 但 采用 混杂 模式 
不 是 什么 值得 推荐 的 做 法 ， 因 为 不 同 浏览 器 在 这 种 模式 下 的 行为 差异 非常 大 ， 如 果 不 使 用 某 些 hack 技 
术 ， 跨 浏览 器 的 行为 根本 就 没有 一 致 性 可 言 。 

对 于 标准 模式 ， 可 以 通过 使 用 下 面 任何 一 种 文档 类 型 来 开启 : 

<!-- HTML 4.01 严格 型 --> 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 







































































<!-- XHTML 1.0 严格 型 --> 

<1DOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 








一 一 RTM 5 一 -> 
<!DOCTYPE html> 


而 对 于 准 标准 模式 , 则 可 以 通过 使 用 过 渡 型 ( transitional ) 或 框架 集 型 ( frameset ) 文档 类 型 来 触发 ， 
如 下 所 示 : 


<!-- HTML 4.01 过 渡 型 --> 

<!IDOCTYPE HTML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0rg/TR/html4/loose.dtd"> 

















<!-- HTML 4.01 框架 集 型 --> 

<1IDOCTYPE HTML PUBLLC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.o0rg/TR/html4/frameset.dtd"> 








<!-- XHTML 1.0 过 渡 型 --> 

<!IDOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 








<!-- XHTML 1.0 框架 集 型 --> 

<!IDOCTYPE html]l PUBLIC 

"-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-frameset.dtd"> 


准 标准 模式 与 标准 模式 非常 接近 ， 它 们 的 差异 几乎 可 以 忽略 不 计 。 因 此 ， 当 有 人 提 到 “标准 模式 ” 
时 ， 有 可 能 是 指 这 两 种 模式 中 的 任何 一 种 。 而 且 ， 检 测 文档 模式 〈 本 书后 面 将 会 讨论 ) 时 也 不 会 发 现 什 
么 不 同 。 本 书后 面 提 到 标准 模式 时 ， 指 的 是 除 混杂 模式 之 外 的 其 他 模式 。 















































中 这 











且 quirks mode 的 译 法 源 自 Firefox 3.5.5 中 文 版 。 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





18 第 2 章 在 HIML 中 使 用 JavaScript 





2.4 <noscript> 元 素 


早期 浏览 器 都 面临 一 个 特殊 的 问题 ， 即 当 浏 览 器 不 支持 JavaScript 时 如 何 让 页 面 平稳 地 退化 。 对 这 
个 问题 的 最 终 解 决 方案 就 是 创造 一 个 <noscript> 元 素 ， 用 以 在 不 支持 JavaScript 的 浏览 器 中 显示 替代 
的 内 容 。 这 个 元 素 可 以 包含 能 够 出 现在 文档 <body> 中 的 任何 HTML 元 素 一 一 <script> 元 素 除 外 。 包含 
在 <noscript> 元 素 中 的 内 容 只 有 在 下 列 情况 下 才 会 显示 出 来 : 

口 浏览 器 不 支持 脚本 ; 
口 浏览 器 支持 脚本 ， 但 脚本 被 禁用 。 

符合 上 述 任何 一 个 条 件 ， 浏 览 器 都 会 显示 <noscript> 中 的 内 容 。 而 在 除 此 之 外 的 其 他 情况 下 ， 浏 
览 器 不 会 呈现 <noscript> 中 的 内 容 。 

请 看 下 面 这 个 简单 的 例子 : 

<html> 

<head> 

<title>Example HTML Page</title> 

<script type="text/javascript" defer="defer" src="examplel.js"></script> 

<script type="text/javascript" defer="defer" src="example2.js"></script> 
</head> 
<body> 

<noscript> 

<p> 本 页 面 需要 浏览 器 支持 (启用 ) JavaScript。 
</noscript> 


</body> 
</html> 


这 个 页 面 会 在 脚本 无 效 的 情况 下 向 用 户 显 示 一 条 消息 。 而 在 启用 了 脚本 的 浏览 器 中 ,用 户 永远 也 不 
会 看 到 它 一 一 尽管 它 是 页 面 的 一 部 分 。 




























































































2.5 小结 


把 JavaScript 插入 到 HTML 页 面 中 要 使 用 <script> 元 素 。 使 用 这 个 元 素 可 以 把 JavaScript 相 入 到 
HTML 页 面 中 ,让 脚本 与 标记 混合 在 一 起 ; 也 可 以 包含 外 部 的 JavaScript 文件 。 而 我 们 需要 注意 的 地 方 有 : 
口 在 包含 外 部 JavaScript 文件 时 ， 必 须 将 src 属性 设置 为 指向 相应 文件 的 URL。 而 这 个 文件 既 可 
以 是 与 包含 它 的 页 面 位 于 同一 个 服务 器 上 的 文件 ， 也 可 以 是 其 他 任何 域 中 的 文件 。 
口 所 有 <script> 元 素 都 会 按照 它们 在 页 面 中 出 现 的 先后 顺序 依次 被 解析 。 在 不 使 用 defer 和 

async 属性 的 情况 下 ， 只 有 在 解析 完 前 面 <script> 元 素 中 的 代码 之 后 ， 才 会 开始 解析 后 面 
<script> 元 素 中 的 代码 。 
口 由 于 浏览 器 会 先 解析 完 不 使 用 defer 属性 的 <script> 元 素 中 的 代码 ,然后 再 解析 后 面 的 内 容 ， 
所 以 一 般 应 该 把 <script> 元 素 放 在 页 面 最 后 ， 即 主要 内 容 后 面 ，</body> 标 签 前 面 。 
口 使 用 defer 属性 可 以 让 脚本 在 文档 完全 呈现 之 后 再 执行 .延迟 脚本 总 是 按照 指定 它们 的 顺序 执行 。 
口 使 用 async 属性 可 以 表示 当前 脚本 不 必 等 竺 其 他 脚本 ， 也 不 必 阻 塞 文档 呈现 。 不 能 保证 异步 脚 
本 按照 它们 在 页 面 中 出 现 的 顺序 执行 。 

另外 ， 使 用 <noscript> 元 素 可 以 指定 在 不 支持 脚本 的 浏览 器 中 显示 的 替代 内 容 。 但 在 启用 了 脚本 

的 情况 下 ， 浏 览 絮 不 会 显示 <noscript> 元 素 中 的 任何 内 容 。 









































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


第 本章 
基本 概念 


本 章 内 容 
口 语法 
口 数据 类 型 
口 流 控 制 语句 
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人 何 语言 的 核心 都 必然 会 描述 这 门 语 言 最 基本 的 工作 原理 。 而 描述 的 内 容 通常 都 要 涉及 这 门 语 
言 的 语法 、 操 作 符 、 数 据 类 型 、 内 置 功能 等 用 于 构建 复杂 解决 方案 的 基本 概念 。 如 前 所 述 ， 

ECMA-262 通过 叫做 ECMAScript 的 “ 伪 语言 ”为 我 们 描述 了 JavaScript 的 所 有 这 些 基本 概念 。 

目前 ，ECMA-262 第 3 版 中 定义 的 ECMAScript 是 各 浏览 器 实现 最 多 的 一 个 版 本 。ECMA-262 第 5 

版 是 浏览 器 接 下 来 实现 的 版 本 ,但 截止 到 2011 年 底 ， 还 没有 浏览 器 完全 实现 了 这 个 版 本 。 为 此 ， 本 章 

将 主要 按照 第 3 版 定义 的 ECMAScript 介 绍 这 门 语言 的 基本 概念 ， 并 就 第 $ 版 的 变化 给 出 说 明 。 


3.1 语法 


ECMAScript 的 语法 大 量 借鉴 了 C 及 其 他 类 C 语言 (如 Java 和 Perl ) 的 语法 。 因 此 ， 熟 悉 这些 语 言 
的 开发 人 员 在 接受 ECMAScript 更 加 宽松 的 语法 时 ， 一 定 会 有 一 种 轻松 自在 的 感觉 。 


3.1.1 区 分 大 小 写 


要 理解 的 第 一 个 概念 就 是 ECMAScript 中 的 一 切 ( 变量 、 函 数 名 和 操作 符 ) 都 区 分 大 小 写 。 这 也 就 
意味 着 ， 变 量 名 test 和 变量 名 Test 分 别 表示 两 个 不 同 的 变量 ， 而 函数 名 不 能 使 用 typeof ， 因 为 它 
是 一 个 关键 字 (3.2 节 介 绍 关键 字 ), 但 typeof 则 完全 可 以 是 一 个 有 效 的 函数 名 。 












































3.1.2 ”标识 符 


所 谓 标识 符 ， 就 是 指 变量 、 函 数 、 属 性 的 名 字 ， 或 者 函数 的 参数 。 标 识 符 可 以 是 按照 下 列 格 式 规则 
组 合 起 来 的 一 或 多 个 字符 : 
口 第 一 个 字符 必须 是 一 个 字母 、 下 划 线 (_ ) 或 一 个 美元 符号 ($ ); 
口 其 他 字符 可 以 是 字母 、 下 划 线 、 美 元 符号 或 数字 。 
标识 符 中 的 字母 也 可 以 包含 扩展 的 ASCII[ 或 Unicode 字母 字符 ( 如 入 和 契 )， 但 我 们 不 推荐 这 样 做 。 
按照 惯例 ，ECMAScript 标识 符 采 用 驼峰 大 小 写 格式 ， 也 就 是 第 一 个 字母 小 写 ， 剩 下 的 每 个 单词 的 
首 字母 大 写 ， 例 如 : 
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(2 





firstSecond 
myCar 
doSsomethingImportant 


虽然 没有 谁 强制 要 求 必须 采用 这 种 格式 ， 但 为 了 与 ECMAScript 内 置 的 函数 和 对 象 命名 格式 保持 一 
致 ， 可 以 将 其 当 作 一 种 最 佳 实践 。 
















不 能 把 关键 字 、 保 留 字 、true、false 和 null 用 作 标 识 符 。3.2 节 将 介绍 更 多 相 
关内 容 。 





3.1.3 ”注释 
ECMAScript 使 用 C 风格 的 注释 , 包括 单行 注释 和 块 级 注释 。 单 行 注释 以 两 个 和 斜 本 开头 ， 如 下 所 示 : 
// 单行 注释 
块 级 注释 以 一 个 斜 杠 和 一 个 星 号 ( /* ) 开头 ， 以 一 个 星 号 和 一 个 斜 杠 ( */ ) 结尾 ， 如 下 所 示 : 











* 这 是 一 个 多 行 
* ”( 块 级 ) 注释 


虽然 上 面 注释 中 的 第 二 和 第 三 行 都 以 一 个 星 号 开头 , 但 这 不 是 必需 的 。 之 所 以 添加 那 两 个 星 号 , 纯 
粹 是 为 了 提高 注释 的 可 读 性 ( 这 种 格式 在 企业 级 应 用 中 用 得 比较 多 )。 


3.1.4 严格 模式 


ECMAScript 5 引入 了 严格 模式 ( strict mode ) 的 概念 。 严 格 模式 是 为 JavaScript 定义 了 一 种 不 同 的 
解析 与 执行 模型 。 在 严格 模式 下 , ECMAScript3 中 的 一 些 不 确定 的 行为 将 得 到 处 理 ， 而 且 对 某 些 不 安全 
的 操作 也 会 抛 出 错误 。 要 在 整个 脚本 中 启用 严格 模式 ， 可 以 在 顶部 添加 如 下 代码 : 

"use strict"; 

这 行 代 码 看 起 来 像 是 字符 串 ， 而 且 也 没有 赋值 给 任何 变量 ， 但 其 实 它 是 一 个 编译 指示 ( pragma )， 
用 于 告诉 支持 的 JavaScript 引擎 切换 到 严格 模式 。 这 是 为 不 破坏 ECMAScript 3 语法 而 特意 选 定 的 语法 。 

在 函数 内 部 的 上 方 包含 这 条 编译 指示 ， 也 可 以 指定 函数 在 严格 模式 下 执行 : 












































function doSomething(){ 
"UsSe Strict"s 
// 函 数 体 
} 
严格 模式 下 ，JavaScript 的 执行 结果 会 有 很 大 不 同 ， 因 此 本 书 将 会 随时 指出 严格 模式 下 的 区 别 。 支 
持 严 格 模 式 的 浏览 器 包括 IE10+、Firefox 4+ 、Safari 5.1+、Opera 12+ 和 Chrome。 





3.1.5 ”语句 
ECMAScript 中 的 语句 以 一 个 分 号 结尾 ; 如 果 省 略 分 号 , 则 由 解析 需 确 定语 名 的 结尾 , 如 下 例 所 示 : 
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var sum =a+b // 即使 没有 分 号 也 是 有 效 的 语句 
var diff =a - b; // 有 效 的 语句 一 一 推荐 
虽然 语句 结尾 的 分 号 不 是 必需 的 , 但 我 们 建议 任何 时 候 都 不 要 省 略 它 。 因 为 加 上 这 个 分 号 可 以 避免 
很 多 错误 ( 例如 不 完整 的 输入 ), 开 发 人 员 也 可 以 放心 地 通过 删除 多 余 的 空格 来 压缩 ECMAScript 代码 ( 代 
码 行 结尾 处 没有 分 号 会 导致 压缩 错误 )。 另 外 ， 加 上 分 号 也 会 在 某 些 情况 下 增进 代码 的 性 能 ， 因 为 这 样 
解析 器 就 不 必 再 花 时 间 推 测 应 该 在 哪里 插入 分 号 了 。 

可 以 使 用 C 风格 的 语法 把 多 条 语句 组 合 到 一 个 代码 块 中 ， 即 代码 块 以 左 花 括号 ( { ) 开头 ， 以 右 花 
括号 (} ) 结 

if (test){ 


test = false; 
alert (test); 


不 推荐 



































} 


虽然 条 件 控制 语句 ( 如 if 语句 ) 只 在 执行 多 条 语句 的 情况 下 才 要 求 使 用 代码 块 ， 但 最 佳 实践 是 始 
终 在 控制 语句 中 使 用 代码 块 一 一 即使 代码 块 中 只 有 一 条 语句 ， 例 如 : 











if (test) 
alert (test); // 有 效 但 容易 出 错 ， 不 要 使 用 
if (test){ // 推荐 使 用 


alert (test); 
} 


在 控制 语句 中 使 用 代码 块 可 以 让 编码 意图 更 加 清晰 ， 而 且 也 能 降低 修改 代码 时 出 错 的 几率 。 
3.2 关键 字 和 保留 字 


ECMA-262 描述 了 一 组 具有 特定 用 途 的 关键 字 , 这 些 关 键 字 可 用 于 表示 控制 语句 的 开始 或 结束 ,或 
者 用 于 执行 特定 操作 等 。 按 照 规则 ， 关 键 字 也 是 语言 保留 的 ， 不 能 用 作 标 识 符 。 以 下 就 是 ECMAScript 
的 全 部 关键 字 ( 带 * 号 上 标的 是 第 5 版 新 增 的 关键 字 ): 






























































break do instanceof typeof 
case else new var 
catch finally return void 
continue for switch while 
debugger* function this with 
default 尘 生 throw 

delete in try 





ECMA-262 还 描述 了 另外 一 组 不 能 用 作 标 识 符 的 保留 字 。 尽管 保留 字 在 这 门 语言 中 还 没有 任何 特定 
的 用 途 ， 但 它们 有 可 能 在 将 来 被 用 作 关 键 字 。 以 下 是 ECMA-262 第 3 版 定义 的 全 部 保留 字 : 


abstract enum a short 
boolean export interface static 

byte extends long super 

char final native synchronized 
class float package throws 

const goto private transient 
debugger implements protected volatile 
double import BuDLiG 
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第 5 版 把 在 非 严格 模式 下 运行 时 的 保留 字 缩减 为 下 列 这 些 : 





class enum extends super 
Sonst export import 

在 严格 模式 下 ， 第 5 版 还 对 以 下 保留 字 施 加 了 限制 : 
implements package pe 

interface private static 

let protected yield 


注意 ，let 和 yiela 是 第 5 版 新 增 的 保留 字 ; 其 他 保留 字 都 是 第 3 版 定义 的 。 为 了 最 大 程度 地 保 
证 兼容 性 ， 建 议 读者 将 第 3 版 定义 的 保留 字 外 加 let 和 yield 作为 编程 时 的 参考 。 

在 实现 ECMAScript3 的 JavaScript 引擎 中 使 用 关键 字 作 标识 符 , 会 导致 “Identifier Expected” 错 误 。 
而 使 用 保留 字 作 标识 符 可 能 会 也 可 能 不 会 导致 相同 的 错误 ， 具 体 取 决 于 特定 的 引擎 。 

第 5 版 对 使 用 关键 字 和 保留 字 的 规则 进行 了 少许 修改 。 关 键 字 和 保留 字 虽 然 仍 然 不 能 作为 标识 符 使 
用 ,但 现在 可 以 用 作对 象 的 属性 名 。 一 般 来 说 ， 最 好 都 不 要 使 用 关键 字 和 保留 字 作 为 标识 符 和 属性 名 ， 
以 便 与 将 来 的 ECMAScript 版 本 兼容 。 

除了 上 面 列 出 的 保留 字 和 关键 字 ，ECMA-262 第 5 版 对 eval 和 arguments 还 施加 了 限制 。 
格 模式 下 ， 这 两 个 名 字 也 不 能 作为 标识 符 或 属性 名 ， 否 则 会 抛 出 错误 。 


3.3 变量 


ECMAScript 的 变量 是 松散 类 型 的 ， 所 谓 松散 类 型 就 是 可 以 用 来 保存 任何 类 型 的 数据 。 换 句 话说 ， 
每 个 变量 仅仅 是 一 个 用 于 保存 值 的 占 位 符 而 已 。 定 义 变量 时 要 使 用 var 操作 符 ( 注意 var 是 一 个 关键 
字 )， 后 跟 变 量 名 〈 即 一 个 标识 符 )， 如 下 所 示 : 

Var message; 

这 行 代码 定义 了 一 个 名 为 message 的 变量 ， 该 变量 可 以 用 来 保存 任何 值 ( 像 这 样 未 经 过 初始 化 的 
变量 ,会 保存 一 个 特殊 的 值 一 undefined， 相 关内 容 将 在 3.4 节 讨论 )。ECMAScript 也 支持 直接 初始 
化 变量 ， 因 此 在 定义 变量 的 同时 就 可 以 设置 变量 的 值 ， 如 下 所 示 : 

Var message = "hi",; 

在 此 , 变量 message 中 保存 了 一 个 字符 串 值 "hi"。 像 这 样 初始 化 变量 并 不 会 把 它 标记 为 字符 串 类 型 ; 
初始 化 的 过 程 就 是 给 变量 赋 一 个 值 那么 简单 。 因 此 ， 可 以 在 修改 变量 值 的 同时 修改 值 的 类 型 ， 如 下 所 示 : 

Var message = "hi",; 

message = 100; // 有 效 ， 但 不 推荐 

在 这 个 例子 中 ， 变 量 message 一 开始 保存 了 一 个 字符 串 值 "hi" ， 然 后 该 值 又 被 一 个 数字 值 100 取 
代 。 虽 然 我 们 不 建议 修改 变量 所 保存 值 的 类 型 ， 但 这 种 操作 在 ECMAScript 中 完全 有 效 。 

有 一 点 必须 注意 , 即 用 var 操作 符 定义 的 变量 将 成 为 定义 该 变量 的 作用 域 中 的 局 部 变量 ,也 就 是 说 ， 
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如 果 在 函数 中 使 用 var 定义 一 个 变量 ， 那 么 这 个 变量 在 函数 退出 后 就 会 被 销毁 ， 例 如 : 
function test(){ 
var message = "hi"; // 局 部 变量 
} 
test(); 


alert (message); // 错误 | 
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这 里 , 变量 message 是 在 函数 中 使 用 var 定义 的 。 当 函数 被 调用 时 , 就 会 创建 该 变量 并 为 其 赋值 。 
而 在 此 之 后 ， 这 个 变量 又 会 立即 被 销毁 ， 因 此 例子 中 的 下 一 行 代码 就 会 导致 错误 。 不 过 ， 可 以 像 下 面 这 
样 省 略 var 操作 符 ， 从 而 创建 一 个 全 局 变量 


function test(){ 
message = "hi"; // 全 局 变量 





} 
test () ; 
alert (message); // "hi" 


这 个 例子 省 略 了 var 操作 符 ， 因 而 message 就 成 了 全 局 变量 。 这 样 ， 只 要 调用 过 一 次 test 1() 函 
数 ， 这 个 变量 就 有 了 定义 ， 就 可 以 在 函数 外 部 的 任何 地 方 被 访问 到 。 















虽然 省 略 var 操作 符 可 以 定义 全 局 变量 , 但 这 也 不 是 我 们 推荐 的 做 法 。 因 为 在 局 
部 作用 域 中 定义 的 全 局 变量 很 难 维护 , 而 且 如 果 有 意 地 忽略 了 var 操作 符 , 也 会 由 于 
相应 变量 不 会 马上 就 有 定义 而 导致 不 必要 的 混乱 。 给 未 经 声明 的 变量 赋值 在 严格 模式 
下 会 导致 抛 出 ReferenceError 错误 。 










可 以 使 用 一 条 语句 定义 多 个 变量 ， 只 要 像 下 面 这 样 把 每 个 变量 ( 初始 化 或 不 初始 化 均 可 ) 用 逗号 分 
隔 开 即 可 : 








var message = "hi", 
found = false, 
age = 29; 








这 个 例子 定义 并 初始 化 了 3 个 变量 。 同 样 由 于 ECMAScript 是 松散 类 型 的 ， 因 而 使 用 不 同类 型 初始 
化 变量 的 操作 可 以 放 在 一 条 语句 中 来 完成 。 虽 然 代 码 里 的 换行 和 变量 缩 进 不 是 必需 的 , 但 这 样 做 可 以 提 
高 可 读 性 。 

在 严格 模式 下 ， 不 能 定义 名 为 eval 或 arguments 的 变量 ， 否 则 会 导致 语法 错误 。 


3.4 数据 类 型 


ECMAScript 中 有 5 种 简单 数据 类 型 ( 也 称 为 基本 数据 类 型 ) Undefined\、Nul1、Boolean、Number 
和 String 还 有 1 种 复杂 数据 类 型 一 object,object 本 质 上 是 由 一 组 无 序 的 名 值 对 组 成 的 .ECMAScript 
不 支持 任何 创建 自 定义 类 型 的 机 制 ， 而 所 有 值 最 终 都 将 是 上 述 6 种 数据 类 型 之 一 。 乍 一 看 ， 好 像 只 有 6 
种 数据 类 型 不 足以 表示 所 有 数据 ; 但 是 ， 由 于 ECMAScript 数 据 类 型 具有 动态 性 ， 因 此 的 确 没 有 再 定义 
其 他 数据 类 型 的 必要 了 。 



































3.4.1 _ typeof 操作 符 
鉴于 ECMAScript 是 松散 类 型 的 ， 因 此 需要 有 一 种 手段 来 检测 给 定 变量 的 数据 类 型 一 一 typeof 就 
回 下 















































是 负责 提供 这 方面 信息 的 操作 符 。 对 一 个 值 使 用 typeof 操作 符 可 能 返回 下 列 某 个 字符 串 : 
口 "undefined" 一 一 如 果 这 个 值 未 定义 ; 
口 "boolean" 一 一 如 果 这 个 值 是 布尔 值 ; 
口 "string" 一 一 如 果 这 个 值 是 字符 串 ; 
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口 "number "一 一 如 果 这 个 值 是 数值 ; 
口 "object" 如 果 这 个 值 是 对 象 或 nul1; 








口 "function" 一 一 如 果 这 个 值 是 函数 。 

下 面 是 几 个 使 用 typeof 操作 符 的 例子 : 
Var message = "some string"; 

alert (typeof message); 人 
alert (typeof (message) ) ; // string" 
alert (typeof 95); // "number" 


DypeofExample01.htm 


这 几 个 例子 说 明 ，typeof 操作 符 的 操作 数 可 以 是 变量 (message )， 也 可 以 是 数值 字面 量 。 注 意 ， 
typeof 是 一 个 操作 符 而 不 是 函数 ， 因 此 例子 中 的 圆 括号 尽管 可 以 使 用 ， 但 不 是 必需 的 。 

有 些 时 候 ，typeof 操作 符 会 返回 一 些 令 人 迷惑 但 技术 上 却 正确 的 值 。 比 如 ， 调 用 typeof null 
会 返回 "object"， 因 为 特殊 值 null 被 认为 是 一 个 空 的 对 象 引 用 。Safari5 及 之 前 版 本 、Chrome7 及 之 
前 版 本 在 对 正则 表达 式 调用 typeof 操作 符 时 会 返回 "function"， 而 其 他 浏览 器 在 这 种 情况 下 会 返回 


"object"。 




















从 技术 角度 讲 ， 函 数 在 ECMAScript 中 是 对 象 ， 不 是 一 种 数据 类 型 。 然 而 ， 函 数 也 


确实 有 一 些 特 殊 的 属性 ， 因 此 通过 typeof 操作 符 来 区 分 函数 和 其 他 对 象 是 有 必要 的 。 





3.4.2 ”Undefined 类 型 


Undefined 类 型 只 有 一 个 值 , 即 特殊 的 undaefinede 在 使 用 vaz 声明 变量 但 未 对 其 加 以 初始 化 时 ， 
这 个 变量 的 值 就 是 undefined, 例如 : 





var message; 
alert (message == undefined); //true 


UndefinedExample01.htm 
这 个 例子 只 声明 了 变量 message, 但 未 对 其 进行 初始 化 。 比 较 这 个 变量 与 undefined 字面 量 , 结 
果 表 明 它 们 是 相等 的 。 这 个 例子 与 下 面 的 例子 是 等 价 的 : 


var message = undefined; 
alert (message == undefined); //true 








UndefinedExample02.htm 


这 个 例子 使 用 undefined 值 显 式 初始 化 了 变量 message。 但 我 们 没有 必要 这 么 做 ， 因 为 未 经 初始 
化 的 值 默 认 就 会 取得 undefined 值 。 























一 般 而 言 ， 不 存在 需要 显 式 地 把 一 个 变量 设置 为 undefined 值 的 情况 。 字 面值 
undefined 的 主要 目的 是 用 于 比较 ,而 ECMA-262 第 3 版 之 前 的 版 本 中 并 没有 规定 
这 个 值 。 第 3 版 引入 这 个 值 是 为 了 正式 区 分 空 对 象 指针 与 未 经 初始 化 的 变量 。 
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不 过 ,包含 undqefined 值 的 变量 与 尚未 定义 的 变量 还 是 不 一 样 的 。 看 看 下 面 这 个 例子 : 
Var message; // 这 个 变量 声明 之 后 默认 取得 了 undefined 值 


// 下 面 这 个 变量 并 没有 声明 
// var age 


alert (message); // "undefined" 
alert (age); // 产生 错误 





UndefinedExample03.htm 


运行 以 上 代码 ， 第 一 个 警告 框 会 显示 变量 message 的 值 ， 即 "undefined"。 而 第 二 个 警告 框 一 一 
由 于 传递 给 alert () 函数 的 是 尚未 声明 的 变量 age 一 一 则 会 导致 一 个 错误 。 对 于 尚未 声明 过 的 变量 ,只 
能 执行 一 项 操作 ， 即 使 用 typeof 操作 符 检测 其 数据 类 型 ( 对 未 经 声明 的 变量 调用 aelete 不 会 导致 错 
误 ， 但 这 样 做 没什么 实际 意义 ， 而 且 在 严格 模式 下 确实 会 导致 错误 )。 

然而 ， 令 人 困惑 的 是 : 对 未 初始 化 的 变量 执行 typeof 操作 符 会 返回 undefined 值 ， 而 对 未 声明 
的 变量 执行 typeof 操作 符 同 样 也 会 返回 undefined 值 。 来 看 下 面 的 例子 : 


(Oy Var message; // 这 个 变量 声明 之 后 默认 取得 了 undefined 值 






































// 下 面 这 个 变量 并 没有 声明 
// var age 


alert (typeof message); // "undefined" 
alert (typeof age); // "undefined" 


UndefinedExample04.htm 
结果 表明 ， 对 未 初始 化 和 未 声明 的 变量 执行 typeof 操作 符 都 返回 了 undefinegd 值 ; 这 个 结果 有 


其 逻辑 上 的 合理 性 。 因 为 虽然 这 两 种 变量 从 技术 角度 看 有 本 质 区 别 , 但 实际 上 无 论 对 哪 种 变量 也 不 可 能 
执行 真正 的 操作 。 








即便 未 初始 化 的 变量 会 自动 被 赋予 undefined 值 ， 但 显 式 地 初始 化 变量 依然 是 
明智 的 选择 。 如 果 能 够 做 到 这 一 点 ， 那 勾当 typeof 操作 符 返 回 "rundefined" 值 时 ， 
我 们 就 知道 被 检测 的 变量 还 没有 被 声明 ， 而 不 是 尚未 初始 化 。 







3.4.3 ”Nu1lL1 类 型 


Null 类 型 是 第 二 个 只 有 一 个 值 的 数据 类 型 ， 这 个 特殊 的 值 是 nul1。 从 逻辑 角度 来 看 ，nul1l 值 表 
示 一 个 空 对 象 指针 ， 而 这 也 正 是 使 用 typeof 操作 符 检测 null 值 时 会 返回 "object" 的 原因 ， 如 下 蚀 
的 例子 所 示 : 


Var Car mlLy 
alert (typeof car); /7 "OBJEeGt” 














NullExample01.htm 
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如 果 定 义 的 变量 准备 在 将 来 用 于 保存 对 象 ， 那么 最 好 将 该 变量 初始 化 为 null 而 不 是 其 他 值 。 这 样 
一 来 ， 只 要 直接 检查 null 值 就 可 以 知道 相应 的 变量 是 否 已 经 保存 了 一 个 对 象 的 引用 ， 如 下 面 的 例子 
所 示 : 


TE (car Te mL 


// 对 car 对 象 执行 某 些 操作 











} 
实际 上 , undefined 值 是 派生 自 null 值 的 , 因此 ECMA-262 规定 对 它们 的 相等 性 测试 要 返回 true: 








alert (null == undefined); //true 


NullExample02.htm 


这 里 , 位 于 null 和 undefined 之 间 的 相等 操作 符 ( == ) 总 是 返回 true, 不 过 要 注意 的 是 ， 这 个 
操作 符 出 于 比较 的 目的 会 转换 其 操作 数 ( 本 章 后 面 将 详细 介绍 相关 内 容 )。 

尽管 null 和 ungdefined 有 这 样 的 关系 ,但 它们 的 用 途 完全 不 同 。 如 前 所 述 ， 无 论 在 什么 情况 下 
都 没有 必要 把 一 个 变量 的 值 显 式 地 设置 为 undefined， 可 是 同样 的 规则 对 null 却 不 适用 。 换 句 话 说 ， 
只 要 意 在 保存 对 象 的 变量 还 没有 真正 保存 对 象 ， 就 应 该 明确 地 让 该 变量 保存 null 值 。 这 样 做 不 仅 可 以 
体现 nul1 作为 空 对 象 指针 的 惯例 ， 而 且 也 有 助 于 进一步 区 分 nu1ll 和 undefined。 


















































3.4.4 ”Boolean 类 型 


Boolean 类 型 是 ECMAScript 中 使 用 得 最 多 的 一 种 类 型 , 该 类 型 只 有 两 个 字面 值 : true 和 false。 
这 两 个 值 与 数字 值 不 是 一 回 事 ， 因 此 true 不 一 定 等 于 1， 而 false 也 不 一 定 等 于 0。 以 下 是 为 变量 赋 
Boolean 类 型 值 的 例子 : 

Var found = true; 

var lost = false; 


需要 注意 的 是 ,Boolean 类 型 的 字面 值 true 和 false 是 区 分 大 小 写 的 。 也 就 是 说 ,True 和 False 
(以 及 其 他 的 混合 大 小 写 形式 ) 都 不 是 Boolean 值 ， 只 是 标识 符 。 

虽然 Boolean 类 型 的 字面 值 只 有 两 个 但 ECMAScript 中 所 有 类 型 的 值 都 有 与 这 两 个 Boolean 值 
等 价 的 值 。 要 将 一 个 值 转换 为 其 对 应 的 Boolean 值 ， 可 以 调用 转型 函数 Boolean () ， 如 下 例 所 示 : 


Var message = "Hello world!"; 
var messageAsBoolean = Boolean (message); 









































BooleanExample01.htm 


在 这 个 例子 中 , 字符 串 message 被 转换 成 了 一 个 Boolean 值 , 该 值 被 保存 在 messageAsBoolean 
变量 中 。 可 以 对 任何 数据 类 型 的 值 调 用 Boolean () 函数 ， 而 且 总 会 返回 一 个 Boolean 值 。 至 于 返回 的 
这 个 值 是 true 还 是 false， 取决 于 要 转换 值 的 数据 类 型 及 其 实际 值 。 下 表 给 出 了 各 种 数据 类 型 及 其 对 
应 的 转换 规则 。 
































数据 类 型 转换 为 true 的 值 转换 为 false 的 值 
Boolean true false 
String 任何 非 空 字符 串 ""〈 空 字符 串 ) 
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( 续 ) 
数据 类 型 转换 为 true 的 值 转换 为 false 的 值 
Number 任何 非 零 数字 值 ( 包括 无 穷 大 ) 0 和 NaN ( 参见 本 章 后 面 有 关 NaN 的 内 容 ) 
Object 任何 对 象 null 
Undefined n/a" undefined 





这 些 转换 规则 对 理解 流 控 制 语句 (如 if 语句 ) 自动 执行 相应 的 Boolean 转换 非常 重要 , 请 看 下 面 


的 代码 : 





Var message = "Hello world!"; 
if (message)t{ 


alert(" 


} 


Value is true"); 
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运行 这 个 示例 ， 就 会 显示 一 个 警告 框 ， 因 为 字符 串 message 被 自动 转换 成 了 对 应 的 Boolean 值 


( true )。 由 于 存在 这 种 自动 执行 的 Boolean 转换 ， 因 此 确切 地 知道 在 流 控制 语句 中 使 用 的 是 什么 变量 












































至 关 重 要 。 错 误 地 使 用 一 个 对 象 而 不 是 一 个 Boolean 值 ， 就 有 可 能 彻底 改变 应 用 程序 的 流程 。 





3.4.5 “Number 类 型 


Number 类 型 应 该 是 ECMAScript 中 最 令 人 关注 的 数据 类 型 了 ， 这 种 类 型 使 用 IEEE754 格式 来 表示 
整数 和 浮 点 数值 ( 浮 点 数值 在 某 些 语言 中 也 被 称 为 双 精 度数 值 )。 为 支持 各 种 数值 类 型 ，ECMA-262 定 
义 了 不 同 的 数值 字面 量 格式 。 

最 基本 的 数值 字面 量 格式 是 十 进 制 整数 ， 十 进 制 整数 可 以 像 下 面 这 样 直接 在 代码 中 输入 : 


Var intNum 




















= 55; // 整数 


除了 以 十 进 制 表示 外 ， 整 数 还 可 以 通过 八进制 ( 以 8 为 基数 ) 或 十 六 进 制 ( 以 16 为 基数 ) 的 字面 值 
来 表示 。 其 中 ， 八 进 制 字面 值 的 第 一 位 必须 是 零 (0 )， 然 后 是 八进制 数字 序列 (0 ~ 7 )。 如 果 字 面值 中 的 





数值 超出 了 范围 ， 


Var octalNuml 
var octalNum2 
var octalNum3 








那么 前 导 零 将 被 忽略 ， 后面 的 数值 将 被 当 作 十 进 制 数值 解析 。 请 看 下 面 的 例子 : 


= 070; // 八进制 的 56 
= 079 // 无 效 的 八进制 数值 一 一 解析 为 79 
= 08; // 无 效 的 八进制 数值 一 一 解析 为 8 


八进制 字面 量 在 严格 模式 下 是 无 效 的 ， 会 导致 文 持 的 JavaScript 引擎 抛 出 错误 。 











十 六 进 制 字 外 











ij 值 的 前 两 位 必须 是 0x， 后 跟 任何 十 六 进 制 数 字 (0~9 及 A ~F)。 其中, 字母 A~F 





可 以 大 写 ， 也 可 以 小 写 。 如 下 面 的 例子 所 示 : 





Var hexNuml 
Var hexNum2 


OxA; // 十 六 进 制 的 10 
Ox1f; // 十 六 进 制 的 31 


在 进行 算术 计算 时 ， 所 有 以 八进制 和 十 六 进 制 表示 的 数值 最 终 都 将 被 转换 成 十 进 制 数值 。 





na (或 N/A)， 


是 not applicable 的 缩写 ， 意思 是 “不 适用 ”。 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 








鉴于 JavaScript 中 保存 数值 的 方式 ， 可 以 保存 正 堆 (+0 ) 和 负 零 (-0 ) 。 正 零 和 


负 零 被 认为 相等 ， 但 为 了 读者 更 好 地 理解 上 下 文 ， 这 里 特别 做 此 说 明 。 








1. 浮 点 数值 

所 谓 浮 点 数值 ， 就 是 该 数值 中 必须 包含 一 个 小 数 点 ， 并 且 小 数 点 后 面 必 须 至 少 有 一 位 数字 。 虽 然 小 
数 点 前 面 可 以 没有 整数 ， 但 我 们 不 推荐 这 种 写法 。 以 下 是 浮 点 数值 的 几 个 例子 : 

var floatNuml = 1.1; 

var floatNum2 = 0.1; 

var floatNum3 = .1; // 有效， 但 不 推荐 








由 于 保存 浮 点 数值 需要 的 内 存 空 间 是 保存 整数 值 的 两 倍 , 因 此 ECMAScript 会 不 失 时 机 地 将 浮 点 数值 
转换 为 整数 值 。 显 然 ， 如 果 小 数 点 后 面 没有 跟 任 何 数字 ， 那 么 这 个 数值 就 可 以 作为 整数 值 来 保存 。 同 样 
地 ， 如 果 浮 点 数值 本 身 表示 的 就 是 一 个 整数 (如 1.0 ), 那么 该 值 也 会 被 转换 为 整数 ， 如 下 面 的 例子 所 示 : 








var floatNuml = 1.; // 小 数 点 后 面 没 有 数字 一 一 解析 为 1 
var floatNum2 = 10.0; // 整数 解析 为 10 


对 于 那些 极 大 或 极 小 的 数值 ， 可 以 用 。 表示 法 ( 即 科学 计数 法 ) 表示 的 浮 点 数值 表示 。 用 。 表示 法 
表示 的 数值 等 于 e 前 面 的 数值 乘 以 10 的 指数 次 震 。ECMAScript 中 e 表示 法 的 格式 也 是 如 此 ， 即 前 面 是 
一 个 数值 ( 可 以 是 整数 也 可 以 是 浮 点 数 )， 中 间 是 一 个 大 写 或 小 写 的 字母 E， 后 面 是 10 的 索 中 的 指数 ， 
该 震 值 将 用 来 与 前 面 的 数 相 乘 。 下 面 是 一 个 使 用 e 表 示 法 表示 数值 的 例子 : 

var floatNum = 3.125e7; // 等 于 31250000 


在 这 个 例子 中 ,使 用 e 表 示 法 表示 的 变量 floatNunm 的 形式 虽然 简洁 ,但 它 的 实际 值 则 是 31250000。 
在 此 ，e 表 示 法 的 实际 含义 就 是 “3.125 乘 以 10”。 

也 可 以 使 用 e 表 示 法 表示 极 小 的 数值 , 如 0.00000000000000003, 这 个 数值 可 以 使 用 更 简洁 的 3e-17 
表示 。 在 默认 情况 下 ，ECMASctipt 会 将 那些 小 数 点 后 面 带 有 6 个 零 以 上 的 浮 点 数值 转换 为 以 。 表示 法 
表示 的 数值 ( 例如 ，0.0000003 会 被 转换 成 3e-7 )。 

浮 点 数值 的 最 高 精度 是 17 位 小 数 , 但 在 进行 算术 计算 时 其 精确 度 远 远 不 如 整数 。 例 如 ，0.1 加 0.2 
的 结果 不 是 0.3， 而 是 0.30000000000000004。 这 个 小 小 的 舍 入 误差 会 导致 无 法 测试 特定 的 浮 点 数值 。 
例如 : 


if (a + bb =s. 0.3)1 // 不 要 做 这 样 的 测试 ! 
alert ("You got 0.3.") 7; 












































} 

在 这 个 例子 中 , 我 们 测试 的 是 两 个 数 的 和 是 不 是 等 于 0.3。 如 果 这 两 个 数 是 0.05 和 0.25, 或 者 是 0.15 
和 0.15 都 不 会 有 问题 。 而 如 前 所 述 ， 如 果 这 两 个 数 是 0.1 和 0.2， 那 么 测试 将 无 法 通过 。 因 此 ， 永 远 不 
要 测试 某 个 特定 的 浮 点 数值 。 










关于 浮 点 数值 计算 会 产生 伟 入 误差 的 问题 ， 有 一 点 需要 明确 : 这 是 使 用 基于 
IEEE754 数值 的 浮 点 计算 的 通病 ，ECMAScript 并 非 独 此 一 家 ; 其 他 使 用 相同 数值 格 
式 的 语言 也 存在 这 个 问题 。 
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2. 数值 范围 
由 于 内 存 的 限制 , ECMAScript 并 不 能 保存 世界 上 所 有 的 数值 。 ECMAScript 能 够 表示 的 最 小 数值 保 
存在 Number .MIN_VALUE 中 一 一 在 大 多 数 浏览 右 中 ， 这 个 值 是 5e-324; 能 够 表示 的 最 大 数值 保存 在 
Number .MAX_VALUE 中 一 一 在 大 多 数 浏 览 器 中 ， 这 个 值 是 1.7976931348623157e+308。 如 果 某 次 计算 的 
结果 得 到 了 一 个 超出 JavaScript 数值 范围 的 值 ， 那 么 这 个 数值 将 被 自动 转换 成 特殊 的 Infinity 值 。 具 
体 来 说 ， 如 果 这 个 数值 是 负数 ， 则 会 被 转换 成 -Infinity ( 负 无 穷 )， 如 果 这 个 数值 是 正 数 ， 则 会 被 转 
换 成 Infinity ( 正 无 穷 )。 

如 上 所 述 ， 如 果 某 次 计算 返回 了 正 或 负 的 Infinity 值 ， 那 么 该 值 将 无 法 继续 参与 下 一 次 的 计算 ， 
为 Infinity 不 是 能 够 参与 计算 的 数值 。 要 想 确定 一 个 数值 是 不 是 有 穷 的 〈 换 句 话 说， 是 不 是 位 于 最 
小 和 最 大 的 数值 之 间 )， 可 以 使 用 isFinite() 函数 。 这 个 函数 在 参数 位 于 最 小 与 最 大 数值 之 间 时 会 返 
回 true， 如 下 面 的 例子 所 示 : 


Var result = Number.MAX VALUE + Number .MAX VALUE; 
alert (isFinite(result)); //false 


尽管 在 计算 中 很 少 出 现 某 些 值 超出 表示 范围 的 情况 , 但 在 执行 极 小 或 极 大 数值 的 计算 时 , 检测 监控 
这 些 值 是 可 能 的 ， 也 是 必需 的 。 













































































访问 Number .NEGATIVE INFINITY 和 Number .POSITIVE _ INFINITY 也 可 以 
得 到 负 和 正 Infinity 的 值 。 可 以 想见 ， 这 两 个 属性 中 分 别 保存 着 -Infinity 和 
Infinity, 


3. NaN 

NaN， 即 非 数值 ( Nota Number ) 是 一 个 特殊 的 数值 ， 这 个 数值 用 于 表示 一 个 本 来 要 返回 数值 的 操作 数 
未 返回 数值 的 情况 〈 这 样 就 不 会 抛 出 错误 了 )。 例 如 ， 在 其 他 编程 语言 中 ， 任 何 数值 除 以 0 都 会 导致 错误 ， 
从 而 停止 代码 执行 。 但 在 ECMAScript 中 ， 任 何 数值 除 以 0 会 返回 NaN” ， 因 此 不 会 影响 其 他 代码 的 执行 。 

NaN 本 喘 有 两 个 非 同 寻常 的 特点 。 首 先 ， 任 何 涉及 NaN 的 操作 (例如 NaN/10 ) 都 会 返回 NaN， 这 
个 特点 在 多 步 计算 中 有 可 能 导致 问题 。 其 次 ，NaN 与 任何 值 都 不 相等 , 包括 NaN 本 身 。 例如， 下 面 的 代 
码 会 返回 false: 

alert (NaN == NaN); //false 

针对 NaN 的 这 两 个 特点 ，ECMAScript 定义 了 isNaN () 函数 。 这 个 函数 接受 一 个 参数 ， 该 参数 可 以 
是 任何 类 型 ， 而 函数 会 玫 我 们 确定 这 个 参数 是 否 “ 不 是 数值 "。isNaN () 在 接收 到 一 个 值 之 后 ,会 尝试 
将 这 个 值 转换 为 数值 。 某 些 不 是 数值 的 值 会 直接 转换 为 数值 ， 例 如 字符 串 "10" 或 Boolean 值 。 而 任何 
不 能 被 转换 为 数值 的 值 都 会 导致 这 个 函数 返回 true。 请 看 下 面 的 例子 : 























alert (isNaN (NaN) ); //true 

alert (isNaN (10)); //false (10 是 一 个 数值 ) 
alert (isNaN("10")); //false (可 以 被 转换 成 数值 10) 
alert (isNaN ("blue")); //true (不 能 转换 成 数值 ) 
alert (isNaN (true) ) ; //false (可 以 被 转换 成 数值 1) 
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中 原 书 如 此 ,但 实际 上 只 有 0 除 以 0 才 会 返回 NaN， 正 数 除 以 0 返回 Infinity， 负数 除 以 0 返回 -Infinity。 
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这 个 例子 测试 了 5 个 不 同 的 值 。 测 试 的 第 一 个 值 是 NaN 本 身 ， 结 果 当 然 会 返回 true。 然 后 分 别 测 
试 了 数值 10 和 字符 串 "10"， 结 果 这 两 个 测试 都 返回 了 false， 因 为 前 者 本 身 就 是 数值 ， 而 后 者 可 以 被 
转换 成 数值 。 但 是 ,字符 串 "blue' 不 能 被 转换 成 数值 ， 因 此 函数 返回 了 true。 由 于 Boolean 值 true 
可 以 转换 成 数值 1， 因 此 函数 返回 false。 















尽管 有 点 儿 不 可 思议 ,但 isNaN() 确 实 也 适用 于 对 象 ,在 基于 对 象 调用 isNaN() 
函数 时 ， 会 首先 调用 对 象 的 valueof() 方 法 ， 然 后 确定 该 方法 返回 的 值 是 否 可 以 转 
换 为 数值 。 如 果 不 能 ， 则 基于 这 个 返回 值 再 调用 toString() 方 法 ， 再 测试 返回 值 。 

而 这 个 过 程 也 是 ECMAScript 中 内 置 函 数 和 操作 符 的 一 般 执行 流程 ， 更 详细 的 内 容 请 
参见 3.5 节 。 







4. 数值 转换 
有 3 个 函数 可 以 把 非 数值 转换 为 数值 : Number () 、parseInt () 和 parseFloat()。 第 一 个 函数 ， 
即 转型 函数 Number () 可 以 用 于 任何 数据 类 型 ， 而 另 两 个 函数 则 专门 用 于 把 字符 串 转 换 成 数值 。 这 3 个 
函数 对 于 同样 的 输入 会 有 返回 不 同 的 结果 。 
Number () 国 数 的 转换 规则 如 下 。 
口 如 果 是 Boolean 值 ，true 和 false 将 分 别 被 转换 为 1 和 0。 
口 如 果 是 数字 值 ， 只 是 简单 的 传人 和 返回 。 
口 如 果 是 null 值 ， 返 回 0。 
口 如 果 是 undefined， 返 回 NaN。 
口 如 果 是 字符 串 ， 遵 循 下 列 规则 : 
@ 如 果 字 符 串 中 只 包含 数字 ( 包括 前 面 带 正 号 或 负 号 的 情况 ), 则 将 其 转换 为 十 进 制 数值 , 即 "1" 
会 变 成 1，"123 "会 变 成 123 ， 而 "011" 会 变 成 11 (注意 : 前 导 的 零 被 忽略 了 ); 
里 如 果 字 符 串 中 包含 有 效 的 浮 点 格式 ， 如 "1.1"， 则 将 其 转换 为 对 应 的 浮 点 数值 ( 同样 ， 
略 新 导 零 ); 
@ 如 果 字 符 串 中 包含 有 效 的 十 六 进 制 格 式 ， 例 如 "0xf" ， 则 将 其 转换 为 相同 大 小 的 十 进 制 整 
数值 ; 
如 果 字 符 串 是 空 的 〈 不 包含 任何 字符 )， 则 将 其 转换 为 0; 
@ 如 果 字 符 串 中 包含 除 上 述 格式 之 外 的 字符 ， 则 将 其 转换 为 NaN。 
口 如 果 是 对 象 ， 则 调用 对 象 的 valueof () 方 法 ， 然 后 依照 前 面 的 规则 转换 返回 的 值 。 如 果 转 换 
的 结果 是 NaN， 则 调用 对 象 的 tostring() 方 法 ， 然 后 再 次 依照 前 面 的 规则 转换 返回 的 字符 
串 值 。 
根据 这 么 多 的 规则 使 用 Number () 把 各 种 数据 类 型 转换 为 数值 确实 有 点 复杂 。 下 面 还 是 给 出 几 个 有 具 
体 的 例子 吧 。 
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Var numl = Number ("Hello world!"); //NaN 
Var num2 = Number(""); //0 
var num3 = Number ("000011"); YL 
Var num4 = Number (true); XL 
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首先 ， 字 符 串 "Hello world! "会 被 转换 为 NaN， 因 为 其 中 不 包含 任何 有 意义 的 数字 值 。 空 字符 串 
会 被 转换 为 0。 字 符 串 "000011" 会 被 转换 为 11， 因 为 忽略 了 其 前 导 的 零 。 最 后 ，true 值 被 转换 为 1。 








UD 















一 元 加 操作 符 ( 3.5.1 节 将 介绍 ) 的 操作 与 Number () 函数 相同 。 















1 于 Number () 函数 在 转换 字符 串 时 比较 复杂 而 且 不 够 合理 ， 因 此 在 处 理 整数 的 时 候 更 常用 的 是 
parseInt () 困 数 。parseInt () 函数 在 转换 字符 串 时 ， 更 多 的 是 看 其 是 否 符合 数值 模式 。 它 会 忽略 字 
符 串 前 面 的 空格 ， 直 至 找到 第 一 个 非 空 格 字符 。 如 果 第 一 个 字符 不 是 数字 字符 或 者 负 号 ，parseInt () 
就 会 返回 NaN; 也 就 是 说 ， 用 parseInt () 转换 空 字符 串 会 返回 NaN ( Number () 对 空 字符 返回 0 )。 如 
果 第 一 个 字符 是 数字 字符 ，parseInt () 会 继续 解析 第 二 个 字符 ， 直 到 解析 完 所 有 后 续 字 符 或 者 遇 到 了 
一 个 非 数 字 字 符 。 例 如 ，"1234blue" 会 被 转换 为 1234， 因 为 "blue" 会 被 完全 忽略 。 类 似 地 ，"22.5" 
会 被 转换 为 22 ， 因 为 小 数 点 并 不 是 有 效 的 数字 字符 。 

如 果 字 符 串 中 的 第 一 个 字符 是 数字 字符 ，parseInt () 也 能 够 识别 出 各 种 整数 格式 ( 即 前 面 讨论 的 
十 进 制 、 八 进 制 和 十 六 进 制 数 )。 也 就 是 说 ， 如 果 字 符 串 以 "0x" 开 头 且 后 跟 数 字 字 符 ， 就 会 将 其 当 作 一 
个 十 六 进 制 整数 ， 如 果 字 符 串 以 "0 "开头 且 后 跟 数字 字符 ， 则 会 将 其 当 作 一 个 八进制 数 来 解析 。 

为 了 更 好 地 理解 parseInt () 图 数 的 转换 规则 ， 下 面 给 出 一 些 例 子 : 






























































Var numl = parseInt ("1234blue"); E234 

Var num2 = parseInt(""); // NaN 

var num3 = parseInt ("0xA"); // 10 (十 六 进 制 数 ) 
Var num4 = parseInt (22.5); // 22 

var num5 = parseInt ("070"); // 56 (八进制 数 ) 
var num6 = parseInt ("70"); // 70 (十 进 制 数 ) 
var num7 = parseInt ("0xf"); // 15 (十 六 进 制 数 ) 
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在 使 用 parseInt () 解 析 像 八进制 字面 量 的 字符 串 时 ，ECMAScript 3 和 5 存在 分 歧 。 例 如 : 


//ECMAScript 3 认为 是 56 (八进制 ) ，ECMAScript 5 认为 是 70 (十 进 制 ) 

Var num = parseInt ("070"); 

在 ECMAScript 3 JavaScript 引擎 中 ，"070" 被 当成 八进制 字面 量 ， 因 此 转换 后 的 值 是 十 进 制 的 56。 
而 在 ECMAScript 5 JavaScript 引擎 中 ，parseInt () 已 经 不 具有 解析 八进制 值 的 能 力 ， 因 此 前 导 的 零 会 
被 认为 无 效 ， 从 而 将 这 个 值 当成 "70"， 结 果 就 得 到 十 进 制 的 70。 在 ECMAScript 5 中 ， 即 使 是 在 非 严格 
模式 下 也 会 如 此 。 

为 了 消除 在 使 用 parseInt () 函数 时 可 能 导致 的 上 述 困惑 ， 可 以 为 这 个 函数 提供 第 二 个 参数 : 转换 
时 使 用 的 基数 ( 即 多 少 进 制 )。 如 果 知 道 要 解析 的 值 是 十 六 进 制 格式 的 字符 串 ， 那么 指定 基数 16 作为 第 
二 个 参数 ， 可 以 保证 得 到 正确 的 结果 ， 例 如 : 
























































Var num = parseInt ("OxAF", 16); //175 
实际 上 ， 如 果 指 定 了 16 作为 第 二 个 参数 ， 字 符 串 可 以 不 带 前 面 的 "0x"， 如 下 所 示 : 
Var numl = parseInt ("AF", 16); YLTS 
Var num2 = parseInt ("AF"); //NaN 
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这 个 例子 中 的 第 一 个 转换 成 功 了 ， 而 第 二 个 则 失败 了 。 差 别 在 于 第 一 个 转换 传人 了 基数 ， 明 确 告 诉 
parseInt () 要 解析 一 个 十 六 进 制 格式 的 字符 串 ， 而 第 二 个 转换 发 现 第 一 个 字符 不 是 数字 字符 ， 因 此 就 
自动 终止 了 。 

指定 基数 会 影响 到 转换 的 输出 结果 。 例 如 : 











var numl = parseInt ("10", 2); //2 ( 按 二 进 制 解析 ) 
var num2 = parseInt ("10", 8); //8  ( 按 八 进 制 解析 ) 
var num3 = parseInt ("10", 10); //10 ( 按 十 进 制 解析 ) 
var num4 = parseInt ("10", 16); //16 ( 按 十 六 进 制 解析 ) 
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不 指定 基数 意味 着 让 parseInt () 决 定 如 何 解析 输入 的 字符 串 ， 因 此 为 了 避免 错误 的 解析 , 我 们 建 
议 无 论 在 什么 情况 下 都 明确 指定 基数 。 


多 数 情况 下 ， 我 们 要 解析 的 都 是 十 进 制 数 值 ， 因 此 始终 将 10 作为 第 二 个 参数 是 


非常 必要 的 。 





与 parseInt () 函数 类 似 ，parseFloat () 也 是 从 第 一 个 字符 (位置 0 ) 开始 解析 每 个 字符 。 而 且 
也 是 一 直 解 析 到 字符 串 末 尾 , 或 者 解析 到 遇见 一 个 无 效 的 浮 点 数字 字符 为 止 。 也 就 是 说 ,字符 串 中 的 第 
一 个 小 数 点 是 有 效 的 ， 而 第 二 个 小 数 点 就 是 无 效 的 了 ， 因 此 它 后 面 的 字符 串 将 被 忽略 。 举 例 来 说 ， 
"22 .34.5" 将 会 被 转换 为 22.34。 

除了 第 一 个 小 数 点 有 效 之 外 ，parseFloat () 与 parseInt () 的 第 二 个 区 别 在 于 它 始 终 都 会 忽略 前 导 
的 零 。parseFloat () 可 以 识别 前 面 讨论 过 的 所 有 浮 点 数值 格式 ， 也 包括 十 进 制 整数 格式 。 但 十 六 进 制 格 
式 的 字符 串 则 始终 会 被 转换 成 0。 由 于 parseFloat () 只 解析 十 进 制 值 ， 因 此 它 没有 用 第 二 个 参数 指定 基 
数 的 用 法 。 最 后 还 要 注意 一 点 : 如 果 字 符 串 包含 的 是 一 个 可 解析 为 整数 的 数 ( 没有 小 数 点 ， 或 者 小 数 点 后 
都 是 零 )，parseFloat () 会 返回 整数 。 以 下 是 使 用 parseFloat () 转换 数值 的 几 个 典型 示例 。 




















var numl = parseFloat ("1234blue"); //1234 (整数 ) 
Var num2 = parseFloat ("OxA"); XD 

Var num3 = parseFloat ("22.5"); X22 S 

Var num4 = parseFloat ("22.34.5"); Pel 

Var num5 = parseFloat("0908.5"); //908.5 

Var num6 = parseFloat("3.125e7"); //31250000 
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3.4.6 String 类 型 


string 类 型 用 于 表示 由 零 或 多 个 16 位 Unicode 字符 组 成 的 字符 序列 , 即 字 符 串 。 字 符 串 可 以 由 双 
引号 (") 或 单 引 号 (') 表示 ， 因 此 下 面 两 种 字符 串 的 写法 都 是 有 效 的 : 


Var firstName = "Nicholas"; 
Var lastName = 'Zakas'; 


与 PHP 中 的 双 引 号 和 单 引号 会 影响 对 字符 串 的 解释 方式 不 同 ，ECMAScript 中 的 这 两 种 语法 形式 没 
有 什么 区 别 。 用 双 引 号 表示 的 字符 串 和 用 单 引 号 表示 的 字符 串 完全 相同 。 不过， 以 双 引 号 开头 的 字符 串 
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也 必须 以 双 引 号 结尾 ， 而 以 单 引号 开头 的 字符 是 





致 语法 错误 : 





var firstName = 'Nicholas"; // 语法 错误 (左右 引号 必须 匹配 ) 


Ar rn 


1. 字符 字面 量 








string 数据 类 型 包含 一 些 特殊 的 字符 字 





他 用 途 的 字符 。 这 些 字符 字面 量 如 下 表 所 示 























必须 以 单 引号 结尾 。 例 如 ， 下 面 这 种 字符 串 表示 法 会 导 





ij 量 ， 也 叫 转 义 序列 ， 用 于 表示 非 打印 字符 ， 或 者 具有 其 











































































































字面 量 含义 

\n 换行 

\t 制 表 

\p 空格 

\r 可 车 

\E 进 纸 

\\ 斜 杠 

VW 单 引号 (') ,在 用 单 引号 表示 的 字符 串 中 使 用 。 例 如 : 'He said, \'hey.\'' 

Wi 双 引 号 ( " ) ， 在 用 双 引 号 表示 的 字符 串 中 使 用 。 例 如 : "He said, \"hey.\"" 

\xnn 以 十 六 进 制 代码 nn 表示 的 一 个 字符 ( 其 中 np 为 0~F ) 。 例 如 ，\x41 表 示 "A" 

\unnnn 义 十 六 进 制 代码 mpnp 表 示 的 一 个 Unicode 字 符 ( 其 中 n 为 0~F ) 。 例 如 ，\u03a3 表 示 和 希腊 字符 了 

这 些 字符 字面 量 可 以 出 现在 字符 串 中 的 任意 位 置 , 而且 也 将 被 作为 一 个 字符 来 解析 ,如 下 面 的 例子 
所 示 

Var text = "This is the letter sigma: \u03a3."，; 








这 个 例子 中 的 变量 text 有 28 个 字符 ， 其 中 6 个 字符 长 的 转 义 序列 表示 1 个 字符 。 
任何 字符 串 的 长 度 都 可 以 通过 访问 其 length 属性 取得 ， 例 如 : 


alert (text.length); // 输出 28 








这 个 属性 返回 的 字符 数 包 括 16 位 字符 的 数目 。 如 果 字 符 串 中 包含 双 字 节 字 符 ， 那 么 length 属性 


可 能 不 会 精确 地 返回 字符 串 中 的 字符 数目 。 
2. 字符 串 的 特点 








ECMAScript 中 的 字符 串 是 不 可 变 的 ， 也 就 是 说 ， 字 符 串 一 旦 创建 ， 
某 个 变量 保存 的 字符 串 ， 首 先 要 销毁 原来 的 字符 串 ， 然 后 再 用 另 一 个 包含 新 值 的 字符 串 填充 该 变量 ， 








例如 : 


var Landyg SS "Java"y 
lang = lang + "ScCript"; 








它们 的 值 就 不 能 改变 。 要 改变 


以 上 示例 中 的 变量 1ang 开始 时 包含 字符 串 "Java" 。 而 第 二 行 代码 把 1ang 的 值 重新 定义 为 "Java" 
与 "Script" 的 组 合 ， 即 "Javascript"。 实 现 这 个 操作 的 过 程 如 下 : 首先 创建 一 个 能 容纳 10 个 字符 的 

















符 串 "script"， 因 为 这 两 个 字符 串 已 经 没 月 








了。 这 个 过 程 是 在 后 台 发 9 





新 字符 串 ， 然 后 在 这 个 字符 串 中 填充 "Java" 和 "script"， 最 后 一 步 是 销毁 原来 的 字符 串 "Java" 和 字 





E 的 ， 而 这 也 是 在 某 些 旧版 本 的 
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浏览 器 (例如 版 本 低 于 1.0 的 Firefox、IE6 等 ) 中 拼接 字符 串 时 速度 很 慢 的 原因 所 在 。 但 这 些 浏 览 器 后 
来 的 版 本 已 经 解决 了 这 个 低 效 率 问题 。 

3. 转换 为 字符 串 

要 把 一 个 值 转换 为 一 个 字符 串 有 两 种 方式 。 第 一 种 是 使 用 几乎 每 个 值 都 有 的 tostring () 方 法 (第 





5 章 将 讨论 这 个 方法 的 特点 )。 这 个 方法 唯一 要 做 的 就 是 返回 相应 值 的 字符 串 表 现 。 来 看 下 面 的 例子 : 
var age = 11; 
var ageAsSttring = age.toString(); // 字符 囊 "11" 
var found = true; 
var foundAsString = found.toString(); // 字符 囊 "true" 
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数值 、 布 尔 值 、 对 象 和 字符 串 值 ( 没 错 ， 每 个 字符 串 也 都 有 一 个 tostring () 方 法 ,该 方法 返回 字 
符 串 的 一 个 副本 ) 都 有 toString () 方 法 ,。 但 null 和 undefined 值 没 有 这 个 方法 。 





多 数 情 况 下 ，j 





周 用 tostring () 方 法 不 必 传 递 参数 。 但 是 ， 在 调用 数值 的 tostring() 方 法 时 ， 可 








以 传递 一 个 参数 : 输出 数值 的 基数 。 默 认 情况 下 ，tostring () 方 法 以 十 进 制 格式 返回 数值 的 字符 串 表 
示 。 而 通过 传递 基数 ，tostring() 可 以 输出 以 二 进 制 、 八 进 制 、 十 六 进 制 ,乃至 其 他 任意 有 效 进 制 格 
式 表 示 的 字符 串 值 。 下 面 给 出 儿 个 例子 : 





var num = 10 

















’ 


alert (num.toString()); A lO 
alert (num.toString (2)); 7 EOLQ" 
alert (num.toString (8)); ps ey 
alert (num.toString(10)); /A, LO 
alert (num.toString(16)); A en 
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通过 这 个 例子 可 以 看 出 , 通过 指定 基数 ,tostring () 方 法 会 改变 输出 的 值 。 而 数值 10 根据 基数 的 
不 同 ， 可 以 在 输出 时 被 转换 为 不 同 的 数值 格式 。 注 意 ， 默 认 的 〈 没有 参数 的 ) 输出 值 与 指定 基数 10 时 


的 输出 值 相同 。 





在 不 知道 要 转换 的 值 是 不 是 null 或 undefined 的 情况 下 ， 还 可 以 使 用 转型 函数 String(), 这 个 
函数 能 够 将 任何 类 型 的 值 转换 为 字符 串 。string () 函数 遵循 下 列 转 换 规则 . 














口 如 果 值 有 tostring () 方 法 ， 则 调用 该 方法 (没有 参数 ) 并 返回 相应 的 结果 ; 
口 如 果 值 是 nu11， 则 返回 "nu11"; 
口 如 果 值 是 undefined， 则 返回 "undefined"。 








下 面 再 看 几 个 例子 : 








Var valuel 
Var Value2 
var Value3 
var Value4: 


alert (String 
alert (String 
alert (String 
alert (String 


03 

truess 

DJ 

(valuel1)) /A 10" 
(value2)); // trie" 
(value3)) /LL 
(value4)) // "undefined" 
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这 里 先后 转换 了 4 个 值 : 数值 、 布 尔 值 、null 和 undefined。 数 值 和 布尔 值 的 转换 结果 与 调用 
toString () 方 法 得 到 的 结果 相同 。 因 为 null 和 undefined 没有 toString() 方 法 ,， 所 以 string () 
函数 就 返回 了 这 两 个 值 的 字面 量 。 




















要 把 某 个 值 转换 为 字符 串 ， 可 以 使 用 加 号 操作 符 〈3.5 节 讨 论 ) 把 它 与 一 个 字符 


HO (CO ) 6 





3.4.7 Object 类 型 


ECMAScript 中 的 对 象 其 实 就 是 一 组 数据 和 功能 的 集合 。 对 象 可 以 通过 执行 new 操作 符 后 跟 要 创建 
的 对 象 类 型 的 名 称 来 创建 。 而 创建 object 类 型 的 实例 并 为 其 添加 属性 和 (或) 方法 ， 就 可 以 创建 自 定 
义 对 象 ， 如 下 所 示 : 


Var Oo = new Object () ; 

这 个 语法 与 Java 中 创建 对 象 的 语法 相似 ; 但 在 ECMAScript 中 ， 如 果 不 给 构造 函数 传递 参数 ， 则 可 
以 省 略 后 面 的 那 一 对 圆 括号 。 也 就 是 说 ， 在 像 前 面 这 个 示例 一 样 不 传递 参数 的 情况 下 ， 完 全 可 以 省 略 那 
对 圆 括号 〈 但 这 不 是 推荐 的 做 法 ): 

var Oo = new Object; // 有效， 但 不 推荐 省 略 圆 括号 


仅仅 创建 object 的 实例 并 没有 什么 用 处 , 但 关键 是 要 理解 一 个 重要 的 思想 : 即 在 ECMAScript 中 ， 

(就 像 Java 中 的 java.1lang .0bject 对 象 一 样 ) object 类 型 是 所 有 它 的 实例 的 基础 。 换 句 话说 ， 

object 类 型 所 具有 的 任何 属性 和 方法 也 同样 存在 于 更 具体 的 对 象 中 。 

object 的 每 个 实例 都 具有 下 列 属性 和 方法 。 

口 constructor: 保存 着 用 于 创建 当前 对 象 的 函数 。 对 于 前 面 的 例子 而 言 ， 构 造 函 数 ( constructor ) 

就 是 Object ()。 

口 nasOownProperty (propertyName) : 用 于 检查 给 定 的 属性 在 当前 对 象 实例 中 而 不 是 在 实例 
的 原型 中 ) 是 否 存在 。 其 中 ， 作 为 参数 的 属性 名 ( propertyName ) 必须 以 字符 串 形式 指定 ( 例 
如 : o.hasownProperty("name") )。 

口 1sPrototypeof (object) : 用 于 检查 传人 的 对 象 是 否 是 传人 对 象 的 原型 (第 5 章 将 讨论 原 

型 )。 

口 propertyIsEnumerable (propertyName) : 用 于 检查 给 定 的 属性 是 否 能 够 使 用 for-in 语句 
(本章 后 面 将 会 讨论 ) 来 枚 举 。 与 nasownProperty () 方 法 一 样 , 作为 参数 的 属性 名 必须 以 字符 

串 形 式 指定 。 

口 toLocaleString(): 返回 对 象 的 字符 串 表 示 ， 该 字符 串 与 执行 环境 的 地 区 对 应 。 

口 tostring(): 返回 对 象 的 字符 串 表 示 。 

口 valueof() : 返回 对 象 的 字符 串 、 数 值 或 布尔 值 表示 。 通 常 与 tostring() 方 法 的 返回 值 

相同 。 

1 于 在 ECMAScript 中 object 是 所 有 对 象 的 基础 ， 因 此 所 有 对 象 都 具有 这 些 基本 的 属性 和 方法 。 

第 5 章 和 第 6 章 将 详细 介绍 object 与 其 他 对 象 的 关系 。 
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从 技术 角度 讲 , ECMA-262 中 对 象 的 行为 不 一 定 适 用 于 JavaScript 中 的 其 他 对 象 。 
浏览 器 环境 中 的 对 象 ， 比 如 BOM 和 DOM 中 的 对 象 ， 都 属于 宿主 对 象 ， 因 为 它们 是 
由 宿主 实现 提供 和 定义 的 。ECMA-262 不 负责 定义 宿主 对 象 ， 因 此 宿主 对 象 可 能 会 也 
可 能 不 会 继承 object。 


3.5 操作 符 

ECMA-262 描述 了 一 组 用 于 操作 数据 值 的 操作 符 ， 包 括 算术 操作 符 ( 如 加 号 和 减 号 )、 位 操作 符 、 
关系 操作 符 和 相等 操作 符 。ECMAScript 操作 符 的 与 众 不 同 之 处 在 于 ， 它 们 能 够 适用 于 很 多 值 ， 例 如 字 
符 串 数字 值 .布尔 值 , 甚 至 对 象 . 不 过 ,在 应 用 于 对 象 时 , 相应 的 操作 符 通 常 都 会 调用 对 象 的 valueof () 
和 (或 ) tostring() 方 法 ， 以 便 取得 可 以 操作 的 值 。 


3.5.1 一 元 操作 符 


只 能 操作 一 个 值 的 操作 符 叫做 一 元 操作 符 。 一 元 操作 符 是 ECMAScript 中 最 简单 的 操作 符 。 

1. 递增 和 递减 操作 符 

递增 和 递减 操作 符 直接 借鉴 自 C， 而 且 各 有 两 个 版 本 : 前 置 型 和 后 置 型 。 顾 名 思 义 ， 前 置 型 应 该 位 
于 要 操作 的 变量 之 前 ， 而 后 置 型 则 应 该 位 于 要 操作 的 变量 之 后 。 因 此 , 在 使 用 前 置 递增 操作 符 给 一 个 数 
值 加 1 时， 要 把 两 个 加 号 (++ ) 放 在 这 个 数值 变量 前 面 ， 如 下 所 示 : 


Var age = 29; 
++age; 


在 这 个 例子 中 ,前 置 递 增 操 作 符 把 age 的 值 变 成 了 30 (为 29 加 上 了 1)。 实际 上 , 执行 这 个 前 置 递 
增 操作 与 执行 以 下 操作 的 效果 相同 : 


Var age = 29; 
age = age + 1}; 


执行 前 置 递减 操作 的 方法 也 类 似 ， 结 果 会 从 一 个 数值 中 减 去 1。 使 用 前 置 递减 操作 符 时 ， 要 把 两 个 
减 号 (-- ) 放 在 相应 变量 的 前 面 ， 如 下 所 示 : 


Var age = 29; 
--age; 


这 样 ，age 变量 的 值 就 减少 为 28( 从 29 中 减 去 了 1 )。 
执行 前 置 递增 和 递减 操作 时 ， 变 量 的 值 都 是 在 语句 被 求 值 以 前 改变 的 。( 在 计算 机 科学 领域 ， 这 种 
情况 通常 被 称 作 副 效应 。) 请 看 下 面 这 个 例子 。 


Var age = 29; 



























































var anotherAge = --age + 2; 
alert (age); // 输出 28 
alert (anotherAge); // 输出 30 
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这 个 例子 中 变量 anotherage 的 初始 值 等 于 变量 age 的 值 前 置 递 减 之 后 加 2。 由 于 先 执行 了 减法 操 
作 ，age 的 值 变 成 了 28， 所 以 再 加 上 2 的 结果 就 是 30。 
由 于 前 置 递 增 和 递减 操作 与 执行 语句 的 优先 级 相等 , 因此 整个 语句 会 从 左 至 右 被 求 值 。 再 看 一 个 例子 : 











Var numl = 2; 
Var num2 = 20; 
Var num3 = --numl + num2; // 等 于 21 
Var num4 = numl + num2; // 等 于 21 
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在 这 里 ，num3 之 所 以 等 于 21 是 因为 numl 先 减 去 了 1 才 与 num2 相 加 。 而 变量 num4 也 等 于 21 是 
因为 相应 的 加 法 操作 使 用 了 numl 减 去 1 之 后 的 值 。 

后 置 型 递增 和 递减 操作 符 的 语法 不 变 ( 仍然 分 别 是 ++ 和 -- ), 只 不 过 要 放 在 变量 的 后 面 而 不 是 前 面 。 
后 置 递 增 和 递减 与 前 置 递增 和 递减 有 一 个 非常 重要 的 区 别 , 即 递 增 和 递减 操作 是 在 包含 它们 的 语句 被 求 
值 之 后 才 执 行 的 。 这 个 区 别 在 某 些 情况 下 不 是 什么 问题 ， 例 如 


var age = 29; 
age++; 


把 递增 操作 符 放 在 变量 后 面 并 不 会 改变 语句 的 结果 ， 因 为 递增 是 这 条 语句 的 唯一 操作 。 但 是 ， 当 语 
句 中 还 包含 其 他 操作 时 ， 上 述 区 别 就 会 非常 明显 了 。 请 看 下 面 的 例子 : 















































var numl = 2; 
var num2 = 20; 
var num3 = numl-- + num2; // 等 于 22 
var num4 = numl + num2; Vs 
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这 里 仅仅 将 前 置 递减 改 成 了 后 置 递减 ,就 立即 可 以 看 到 差别 。 在 前 面 使 用 前 置 递减 的 例子 中 , num3 

和 num4 最 后 都 等 于 21。 而 在 这 个 例子 中 ，num3 等 于 22，num4 等 于 21。 差 别 的 根源 在 于 ， 这 里 在 计 

算 num3 时 使 用 了 numi 的 原始 值 (2 ) 完成 了 加 法 计算 ， 而 num4 则 使 用 了 递减 后 的 值 (1 )。 

所 有 这 4 个 操作 符 对 任何 值 都 适用 ， 也 就 是 它们 不 仅 适 用 于 整数 ， 还 可 以 用 于 字符 串 、 布 尔 值 、 浮 

点 数值 和 对 象 。 在 应 用 于 不 同 的 值 时 ， 递 增 和 递减 操作 符 遵 循 下 列 规 则 。 

口 在 应 用 于 一 个 包含 有 效 数 字 字 符 的 字符 串 时 ， 先 将 其 转换 为 数字 值 ， 再 执行 加 减 1 的 操作 。 字 

符 串 变 量变 成 数值 变量 。 

口 在 应 用 于 一 个 不 包含 有 效 数 字 字 符 的 字符 串 时 ， 将 变量 的 值 设置 为 NaN (第 4 章 将 详细 讨论 )。 

字符 串 变 量变 成 数值 变量 。 

口 在 应 用 于 布尔 值 false 时 ， 先 将 其 转换 为 0 再 执行 加 减 1 的 操作 。 布 尔 值 变量 变 成 数值 变量 。 

口 在 应 用 于 布尔 值 true 时 ， 先 将 其 转换 为 1 再 执行 加 减 1 的 操作 。 布 尔 值 变量 变 成 数值 变量 。 

口 在 应 用 于 浮 点 数值 时 ， 执 行 加 减 1 的 操作 。 

口 在 应 用 于 对 象 时 ， 先 调用 对 象 的 valueof () 方 法 (第 5 章 将 详细 讨论 ) 以 取得 一 个 可 供 操作 的 
值 。 然 后 对 该 值 应 用 前 述 规则 。 如 果 结 果 是 NaN， 则 在 调用 tostring () 方 法 后 再 应 用 前 述 规 
则 。 对 象 变 量变 成 数值 变量 。 

以 下 示例 展示 了 上 面 的 一 些 规 则 : 





















































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





Var S81 = "2"; 
Var S82 = "Zz" 
Var b = false; 
Var 上 = 1.1; 
Var oO = { 


ValueoOf: function() { 
return -1; 


Sl1++; // 值 变 成 数值 3 

SsS2++; // 值 变 成 NaN 

b++; // 值 变 成 数值 1 

f-—; // 值 变 成 0.10000000000000009 (由 于 浮 点 舍 入 错误 所 致 ) 
o--; // 值 变 成 数值 -2 
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2. 一 元 加 和 减 操作 符 

绝 大 多 数 开 发 人 员 对 一 元 加 和 减 操作 符 都 不 会 陌生 ， 而 且 这 两 个 ECMAScript 操作 符 的 作用 与 数学 
书 上 讲 的 完全 一 样 。 一 元 加 操作 符 以 一 个 加 号 (+ ) 表示 ， 放 在 数值 前 面 ， 对 数值 不 会 产生 任何 影响 ， 
如 下 面 的 例子 所 示 : 

Var num = 25; 

num = +num; // 仍然 是 25 

不 过 , 在 对 非 数 值 应 用 一 元 加 操作 符 时 , 该 操作 符 会 像 Number () 转型 函数 一 样 对 这 个 值 执行 转换 。 
换 名 话说， 布尔 值 false 和 true 将 被 转换 为 0 和 1， 字符 串 值 会 被 按照 一 组 特殊 的 规则 进行 解析 ， 而 
对 象 是 先 调 用 它们 的 valueof () 和 (或 ) toString () 方 法 ， 再 转换 得 到 的 值 。 

下 面 的 例子 展示 了 对 不 同 数据 类 型 应 用 一 元 加 操作 符 的 结果 : 

var sl 

Var S2 

Var S3 

var b = 

Var f = 

var © = { 


ValueoOf: function() { 
return -1; 
































sl = +S1; // 值 变 成 数值 1 

s2 = +s2; // 值 变 成 数值 1.1 

s3 = +s3; // 值 变 成 NaN 

b = +b; // 值 变 成 数值 0 

E = +f; // 值 未 变 , 仍然 是 1.1 
o = +o; // 值 变 成 数值 -1 
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一 元 减 操作 符 主要 用 于 表示 负数 ,例如 将 1 转换 成 -1。 下 面 的 例子 演示 了 这 个 简单 的 转换 过 程 : 


var num = 25; 
num = -num; // 变 成 了 -25 
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在 将 一 元 减 操作 符 应 用 于 数值 时 ， 该 值 会 变 成 负数 ( 如 上 面 的 例子 所 示 )。 而 当 应 用 于 非 数值 时 ， 
一 元 减 操作 符 遵 循 与 一 元 加 操作 符 相同 的 规则 ， 最 后 再 将 得 到 的 数值 转换 为 负数 ， 如 下 面 的 例子 所 示 : 


Var sl 
var s2 
var s3 
var b = 
Var EE = 1 .1s 
Var oO = { 

ValueoOf : function() { 

return -1; 





Li 
> 
> 





sl = -sl; // 值 变 成 了 数值 -1 
s2 = -s2 // 值 变 成 了 数值 -1 .1 
s3 = -s3; // 值 变 成 了 NaN 

b = -b; // 值 变 成 了 数值 0 

f = -f; /WW 入 成 了 = 

o = -o; // 值 变 成 了 数值 1 
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一 元 加 和 减 操作 符 主 要 用 于 基本 的 算术 运算 ， 也 可 以 像 前 面 示例 所 展示 的 一 样 用 于 转换 数据 类 型 。 


3.5.2 ”位 操作 符 


位 操作 符 用 于 在 最 基本 的 层次 上 ， 即 按 内 存 中 表示 数值 的 位 来 操作 数值 。ECMAScript 中 的 所 有 数 
值 都 以 IEEE-754 64 位 格式 存储 , 但 位 操作 符 并 不 直接 操作 64 位 的 值 。 而 是 先 将 64 位 的 值 转换 成 32 位 
的 整数 , 然后 执行 操作 , 最 后 再 将 结果 转换 回 64 位 。 对 于 开发 人 员 来 说 , 由 于 64 位 存储 格式 是 透明 的 ， 
此 整个 过 程 就 像 是 只 存在 32 位 的 整数 一 样 。 

对 于 有 符号 的 整数 ，32 位 中 的 前 31 位 用 于 表示 整数 的 值 。 第 32 位 用 于 表示 数值 的 符号 : 0 表示 正 
数 ，1 表示 负数 。 这 个 表示 符号 的 位 叫做 符号 位 ， 符 号 位 的 值 决定 了 其 他 位 数值 的 格式 。 其 中 ， 正 数 以 
纯 二 进 制 格式 存储 ，31 位 中 的 每 一 位 都 表示 2 的 寡 。 第 一 位 ( 叫做 位 0 ) 表示 2 ， 第 二 位 表示 2 ， 以 此 
类 推 。 没 有 用 到 的 位 以 0 填充 即 忽 略 不 计 。 例 如 ， 数值 18 的 二 进 制 表示 是 
00000000000000000000000000010010， 或 者 更 简洁 的 10010。 这 是 5 个 有 效 位 ， 这 5 位 本 身 就 决定 了 实 
际 的 值 ( 如 图 3-1 所 示 )。 

































































110I10,1i0 


(24x1) + (23x0) + (22x0) + (21x1) + (20xO) 




















16 + 0 + 0 + 2 + 0 
18 
图 3-1 


负数 同样 以 二 进 制 码 存储 , 但 使 用 的 格式 是 二 进 制 补 码 。 计 算 一 个 数值 的 二 进 制 补 码 , 需要 经 过 下 
列 3 个 步骤 : 
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(1) 求 这 个 数值 绝对 值 的 二 进 制 码 ( 例如， 要 求 -18 的 二 进 制 补 码 ， 先 求 18 的 二 进 制 码 ); 
(2) 求 二 进 制 反 码 ， 即 将 0 替换 为 1， 将 1 替换 为 0; 

(3) 得 到 的 二 进 制 反 码 加 1。 

要 根据 这 3 个 步 又 求 得 -18 的 二 进 制 码 ， 首 先 就 要 求 得 18 的 二 进 制 码 ， 即 : 

0000 0000 0000 0000 0000 0000 0001 0010 

然后 ， 求 其 二 进 制 反 码 ， 即 0 和 1 互 换 : 

和 生生 了 于 和 二 二 汪汪 村 二 秆 二 于 于 汪汪 和 和 十 生 必 于 

最 后 ， 二 进 制 反 码 加 1: 


二 于 二 于 于 生生 二 下 和 LL 0 210L 














于 二 二 二 LE LLL0 L110 


这 样 ， 就 求 得 了 -18 的 二 进 制 表示 , 即 11111111111111111111111111101110。 要 注意 的 是 ， 在 处 理 有 
符号 整数 时 ， 是 不 能 访问 位 31 的 。 

ECMAScript 会 尽力 向 我 们 隐藏 所 有 这 些 信息 。 换 名 话说 ,在 以 二 进 制 字符 串 形 式 输出 一 个 负数 时 ， 
我 们 看 到 的 只 是 这 个 负数 绝对 值 的 二 进 制 码 前 面 加 上 了 一 个 负 号 。 如 下 面 的 例子 所 示 : 


Var num = -18; 
alert (num.toString (2)); // "-10010" 


要 把 数值 -18 转换 成 二 进 制 字符 串 时 ， 得 到 的 结果 是 "-10010"。 这 说 明 转 换 过 程 理解 了 二 进 制 补 
码 并 将 其 以 更 合乎 逻辑 的 形式 展示 了 出 来 。 









































默认 情况 下 ，ECMAScript 中 的 所 有 整数 都 是 有 符号 整数 。 不 过 ， 当 然 也 存在 无 
符号 整数 。 对 于 无 符号 整数 来 说 ， 第 32 位 不 再 表示 符号 ， 因 为 无 符号 整数 只 能 是 正 
数 。 而 且 ， 无 符号 整数 的 值 可 以 更 大 ， 因 为 多 出 的 一 位 不 再 表示 符号 ， 可 以 用 来 表示 
数值 。 


在 ECMAScript 中, 当 对 数值 应 用 位 操作 符 时 , 后 台 会 发 生 如 下 转换 过 程 : 64 位 的 数值 被 转换 成 32 
位 数值 ， 然 后 执行 位 操作 ， 最 后 再 将 32 位 的 结果 转换 回 64 位 数值 。 这 样 ， 表 面 上 看 起 来 就 好 像 是 在 操 
作 32 位 数值 ， 就 跟 在 其 他 语言 中 以 类 似 方式 执行 二 进 制 操作 一 样 。 但 这 个 转换 过 程 也 导致 了 一 个 严重 
的 副 效 应 ， 即 在 对 特殊 的 NaN 和 Infinity 值 应 用 位 操作 时 ， 这 两 个 值 都 会 被 当成 0 来 处 理 。 

如 果 对 非 数值 应 用 位 操作 符 ， 会 先 使 用 Number () 函数 将 该 值 转换 为 一 个 数值 ( 自动 完成 )， 然 后 
再 应 用 位 操作 。 得 到 的 结果 将 是 一 个 数值 。 

1. 按 位 非 NOT) 

按 位 非 操 作 符 由 一 个 波浪 线 (~ ) 表示 ， 执 行 按 位 非 的 结果 就 是 返回 数值 的 反 码 。 按 位 非 是 
ECMAScript 操作 符 中 少数 几 个 与 二 进 制 计算 有 关 的 操作 符 之 一 。 下 面 看 一 个 例子 : 
































Var numl = 25; // 二 进 制 00000000000000000000000000011001 
Var num2 = ~numl; A 尘 进 制 .二 二 二 二 二 和 生生 本 二 本 二 本 生生 和 和 人 和 和 和 人 于 OO 二 0 
alert (num2); // -26 
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这 里 ,对 25 执行 按 位 非 操 作 , 结果 得 到 了 -26。 这 也 验证 了 按 位 非 操作 的 本 质 : 操作 数 的 负 值 减 1。 
因此 ， 下 面 的 代码 也 能 得 到 相同 的 结 


Var numl = 25; 
Var num2 = -numl - 1; 
alert (num2); J/ 226" 





虽然 以 上 代码 也 能 返回 同样 的 结果 ,但 由 于 按 位 非 是 在 数值 表示 的 最 底层 执行 操作 , 因此 速度 更 快 。 
2. 按 位 与 “AND) 
按 位 与 操作 符 由 一 个 和 号 字符 ( & ) 表示 ， 它 有 两 个 操作 符 数 。 从 本 质 上 讲 ， 按 位 与 操作 就 是 将 两 人 


个 数值 的 每 一 位 对 齐 ， 然 后 根据 下 表 中 的 规则 ， 对 相同 位 置 上 的 两 个 数 执行 AND 操作 : 
































第 一 个 数值 的 位 第 二 个 数值 的 位 结 果 
1 1 1 
1 0 0 
0 1 0 
0 0 0 














简 而 言 之 ， 按 位 与 操作 只 在 两 个 数值 的 对 应 位 都 是 1 时 才 返回 1， 任 何 一 位 是 0， 结果 都 是 0。 
下 面 看 一 个 对 25 和 3 执行 按 位 与 操作 的 例子 : 


Var result = 25 & 3; 
alert (result); //1 
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可 见 ， 对 25 和 3 执行 按 位 与 操作 的 结果 是 1。 为 什么 呢 ? 请 看 其 底层 操作 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


AND = 0000 0000 0000 0000 0000 0000 0000 0001 
原来 ，25 和 3 的 二 进 制 码 对 应 位 上 只 有 一 位 同时 是 1， 而 其 他 位 的 结果 自然 都 是 0， 因 此 最 终结 果 
等 于 1。 
3. 按 位 或 OR) 
按 位 或 操作 符 由 一 个 竖 线 符号 (|) 表示 ， 同 样 也 有 两 个 操作 数 。 按 位 或 操作 遵循 下 面 这 个 真 值 表 。 



























































第 一 个 数值 的 位 第 二 个 数值 的 位 结 果 
1 1 1 
1 0 1 
0 1 1 
0 0 0 
由 此 可 见 , 按 位 或 操作 在 有 一 个 位 是 1 的 情况 下 就 返回 1, 而 只 有 在 两 个 位 都 是 0 的 情况 下 才 返 回 0。 

















如 果 在 前 面 按 位 与 的 例子 中 对 25 和 3 执行 按 位 或 操作 ， 则 代码 如 下 所 示 : 


var result = 25 | 3; 
alert (result); (727 
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25 与 3 按 位 或 的 结果 是 27: 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


OR = 0000 0000 0000 0000 0000 0000 0001 1011 
这 两 个 数值 的 都 包含 4 个 1， 因 此 可 以 把 每 个 1 直接 放 到 结果 中 。 二 进 制 码 11011 等 于 十 进 制 值 27。 
4. 按 位 异 或 (XOR) 

按 位 异 或 操作 符 由 一 个 插入 符号 (^) 表示 ， 也 有 两 个 操作 数 。 以 下 是 按 位 异 或 的 真 值 对 











Dad 
[e] 


第 一 个 数值 的 位 第 二 个 数值 的 位 结 果 





1 1 0 
1 0 1 
0 1 1 
0 0 0 





按 位 异 或 与 按 位 或 的 不 同 之 处 在 于 ， 这 个 操作 在 两 个 数值 对 应 位 上 只 有 一 个 1 时 才 返 回 1， 如 果 对 
应 的 两 位 都 是 1 或 都 是 0， 则 返回 0。 
对 25 和 3 执行 按 位 异 或 操作 的 代码 如 下 所 示 : 


var result = 25 ^ 3; 
alert (result); //26 
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25 与 3 按 位 异 或 的 结果 是 26， 其 底层 操作 如 下 所 示 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


XOR = 0000 0000 0000 0000 0000 0000 0001 1010 


这 两 个 数值 都 包含 4 个 1, 但 第 一 位 上 则 都 是 1, 因此 结果 的 第 一 位 变 成 了 0。 而 其 他 位 上 的 1 在 另 
一 个 数值 中 都 没有 对 应 的 1， 可 以 直接 放 到 结果 中 。 二 进 制 码 11010 等 于 十 进 制 值 26 ( 注意 这 个 结果 比 
执行 按 位 或 时 小 1 )。 

5. 左 移 

左 移 操 作 符 由 两 个 小 于 号 (<< ) 表示 ， 这 个 操作 符 会 将 数值 的 所 有 位 向 左 移动 指定 的 位 数 。 例 如 ， 


















































如 果 将 数值 2 (二 进 制 码 为 10 ) 向 左 移动 5 位， 结果 就 是 64( 二 进 制 码 为 1000000 )， 代 码 如 下 所 示 : 
var oldValue = 2; // 等 于 二 进 制 的 10 
var newValue = oldValue << 5; // 等 于 二 进 制 的 1000000， 十 进 制 的 64 
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证 


， 在 向 左 移 位 后 ， 原 数值 的 右 侧 多 出 了 5 个 空位 。 左 移 操作 会 以 0 来 填充 这 些 空位 ， 以 便 得 到 
的 结果 是 一 个 完整 的 32 位 二 进 制 数 〈( 见 图 3-2 )。 
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隐藏 的 符号 位 数值 2 
[oTofoToToToToToToToToToToToToToToToToToToToToToToToToToToToTiTo 


将 数值 2 向 左 移动 5 位 〈 得 到 64 ) 








以 0 填充 





3-2 


注意 ， 左 移 不 会 影响 操作 数 的 符号 位 。 换 句 话 说， 如 果 将 -2 向 左 移 动 位， 结果 将 是 -64， 而 非 64。 

6. 有 符号 的 右 移 

有 符号 的 右 移 操作 符 由 两 个 大 于 号 ( >> ) 表示 ， 这 个 操作 符 会 将 数值 向 右 移 动 , 但 保留 符号 位 〈 即 
正 负 号 标记 )。 有 符号 的 右 移 操作 与 左 移 操作 恰好 相反 ， 即 如 果 将 64 向 右 移动 5 位 ， 结 果 将 变 回 2: 


64; // 等 于 二 进 制 的 1000000 
oldValue >> 5; // 等 于 二 进 制 的 10 ， 即 十 进 制 的 2 
































var oldValue 
var newValue 
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同样 ,在 移 位 过 程 中 ， 原 数值 中 也 会 出 现 空位 。 只 不 过 这 次 的 空位 出 现在 原 数值 的 左 侧 、 符 号 位 的 
右 侧 ( 见 图 3-3 )。 而 此 时 ECMAScript 会 用 符号 位 的 值 来 填充 所 有 空位 ， 以 便 得 到 一 个 完整 的 值 。 





隐藏 的 符号 位 数值 64 


0|0|l|0l0l01010l01o10ololololololololololololololol1101010101010 





将 数值 64 向 右 移 动 5 位 ( 得 到 2 ) 
olololololo ofo 0 ofolo ofofo 0 ofo 0 ofolo ofofo ofofo 0 of1 0 





















































以 0 填充 (符号 位 的 值 ) 
3-3 
7. 无 符号 右 移 
无 符号 右 移 操作 符 由 3 个 大 于 号 (>>> ) 表示 ， 这 个 操作 符 会 将 数值 的 所 有 32 位 都 向 右 移 动 。 对 正 
数 来 说 ， 无 符号 右 移 的 结果 与 有 符号 右 移 相同 。 仍 以 前 面 有 符号 右 移 的 代码 为 例 ， 如 果 将 64 无 符号 右 
移 5 位， 结果 仍 然 还 是 2: 


Var oldValue = 64; // 等 于 二 进 制 的 1000000 
虽 var newValue = oldValue >>> 5; // 等 于 二 进 制 的 10 ， 即 十 进 制 的 2 
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但 是 对 负数 来 说 ,情况 就 不 一 样 了 。 首 先 ， 无 符号 右 移 是 以 0 来 填充 空位 ， 而 不 是 像 有 符号 右 移 那 
样 以 符号 位 的 值 来 填充 空位 。 所 以 ,对 正 数 的 无 符号 右 移 与 有 符号 右 移 结果 相同 ,但 对 负数 的 结果 就 不 
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一 样 了 。 其 次 ,无 符号 右 移 操 作 符 会 把 负数 的 二 进 制 码 当 成 正 数 的 二 进 制 码 。 而 且 ， 由 于 负数 以 其 绝对 
值 的 二 进 制 补 码 形式 表示 ， 因 此 就 会 导致 无 符号 右 移 后 的 结果 非常 之 大 ， 如 下 面 的 例子 所 示 : 


var oldVvalue = -64; // 等 于 二 进 制 的 11111111111111111111111111000000 
var newValue = oldValue >>> 5; // 等 于 十 进 制 的 134217726 
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这 里 ， 当 对 -64 执行 无 符号 右 移 5 位 的 操作 后 ， 得 到 的 结果 是 134217726。 之 所 以 结果 如 此 之 大 ， 
是 因为 -64 的 二 进 制 码 为 11111111111111111111111111000000, 而 且 无 符号 右 移 操 作 会 把 这 个 二 进 制 码 当 
成 正 数 的 二 进 制 码 ， 换 算 成 十 进 制 就 是 4294967232 。 如 果 把 这 个 值 右 移 5 位 ， 结 果 就 变 成 了 
00000111111111111111111111111110， 即 十 进 制 的 134217726。 


3.5.3 布尔 操作 符 


在 一 门 编程 语言 中 ,布尔 操作 符 的 重要 性 堪 比 相等 操作 符 。 如 果 没 有 测试 两 个 值 关系 的 能 力 ， 那么 
诸如 if. . .else 和 循环 之 类 的 语句 就 不 会 有 用 武之 地 了 ,布尔 操作 符 一 共有 3 个 : 非 (NOT) 与 (AND) 
和 或 (OR )。 

1. 逻辑 非 

逻辑 非 操 作 符 由 一 个 叹 号 (1 ) 表示 ,可 以 应 用 于 ECMAScript 中 的 任何 值 。 无 论 这 个 值 是 什么 数据 
类 型 ， 这 个 操作 符 都 会 返回 一 个 布尔 值 。 逻 辑 非 操作 符 首 先 会 将 它 的 操作 数 转 换 为 一 个 布尔 值 ， 然 后 再 
对 其 求 反 。 也 就 是 说 ， 逻 辑 非 操作 符 遵循 下 列 规则 : 

口 如 果 操 作 数 是 一 个 对 象 ， 返 回 false; 


















































十 


口 如 果 操 作 数 是 NaN， 返 回 true; 
口 如 果 操 作 数 是 undefined， 返 回 true。 
下 面 几 个 例子 展示 了 应 用 上 述 规则 的 结 


口 如 果 操 作 数 是 一 个 空 字符 串 ， 返 回 true; 
口 如 果 操 作 数 是 一 个 非 空 字符 串 ， 返 回 false; 
口 如 果 操 作 数 是 数值 0， 返回 true; 
口 如 果 操 作 数 是 任意 非 0 数值 (包括 Infinity )， 返 回 false; 
口 如 果 操 作 数 是 nul1， 返 回 true; 
果 
































alert (!false); // true 
alert(!"blue"); // false 
alert(!10); // true 
alert (!NaN); // true 
alert (!""); // true 
alert (!12345); // false 
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逻辑 非 操 作 符 也 可 以 用 于 将 一 个 值 转换 为 与 其 对 应 的 布尔 值 。 而 同时 使 用 两 个 逻辑 非 操 作 符 ,， 实 际 
上 就 会 模拟 Boolean () 转型 函数 的 行为 。 其 中 ， 第 一 个 逻辑 非 操作 会 基于 无 论 什么 操作 数 返 回 一 个 布 
尔 值 ， 而 第 二 个 逻辑 非 操 作 则 对 该 布尔 值 求 反 ， 于 是 就 得 到 了 这 个 值 真正 对 应 的 布尔 值 。 当 然 , 最 终结 
果 与 对 这 个 值 使 用 Boolean () 函数 相同 ， 如 下 面 的 例子 所 示 : 
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alert(!!"blue"); //true 
alert(!!10); //false 
alert (!!NaN); //false 
alert(!!""); //false 
alert(!!12345); //true 
LogicalNotExample02.htm 
2. 逻辑 与 


逻辑 与 操作 符 由 两 个 和 号 〈 gg ) 表示 ， 有 两 个 操作 数 ， 如 下 面 的 例子 所 示 : 


Var result = true && false; 





逻辑 与 的 真 值 表 如 下 : 
第 一 个 操作 数 第 二 个 操作 数 结 果 
人 ze trvue true 
true false false 
false true false 
false false false 


逻辑 与 操作 可 以 应 用 于 任何 类 型 的 操作 数 ， 而 不 仅仅 是 布尔 值 。 在 有 一 个 操作 数 不 是 布尔 值 的 情况 
下 ， 逻 辑 与 操作 就 不 一 定 返回 布尔 值 ; 此 时 ， 它 遵循 下 列 规则 : 
口 如 果 第 一 个 操作 数 是 对 象 ， 则 返回 第 二 个 操作 数 ; 
口 如 果 第 二 个 操作 数 是 对 象 ， 则 只 有 在 第 一 个 操作 数 的 求 值 结果 为 true 的 情况 下 才 会 返回 该 
对 象 ; 
口 如 果 两 个 操作 数 都 是 对 象 ， 则 返回 第 二 个 操作 数 ; 
口 如 果 有 一 个 操作 数 是 nul1， 则 返回 nul11; 
口 如 果 有 一 个 操作 数 是 NaN， 则 返回 NaN; 
口 如 果 有 一 个 操作 数 是 undefined， 则 返回 undqefineq。 

逻辑 与 操作 属于 短路 操作 , 即 如 果 第 一 个 操作 数 能 够 决定 结果 , 那么 就 不 会 再 对 第 二 个 操作 数 求 值 。 
对 于 逻辑 与 操作 而 言 ， 如 果 第 一 个 操作 数 是 false， 则 无 论 第 二 个 操作 数 是 什么 值 ， 结果 都 不 再 可 能 是 
true 了 。 来 看 下 面 的 例子 : 

Var found = true; 


var result = (found && someUndefinedVariable); // 这 里 会 发 生 错误 
alert (result); // 这 一 行 不 会 执行 
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在 上 面 的 代码 中 ， 当 执行 逻辑 与 操作 时 会 发 生 错 误 ， 因 为 变量 someUndefinedVariable 没有 声 
明 。 由 于 变量 found 的 值 是 true， 所 以 逻辑 与 操作 符 会 继续 对 变量 someUndefinedvVvariable 求 值 。 
但 someUnaefinedVariable 尚未 定义 ， 因 此 就 会 导致 错误 。 这 说 明 不 能 在 逻辑 与 操作 中 使 用 未 定义 
的 值 。 如 果 像 下 面 这 个 例 中 一 样 ， 将 founa 的 值 设置 为 false， 就 不 会 发 生 错误 了 : 

var found = false; 


var result = (found && someUndefinedVariapble); // 不 会 发 生 错误 
alert (result); // 会 执行 ("false") 

















LogicalAndExample02.htm 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





46 第 3 章 基本 概念 








在 这 个 例子 中 ， 警 告 框 会 显示 出 来 。 无 论 变量 someUndefinedVariable 有 没有 定义 ， 也 永远 不 
会 对 它 求 值 ， 因 为 第 一 个 操作 数 的 值 是 false。 而 这 也 就 意味 着 逻辑 与 操作 的 结果 必定 是 false, 根本 
用 不 着 再 对 gg 右 侧 的 操作 数 求 值 了 。 在 使 用 逻辑 与 操作 符 时 要 始终 铭记 它 是 一 个 短路 操作 符 。 
























































3. 逻辑 或 

人 逻辑 站 有 靖 人- 线 符号 〈 | | ) 表示 ， 有 两 个 操作 数 ， 如 下 面 的 例子 所 示 

var result = true || false; 

逻辑 或 的 真 值 表 如 下 : 

第 一 个 操作 数 第 二 个 操作 数 结 果 

Txrue true true 
True false true 
false true true 
false false false 








与 逻辑 与 操作 相似 ， 如 果 有 一 个 操作 数 不 是 布尔 值 ， 逻 辑 或 也 不 一 定 返回 布尔 值 ; 此 时 ， 它 遵循 下 
列 规则 : 
口 如 果 第 一 个 操作 数 是 对 象 ， 则 返回 第 一 个 操作 数 ; 
口 如 果 第 一 个 操作 数 的 求 值 结果 为 false， 则 返回 第 二 个 操作 数 ; 
口 如 果 两 个 操作 数 都 是 对 象 ， 则 返回 第 一 个 操作 数 ; 
口 如 果 两 个 操作 数 都 是 aul1， 则 返回 nu11; 
口 如 果 两 个 操作 数 都 是 NaN， 则 返回 NaN; 
口 如 果 两 个 操作 数 都 是 undefined， 则 返回 undefined。 
与 逻辑 与 操作 符 相似 ,让 辑 或 操作 符 也 是 短路 操作 符 。 也 就 是 说 ， 如 果 第 一 个 操作 数 的 求 值 结果 为 
true， 就 不 会 对 第 二 个 操作 数 求 值 了 。 下 面 看 一 个 例子 : 












































var found = true 
CY) var result = (found || someUndefinedVariable); // 不 会 发 生 错误 
alert (result); // 会 执行 ("true") 


LogicalOrExample01.htm 


这 个 例子 跟前 面 的 例子 一 样 , 变量 someUndefinedVariable 也 没有 定义 ,但 是 , 由 于 变量 found 
的 值 是 true， 而 变量 someUndefinedVariable 永远 不 会 被 求 值 ， 因 此 结果 就 会 输出 "true"。 如 果 
像 下 面 这 个 例子 一 样 ， 把 foung 的 值 改 为 false， 就 会 导致 错误 : 


Var found = false; 



































var result = (found || someUndefinedVariable); // 这 里 会 发 生 错误 
alert (result); // 这 一 行 不 会 执行 
LogicalOrExample02.htm 
我 们 可 以 利用 逻辑 或 的 这 一 行为 来 避免 为 变量 赋 null 或 undefined 值 。 例如: 
var myObject = preferredObject || backupObject; 





在 这 个 例子 中 , 变量 J 将 被 赋予 等 号 后 面 两 个 值 中 的 一 个 。 变量 preferredobject 中 包 
含 优先 赋 给 变量 myObject 的 值 ， 变量 backupObject 负责 在 任 preferredObject 中 不 包含 有 效 值 的 
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情况 下 提供 后 备 值 。 如 果 preferredobject 的 值 不 是 nul11， 那 么 它 的 值 将 被 赋 给 myobject; 如 果 
是 nul1, 则 将 backupobject 的 值 赋 给 myobj ectoECMAScript 程序 的 赋值 语句 经 常会 使 用 这 种 模式 ， 
本 书 也 将 采用 这 种 模式 。 


3.5.4 ” 乘 性 操作 符 


ECMAScript 定义 了 3 个 乘 性 操作 符 : 乘法 、 除 法 和 求 模 。 这 些 操作 符 与 Java、C 或 者 Perl 中 的 相 
应 操作 符 用 途 类 似 ， 只 不 过 在 操作 数 为 非 数 值 的 情况 下 会 执行 自动 的 类 型 转换 。 如 果 参 与 乘 性 计算 的 某 
个 操作 数 不 是 数值 ， 后 台 会 先 使 用 Number () 转型 函数 将 其 转换 为 数值 。 也 就 是 说 ， 空 字符 串 将 被 当 作 
0， 布 尔 值 true 将 被 当 作 1。 

1. 乘法 

乘法 操作 符 由 一 个 星 号 (* ) 表示 ， 用 于 计算 两 个 数值 的 乘积 。 其 语法 类 似 于 C， 如 下 面 的 例子 
所 示 : 


var result = 34 * 56; 


在 处 理 特殊 值 的 情况 下 ， 乘 法 操作 符 遵 循 下 列 特殊 的 规则 : 
口 如 果 操 作 数 都 是 数值 ， 执 行 常 规 的 乘法 计算 ， 即 两 个 正 数 或 两 个 负数 相 乘 的 结果 还 是 正 数 ， 而 
如 果 只 有 一 个 操作 数 有 符号 ,那么 结果 就 是 负数 。 如 果 乘 积 超过 了 ECMAScript 数值 的 表示 范围 ， 
则 返回 Infinity 或 -Infinity; 
口 如 果 有 一 个 操作 数 是 NaN， 则 结果 是 NaN; 
口 如 果 是 Infinity 与 0 相 乘 ， 则 结果 是 NaN; 
口 如 果 是 Infinity 与 非 0 数值 相 乘 ， 则 结果 是 Infinity 或 -Infinity， 取 决 于 有 符号 操作 数 
的 符号 ; 
口 如 果 是 Infinity 与 Infinity 相 乘 ， 则 结果 是 Infinity; 
口 如 果 有 一 个 操作 数 不 是 数值 ， 则 在 后 台 调 用 Number () 将 其 转换 为 数值 ， 然 后 再 应 用 上 面 的 
规则 。 
2. 除法 
除法 操作 符 由 一 个 斜 线 符号 (/ ) 表示 ， 执 行 第 二 个 操作 数 除 第 一 个 操作 数 的 计算 ， 如 下 面 的 例子 
所 示 : 























































































































var result = 66 / 11; 


与 乘法 操作 符 类 似 ， 除 法 操作 符 对 特殊 的 值 也 有 特殊 的 处 理 规则 。 这 些 规 则 如 下 : 

口 如 果 操 作 数 都 是 数值 ， 执 行 常 规 的 除法 计算 ， 即 两 个 正 数 或 两 个 负数 相 除 的 结果 还 是 正 数 ， 而 
如 果 只 有 一 个 操作 数 有 符号 ， 那 么 结果 就 是 负数 。 如 果 商 超过 了 ECMAScript 数值 的 表示 范围 ， 
则 返回 Infinity 或 -Infinity; 

口 如 果 有 一 个 操作 数 是 NaN， 则 结果 是 NaN; 

口 如 果 是 Infinity 被 Infinity 除 ， 则 结果 是 NaN; 

口 如 果 是 零 被 零 除 ， 则 结果 是 NaN; 

口 如 果 是 非 零 的 有 限 数 被 零 除 ， 则 结果 是 Infinity 或 -Infinity， 取 决 于 有 符号 操作 数 的 符号 ; 

口 如 果 是 Infinity 被 任何 非 零 数 值 除 ， 则 结果 是 Infinity 或 -Infinity， 取 决 于 有 符号 操作 
数 的 符号 ; 
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口 如 果 有 一 个 操作 数 不 是 数值 ， 则 在 后 台 调用 Number () 将 其 转换 为 数值 ， 然 后 再 应 用 上 面 的 规则 。 





3. 求 模 
求 模 (余数 ) 操作 符 由 一 个 百 分 号 (% ) 表示 ， 用 法 如 下 : 
var result = 26 % 5; // 等 于 工 


与 另外 两 个 乘 性 操作 符 类 似 ， 求 模 操 作 符 会 遵循 下 列 特殊 规则 来 处 理 特殊 的 值 : 
口 如 果 操 作 数 都 是 数值 ， 执 行 常规 的 除法 计算 ， 返 回 除 得 的 余数 ; 

口 如 果 被 除数 是 无 穷 大 值 而 除数 是 有 限 大 的 数值 ， 则 结果 是 NaN; 

口 如 果 被 除数 是 有 限 大 的 数值 而 除数 是 零 ， 则 结果 是 NaN; 
口 如 果 是 Infinity 被 Infinity 除 ， 则 结果 是 NaN; 
口 如 果 被 除数 是 有 限 大 的 数值 而 除数 是 无 穷 大 的 数值 ， 则 结果 是 被 除数 ; 

口 如 果 被 除数 是 零 ， 则 结果 是 零 ; 

口 如 果 有 一 个 操作 数 不 是 数值 ， 则 在 后 台 调 用 Number () 将 其 转换 为 数值 ， 然 后 再 应 用 上 面 的 规则 。 


3.5.5 “加 性 操作 符 


加 法 和 减法 这 两 个 加 性 操作 符 应 该 说 是 编程 语言 中 最 简单 的 算术 操作 符 了 。 但 是 在 ECMAScript 中 ， 
这 两 个 操作 符 却 都 有 一 系列 的 特殊 行为 。 与 乘 性 操作 符 类 似 , 加 性 操作 符 也 会 在 后 台 转 换 不 同 的 数据 类 
型 。 然 而 ， 对 于 加 性 操作 符 而 言 ， 相 应 的 转换 规则 还 稍微 有 点 复杂 。 






















































































1. 加 法 
加 法 操作 符 (+) 的 用 法 如 下 所 示 : 
Var result = 1 + 2; 

















如 果 两 个 操作 符 都 是 数值 ， 执 行 常规 的 加 法 计算 ， 然 后 根据 下 列 规则 返回 结果 : 
口 如 果 有 一 个 操作 数 是 NaN， 则 结果 是 NaN; 
口 如 果 是 Infinity 加 Infinity， 则 结果 是 Infinity; 
口 如 果 是 -Infinity 加 -Infinity， 则 结果 是 -Infinity; 
口 如 果 是 Infinity 加 -Infinity， 则 结果 是 NaN; 
口 如 果 是 +0 加 +0， 则 结果 是 +0; 
口 如 果 是 -0 加 -0， 则 结果 是 -0; 
口 如 果 是 +0 加 -0， 则 结果 是 +0。 
不 过 ， 如 果 有 一 个 操作 数 是 字符 串 ， 那 么 就 要 应 用 如 下 规则 : 
口 如 果 两 个 操作 数 都 是 字符 串 ， 则 将 第 二 个 操作 数 与 第 一 个 操作 数 拼接 起 来 ; 
口 如 果 只 有 一 个 操作 数 是 字符 串 ， 则 将 另 一 个 操作 数 转 换 为 字符 串 ， 然 后 再 将 两 个 字符 串 拼 接 
起 来 。 
如 果 有 一 个 操作 数 是 对 象 、 数 值 或 布尔 值 ， 则 调用 它们 的 tostring () 方 法 取得 相应 的 字符 串 值 ， 
然后 再 应 用 前 面 关 于 字符 串 的 规则 。 对 于 undefined 和 nul1， 则 分 别 调用 string () 函数 并 取得 字符 
串 "undefined" 和 "null"。 

















































































































下 面 来 举 几 个 例子 : 
var result1l = 5 + 5; // 两 个 数值 相 加 
CD alert (result1); /7 10 
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var result2 = 5 + "5"; // 一 个 数值 和 一 个 字符 串 相 加 
alert (result2); J Sn 


AddExample01.htm 
以 上 代码 演示 了 加 法 操作 符 在 两 种 模式 下 的 差别 。 第 一 行 代码 演示 了 正常 的 情况 ， 即 5+5 等 于 10 
(数值 )。 但 是 ， 如 果 将 一 个 操作 数 改 为 字符 串 "5" ， 结 果 就 变 成 了 "55" (字符 串 值 )， 因 为 第 一 个 操作 
数 也 被 转换 成 了 "5"。 
忽视 加 法 操作 中 的 数据 类 型 是 ECMAScript 编程 中 最 常见 的 一 个 错误 。 再 来 看 一 个 例子 : 
































Var numl = 5; 

var num2 = 10; 

Var message = "The sum of 5 and 10 is " + numl + num2; 
alert (message); // "The sum of 5 and 10 is 510" 


AddExample02.htm 








在 这 个 例子 中 ， 变 量 message 的 值 是 执行 两 个 加 法 操作 之 后 的 结果 。 有 人 可 能 以 为 最 后 得 到 的 字 
符 串 是 "rhe sum of 5 and 10 is 15", 但 实际 的 结果 却 是 "The sum of 5 and 10 is 510"。 
之 所 以 会 这 样 ， 是 因为 每 个 加 法 操作 是 独立 执行 的 。 第 一 个 加 法 操作 将 一 个 字符 串 和 一 个 数值 (5 ) 拼 
接 了 起 来 ， 结 果 是 一 个 字符 串 。 而 第 二 个 加 法 操作 又 用 这 个 字符 串 去 加 另 一 个 数值 (10 )， 当 然 也 会 得 
到 一 个 字符 串 。 如 果 想 先 对 数值 执行 算术 计算 ， 然 后 再 将 结果 与 字符 串 拼接 起 来 ， 应 该 像 下 面 这 样 使 用 
圆 括号 : 

















Var numl = 5; 

Var num2 = 10; 

var message = "The sum of 5 and 10 is " + (numl + num2); 
alert (message); //"The sum of 5 and 10 is 15" 


AddExample03.htm 




















在 这 个 例子 中 , 一 对 圆 括号 把 两 个 数值 变量 括 在 了 一 起 ,这样 就 会 告诉 解析 器 先 计 算 其 结果 ， 然 后 
再 将 结果 与 字符 串 拼 接 起 来 。 因 此 ， 就 得 到 了 结果 "The sum of 5 and 10 is 15"。 

2. 减法 

减法 操作 符 〈- ) 是 男 一 个 极为 常用 的 操作 符 ， 其 用 法 如 下 所 示 : 


Var result = 2 - 1; 


与 加 法 操作 符 类 似 ，ECMAScript 中 的 减法 操作 符 在 处 理 各 种 数据 类 型 转换 时 ， 同 样 需要 遵循 一 些 
特殊 规则 ， 如 下 所 示 : 
口 如 果 两 个 操作 符 都 是 数值 ， 则 执行 常规 的 算术 减法 操作 并 返回 结果 ; 
口 如 果 有 一 个 操作 数 是 NaN， 则 结果 是 NaN; 
口 如 果 是 Infinity 减 Infinity， 则 结果 是 NaN; 
口 如 果 是 -Infinity 减 -Infinity， 则 结果 是 NaN; 
口 如 果 是 Infinity 减 -Infinity， 则 结果 是 Infinity; 
口 如 
口 如 果 
口 如 果 






































-Infinity 减 THREINLtEYy, 则 结果 是 -Infinity; 
+0 减 +0， 则 结果 是 +0; 
+0 减 -0， 则 结果 是 -0; 








冶 各 和 湛江 
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口 如 果 是 -0 减 -0， 则 结果 是 +0; 

口 如 果 有 一 个 操作 数 是 字符 串 、 布 尔 值 、nul1 或 undefined, 则 先 在 后 台 调 用 Number () 函数 将 
其 转换 为 数值 ， 然 后 再 根据 前 面 的 规则 执行 减法 计算 。 如 果 转 换 的 结果 是 NaN， 则 减法 的 结果 
就 是 NaN; 

口 如 果 有 一 个 操作 数 是 对 象 ， 则 调用 对 象 的 valueof () 方 法 以 取得 表示 该 对 象 的 数值 。 如 果 得 到 
的 值 是 NaN， 则 减法 的 结果 就 是 NaN。 如 果 对 象 没 有 valueof () 方 法 ， 则 调用 其 tostring () 
方法 并 将 得 到 的 字符 串 转换 为 数值 。 

下 面 几 个 例子 展示 了 上 面 的 规则 ; 

5 - true; // 4， 因 为 true 被 转换 成 了 1 


< 






























































Var result1 


Var result2 NaN - 1; // NaN 
Var result3 5 .33 // 2 
var result4 = 5 - ""; // 5， 因 为 "" 被 转换 成 了 0 


Var result5 
var result6 





; 5 
5 ~ VO // 3， 因 为 "2" 被 转换 成 了 2 
5， 因 为 null 被 转换 成 了 0 


SubtractExample01.htm 


3.5.6 ”关系 操作 符 
小 于 (<)、 大 于 (> )、 小 于 等 于 (<= ) 和 大 于 等 于 (>= ) 这 几 个 关系 操作 符 用 于 对 两 个 值 进行 比 
较 ， 比 较 的 规则 与 我 们 在 数学 课 上 所 学 的 一 样 。 这 几 个 操作 符 都 返回 一 个 布尔 值 ， 如 下 面 的 例子 所 示 : 


Br > 3 //true 
Bb ,3 //false 























Var result1 
Var result2 


RelationalOperatorsExample01.htm 中 包含 本 节 所 有 的 代码 片段 


与 BCMAScript 中 的 其 他 操作 符 一 样 ， 当 关系 操作 符 的 操作 数 使 用 了 非 数值 时 ， 也 要 进行 数据 转换 

或 完成 某 些 奇怪 的 操作 。 以 下 就 是 相应 的 规则 。 

口 如 果 两 个 操作 数 都 是 数值 ， 则 执行 数值 比较 。 

口 如 果 两 个 操作 数 都 是 字符 串 ， 则 比较 两 个 字符 串 对 应 的 字符 编码 值 。 

口 如 果 一 个 操作 数 是 数值 ， 则 将 男 一 个 操作 数 转 换 为 一 个 数值 ， 然 后 执行 数值 比较 。 

口 如 果 一 个 操作 数 是 对 象 ， 则 调用 这 个 对 象 的 valueof () 方 法 ， 用 得 到 的 结果 按照 前 面 的 规则 执 
行 比较 。 如 果 对 象 没有 valueof () 方 法 ， 则 调用 tostring () 方 法 ， 并 用 得 到 的 结果 根据 前 面 
的 规则 执行 比较 。 

口 如 果 一 个 操作 数 是 布尔 值 ， 则 先 将 其 转换 为 数值 ， 然 后 再 执行 比较 。 
在 使 用 关系 操作 符 比较 两 个 字符 串 时 , 会 执行 一 种 奇怪 的 操作 。 很 多 人 都 会 认为 ,在 比较 字符 串 值 

时 ,小 于 的 意思 是 “在 字母 表 中 的 位 置 靠 前 ”"， 而 大 于 则 意味 着 “在 字母 表 中 的 位 置 靠 后 ”, 但 实际 上 完 

全 不 是 那么 回 事 。 在 比较 字符 串 时 ,实际 比较 的 是 两 个 字符 串 中 对 应 位 置 的 每 个 字符 的 字符 编码 值 。 经 

过 这 么 一 番 比 较 之 后 ,再 返回 一 个 布尔 值 。 由 于 大 写字 母 的 字符 编码 全 部 小 于 小 写字 母 的 字符 编码 ， 

此 我 们 就 会 看 到 如 下 所 示 的 奇怪 现象 : 


var result = "Brick" < "alphabet"; //true 
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在 这 个 例子 中 ,字符 串 "Brick" 被 认为 小 于 字符 串 "alphabet"。 原 因 是 字母 B 的 字符 编码 为 66， 
而 字母 a 的 字符 编码 是 97。 如 果 要 真正 按 字母 表 顺 序 比较 字符 串 , 就 必须 把 两 个 操作 数 转 换 为 相同 的 大 
小 写 形式 〈 全 部 大 写 或 全 部 小 写 )， 然 后 再 执行 比较 ， 如 下 所 示 : 






































Var result = "Brick".toLowerCase() < "alphabet" .toLowerCase(); //false 

通过 将 两 个 操作 数 都 转换 为 小 写 形式 ， 就 可 以 得 出 "alphabet" 按 字母 表 顺 序 排 在 "Brick" 之 前 的 
正确 判断 了 。 

另 一 种 奇怪 的 现象 发 生 在 比较 两 个 数字 字符 串 的 情况 下 ， 比 如 下 面 这 个 例子 : 

Var result = "23" < "3"; //true 





确实 ， 当 比较 字符 串 "23 "是 否 小 于 "3 "时 ， 结 果 居 然 是 true。 这 是 因为 两 个 操作 数 都 是 字符 串 ， 
而 字符 串 比较 的 是 字符 编码 ("2" 的 字符 编码 是 50， 而 "3 "的 字符 编码 是 51 )。 不 过 ， 如 果 像 下 面 例子 
中 一 样 ， 将 一 个 操作 数 改 为 数值 ， 比 较 的 结果 就 正常 了 : 

Var result = "23" < 3; //false 

此 时 ， 字 符 串 "23" 会 被 转换 成 数值 23 ， 然 后 再 与 3 进行 比较 ， 因 此 就 会 得 到 合理 的 结果 。 在 比较 
数值 和 字符 串 时 ， 字 符 串 都 会 被 转换 成 数值 ， 然 后 再 以 数值 方式 与 男 一 个 数值 比较 。 当 然 ， 这 个 规则 对 
前 面 的 例子 是 适用 的 。 可 是 ， 如 果 那 个 字符 串 不 能 被 转换 成 一 个 合理 的 数值 呢 ? 比如 : 
Var result = "a" < 3; // false， 因 为 "a" 被 转换 成 了 NaN 
1 于 字母 "a'" 不 能 转换 成 合理 的 数值 ， 因 此 就 被 转换 成 了 NaN。 根 据 规则， 任何 操作 数 与 NaN 进行 
关系 比较 ， 结 果 都 是 false。 于 是 ， 就 出 现 了 下 面 这 个 有 意思 的 现象 : 


Var resultl1 = NaN < 3; //false 
Var result2 = NaN >= 3; //false 


按照 常理 , 如 果 一 个 值 不 小 于 另 一 个 值 , 则 一 定 是 大 于 或 等 于 那个 值 。 然而 , 在 与 NaN 进行 比较 时 ， 
这 两 个 比较 操作 的 结果 都 返回 了 false。 


3.5.7 ”相等 操作 符 


确定 两 个 变量 是 否 相等 是 编程 中 的 一 个 非常 重要 的 操作 ,在 比较 字符 串 、 数 值 和 布尔 值 的 相等 性 时 ， 
问题 还 比较 简单 。 但 在 涉及 到 对 象 的 比较 时 ， 问 题 就 变 得 复杂 了 。 最 早 的 ECMAScript 中 的 相等 和 不 等 
操作 符 会 在 执行 比较 之 前 ， 先 将 对 象 转换 成 相似 的 类 型 。 后 来 ， 有 人 提出 了 这 种 转换 到 底 是 否 合理 的 质 
疑 。 最 后 ，ECMAScript 的 解决 方案 就 是 提供 两 组 操作 符 : 相等 和 不 相等 一 一 先 转换 再 比较 ， 全 等 和 不 
全 等 一 一 仅 比 较 而 不 转换 。 

1. 相等 和 不 相等 

ECMAScript 中 的 相等 操作 符 由 两 个 等 于 号 ( == ) 表示 ， 如 果 两 个 操作 数 相 等 ， 则 返回 true。 而 不 
相等 操作 符 由 叹 号 后 跟 等 于 号 ( != ) 表示 ， 如 果 两 个 操作 数 不 相等 ， 则 返回 true。 这 两 个 操作 符 都 会 
先 转换 操作 数 ( 通常 称 为 强制 转型 )， 然 后 再 比较 它们 的 相等 性 。 

在 转换 不 同 的 数据 类 型 时 ， 相 等 和 不 相等 操作 符 遵循 下 列 基本 规则 : 

口 如 果 有 一 个 操作 数 是 布尔 值 ， 则 在 比较 相等 性 之 前 先 将 其 转换 为 数值 一 一 false 转换 为 0， 而 

true 转换 为 1; 
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口 如 果 一 个 操作 数 是 字符 串 ， 男 一 个 操作 数 是 数值 ， 在 比较 相等 性 之 前 先 将 字符 串 转 换 为 数值 ; 

口 如 果 一 个 操作 数 是 对 象 ， 另 一 个 操作 数 不 是 ， 则 调用 对 象 的 valueof () 方 法 ， 用 得 到 的 基本 类 
型 值 按照 前 面 的 规则 进行 比较 ; 

这 两 个 操作 符 在 进行 比较 时 则 要 遵循 下 列 规则 。 

口 null 和 undefined 是 相等 的 。 

口 要 比较 相等 性 之 前 ， 不 能 将 null 和 undefined 转换 成 其 他 任何 值 。 

口 如 果 有 一 个 操作 数 是 NaN， 则 相等 操作 符 返 回 false， 而 不 相等 操作 符 返 回 true。 重 要 提示 : 

即使 两 个 操作 数 都 是 NaN， 相 等 操作 符 也 返回 false; 因为 按照 规则 ，NaN 不 等 于 NaN。 

口 如 果 两 个 操作 数 都 是 对 象 , 则 比较 它们 是 不 是 同一 个 对 象 。 如 果 两 个 操作 数 都 指向 同一 个 对 象 ， 
则 相等 操作 符 返 回 true; 和 否则， 返回 false。 

下 表 列 出 了 一 些 特 殊 情况 及 比较 结果 
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表 达 式 值 表 达 式 值 
null == undefined true true == 1 true 
"NaN" == NaN false true == 2 false 
5 == NaN false undefined == 0 false 
NaN == NaN false null == 0 false 
NaN != NaN true "5"==5 Erae 
false == 0 true 





2. 全 等 和 不 全 等 
除了 在 比较 之 前 不 转换 操作 数 之 外 ,全 等 和 不 全 等 操作 符 与 相等 和 不 相等 操作 符 没 有 什么 区 别 。 全 



































等 操作 符 由 3 个 等 于 号 ( === ) 表示 , 它 只 在 两 个 操作 数 未 经 转换 就 相等 的 情况 下 返回 true， 如 下 面 的 
例子 所 示 : 


Var result1 
Var result2 





//true， 因 为 转换 后 相等 
//false， 因 为 不 同 的 数据 类 型 不 相等 


中 中 
Un 
Un 
Nl 
中 灿 
ll 
Un Un 
On 


EqualityOperatorsExample02.htm 


在 这 个 例子 中 , 第 一 个 比较 使 用 的 是 相等 操作 符 比 较 字 符 串 "55" 和 数值 55, 结果 返回 了 true。 如 
前 所 述 ， 这 是 因为 字符 串 "55" 先 被 转换 成 了 数值 S5 ， 然 后 再 与 另 一 个 数值 55 进行 比较 。 第 二 个 比较 使 
用 了 全 等 操作 符 以 不 转换 数值 的 方式 比较 同样 的 字符 串 和 值 。 在 不 转换 的 情况 下 , 字符 串 当 然 不 等 于 数 
值 ， 因 此 结果 就 是 false。 
不 全 等 操作 符 由 一 个 叹 号 后 跟 两 个 等 于 号 ( !== ) 表示 ， 它 在 两 个 操作 数 未 经 转换 就 不 相等 的 情况 












































下 返回 true。 例 如 : 
var resultl1 = ("55" != 55); //false， 因 为 转换 后 相等 
var result2 = ("55" 1== 55); //true， 因 为 不 同 的 数据 类 型 不 相等 


EqualityOperatorsExample03.htm 


在 这 个 例子 中 ， 第 一 个 比较 使 用 了 不 相等 操作 符 ， 而 该 操作 符 会 将 字符 串 "55" 转 换 成 55， 结 果 就 
与 第 二 个 操作 数 (也 是 55 ) 相等 了 。 而 由 于 这 两 个 操作 数 被 认为 相等 ， 因 此 就 返回 了 false。 第 二 个 
比较 使 用 了 不 全 等 操作 符 。 假 如 我 们 这 样 想 : 字符 串 55 与 数值 5$ 不 相同 吗 ?” ,那么 答案 一 定 是 : 是 的 
(true )。 

记 住 : null == undefined 会 返回 true， 因 为 它们 是 类 似 的 值 ; 但 null === undefined 会 返 
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回 false， 因为 它们 是 不 同类 型 的 值 。 


由 于 相等 和 不 相等 操作 符 存 在 类 型 转换 问题 , 而 为 了 保持 代码 中 数据 类 型 的 完整 


性 ， 我 们 推荐 使 用 全 等 和 不 全 等 操作 符 。 





3.5.8 条 件 操作 符 


条 件 操作 符 应 该 算是 ECMAScript 中 最 灵活 的 一 种 操作 符 了 , 而 且 它 遵循 与 Java 中 的 条 件 操作 符 相 gE 
同 的 语法 形式 ， 如 下 面 的 例子 所 示 : 

variable = boolean expression ? true value : false value; 

本 质 上 ， 这 行 代码 的 含义 就 是 基于 对 boolean_expression 求 值 的 结果 ， 决定 给 变量 variable 
赋 什 么 值 。 如 果 求 值 结 果 为 true， 则 给 变量 variable 赋 true_value 值 ; 如果 求 值 结果 为 false， 
则 给 变量 variable 赋 false_value 值 。 再 看 一 个 例子 : 












































var max = (numl > num2) ? numl : num2; 


在 这 个 例子 中 ，max 中 将 会 保存 一 个 最 大 的 值 。 这 个 表达 式 的 意思 是 : 如 果 numl 大 于 num2 ( 关 
系 表 达 式 返回 true ), 则 将 numl 的 值 赋 给 max; 如 果 numl 小 于 或 等 于 num2( 关系 表达 式 返回 false )， 
则 将 num2 的 值 赋 给 max。 


3.5.9 赋值 操作 符 
简单 的 赋值 操作 符 由 等 于 号 ( = ) 表示 , 其 作用 就 是 把 右 侧 的 值 赋 给 左 侧 的 变量 , 如 下 面 的 例子 所 示 ， 


Var num = 10; 
如 果 在 等 于 号 (= ) 前 面 再 添加 乘 性 操作 符 、 加 性 操作 符 或 位 操作 符 ， 就 可 以 完成 复合 赋值 操作 。 
这 种 复合 赋值 操作 相当 于 是 对 下 面 常规 表达 式 的 简写 形式 : 


Var num = 10; 
num = num + 10; 


其 中 的 第 二 行 代码 可 以 用 一 个 复合 赋值 来 代替 : 


Var num = 10; 
num += 10; 


每 个 主要 算术 操作 符 ( 以 及 个 别 的 其 他 操作 符 ) 都 有 对 应 的 复合 赋值 操作 符 。 这些 操 作 符 如 下 所 示 : 
口 乘 /赋值 (*= ); 

口 除 /赋值 ( /=); 

口 模 / 赋 值 (g%= ); 

口 加 /赋值 (+= ); 

口 减 /赋值 (-= ); 

口 左 移 /赋值 (<<= ); 

口 有 符号 右 移 /赋值 (>>= ); 
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口 无 符号 右 移 /赋值 ( >>>= )。 
设计 这 些 操作 符 的 主要 目的 就 是 简化 赋值 操作 。 使 用 它们 不 会 带 来 任何 性 能 的 提升 。 








3.5.10 ”逗号 操作 符 

使 用 逗号 操作 符 可 以 在 一 条 语句 中 执行 多 个 操作 ， 如 下 面 的 例子 所 示 : 

Var numl=1, num2=2, num3=3; 

逗号 操作 符 多 用 于 声明 多 个 变量 ; 但 除 此 之 外 ,逗号 操作 符 还 可 以 用 于 赋值 。 在 用 于 赋值 时 ,逗号 
操作 符 总 会 返回 表达 式 中 的 最 后 一 项 ， 如 下 面 的 例子 所 示 : 

Var num = (5，1，4，8，0); // num 的 值 为 0 

由 于 0 是 表达 式 中 的 最 后 一 项 ， 因 此 num 的 值 就 是 0。 虽然 逗号 的 这 种 使 用 方式 并 不 常见 , 但 这 个 
例子 可 以 帮 有 我 们 理解 逗号 的 这 种 行为 。 


3.6 语句 
ECMA-262 规定 了 一 组 语句 (也 称 为 流 控 制 语 句 )。 从 本 质 上 看 , 语句 定义 了 ECMAScript 中 的 主要 


语法 ,语句 通常 使 用 一 或 多 个 关键 字 来 完成 给 定 任务 。 语 句 可 以 很 简单 ,例如 通知 函数 退出 ; 也 可 以 比 
较 复杂 ， 例 如 指定 重复 执行 某 个 命令 的 次 数 。 

















3.6.1 ”if 语句 

大 多 数 编程 语言 中 最 为 常用 的 一 个 语句 就 是 if 语句。 以 下 是 if 语句 的 语法 : 

if (condition) statementl1 else statement2 
其 中 的 condition ( 条件 ) 可 以 是 任意 表达 式 ; 而 且 对 这 个 表达 式 求 值 的 结果 不 一 定 是 布尔 值 。 
ECMAScript 会 自动 调用 Boolean () 转换 函数 将 这 个 表达 式 的 结果 转换 为 一 个 布尔 值 。 如 果 对 condition 
求 值 的 结果 是 true, 则 执行 statement1( 语句 1 ), 如果 对 condition 求 值 的 结果 是 false, 则 执行 statement2 
(语句 2) 而 且 这 两 个 语句 既 可 以 是 一 行 代码 , 也 可 以 是 一 个 代码 块 ( 以 一 对 花 括 号 括 起 来 的 多 行 代码 )。 
请 看 下 面 的 例子 。 



























































了 下、 (时 > 5) 
() alert ("Greater than 25."); // 单行 语句 
else { 
alert ("Less than or equal to 25."); // 代码 块 中 的 语句 


} 
StatementExample01.htm 


不 过 ,业界 普遍 推崇 的 最 佳 实践 是 始终 使 用 代码 块 ， 即 使 要 执行 的 只 有 一 行 代码 。 因 为 这 样 可 以 消 
除 人 们 的 误解 ， 否 则 可 能 让 人 分 不 清 在 不 同 条 件 下 要 执行 哪些 语句 。 
男 外 ， 也 可 以 像 下 面 这 样 把 整个 if 语句 写 在 一 行 代码 中 : 


if (condition1) statementl1 else if (condition2) statement2 else statement3 
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但 我 们 推荐 的 做 法 则 是 像 下 面 这 样 : 


半生 区 旋 5) 二 
alert ("Greater than 25."); 
} else if (i < 0) { 
alert("Less than 0."); 
} else { 
alert ("Between 0 and 25, inclusive."); 
} 


TfStatementExample02.htm = 


3.6.2 do-while 语 句 


do-while 语句 是 一 种 后 测试 循环 语句 ， 即 只 有 在 循环 体 中 的 代码 执行 之 后 ， 才 会 测试 出 口 条 件 。 
换 句 话 说， 在 对 条 件 表 达 式 求 值 之 前 ， 循 环 体内 的 代码 至 少 会 被 执行 一 次 。 以 下 是 do-while 语句 的 
语法 : 

do { 


statement 
} while (expression); 


下 面 是 一 个 示例 : 
var i = 0; 
do { 

i += 2; 


} while (i < 10); 


alert (i); 


DoWhileStatementExample01.htm 


在 这 个 例子 中 ,只 要 变量 i 的 值 小 于 10, 循环 就 会 一 直 继续 下 去 。 而 且 变 量 i 的 值 最 初 为 0, 每 次 
循环 都 会 递增 2。 








像 do-while 这 种 后 测试 循环 语句 最 常用 于 循环 体 中 的 代码 至 少 要 被 执行 一 次 的 


情形 。 





3.6.3” while 语句 


while 语句 属于 前 测试 循环 语句 , 也 就 是 说 , 在 循环 体内 的 代码 被 执行 之 前 , 就 会 对 出 口 条 件 求 值 。 
此 ,循环 体内 的 代码 有 可 能 永远 不 会 被 执行 。 以 下 是 while 语句 的 语法 : 
while(expression) statement 


下 面 是 一 个 示例 : 








Var I = "0; 
while (i < 10) { 
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在 这 个 例子 中 ,变量 i 开始 时 的 值 为 0， 每 次 循环 都 会 递增 2。 而 只 要 i 的 值 小 于 10, 循环 就 会 继 
续 下 去 。 








3.6.4 ”for 语 名 





for 语句 也 是 一 种 前 测试 循环 语句 , 但 它 具 有 在 执行 循环 之 前 初始 化 变量 和 定义 循环 后 要 执行 的 代 
人 码 的 能 力 。 以 下 是 for 语句 的 语法 : 
for (initialization; expression; post-loop-expression) statement 
下 面 是 一 个 示例 : 
Var count = 10; 
全 


EO (SEE 于 
alert( 














i < count; i++){ 





} 


ForStatementExample01.htm 

以 上 代码 定义 了 变量 i 的 初始 值 为 0。 只 有 当 条 件 表 达 式 〈i<count ) 返回 true 的 情况 下 才 会 进 

入 for 循环 ,因此 也 有 可 能 不 会 执行 循环 体 中 的 代码 。 如 果 执 行 了 循环 体 中 的 代码 , 则 一 定 会 对 循环 后 
的 表达 式 (i++ ) 求 值 ， 即 递增 i 的 值 。 这 个 for 循环 语句 与 下 面 的 while 语句 的 功能 相同 : 


Var count = 10; 
Va 1 二 05 
while (i < count){ 
alert (i); 
i++; 


} 


使 用 while 循环 做 不 到 的 ,使 用 for 循环 同样 也 做 不 到 。 也 就 是 说 ，for 循环 只 是 把 与 循环 有 关 
的 代码 集中 在 了 一 个 位 置 。 

有 必要 指出 的 是 ,在 for 循环 的 变量 初始 化 表达 式 中 ， 也 可 以 不 使 用 var 关键 字 。 该 变量 的 初始 
化 可 以 在 外 部 执行 ， 例 如 : 

var count = 10; 


for (i = 0; i < count; i++){ 
alert (i); 











} 


ForStatementExample02.htm 


以 上 代码 与 在 循环 初始 化 表达 式 中 声明 变量 的 效果 是 一 样 的 。 由 于 ECMAScript 中 不 存在 块 级 作用 





域 (第 4 章 将 进一步 讨论 这 一 点 )， 因 此 在 循环 内 部 定义 的 变量 也 可 以 在 外 部 访问 到 。 例 如 : 
Var count = 10; 
for (var 1 = 0 1 < count; i144+)4 
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alert (i); 
} 
alert (i); //10 


ForStatementExample03.htm 
在 这 个 例子 中 ,会 有 一 个 警告 框 显示 循环 完成 后 变量 i 的 值 ， 这 个 值 是 10。 这 是 因为 ， 即 使 i 是 
在 循环 内 部 定义 的 一 个 变量 ,但 在 循环 外 部 仍然 可 以 访问 到 它 。 
此 外 ，for 语句 中 的 初始 化 表达 式 、 控 制 表 达 式 和 循环 后 表达 式 都 是 可 选 的 。 将 这 三 个 表达 式 全 部 
省 略 ， 就 会 创建 一 个 无 限 循环 ， 例 如 : 


EOE (>) // 无 限 循环 
doSomething (); 
































} 
而 只 给 出 控制 表达 式 实际 上 就 把 for 循环 转换 成 了 while 循环 ， 例 如 : 


Var count = 10; 

var i = 0; 

fo (Fw 1 < "COU ){ 
alert (i); 
i++; 
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1 于 for 语句 存在 极 大 的 灵活 性 ， 因 此 它 也 是 ECMAScript 中 最 常用 的 一 个 语句 。 





3.6.5 ”for-in 语 句 


for-in 语句 是 一 种 精准 的 迭代 语句 ， 可 以 用 来 枚 举 对 象 的 属性 。 以 下 是 for-in 语句 的 语法 : 
for (property in expression) statement 
下 面 是 一 个 示例 : 


for (var propName in window) { 
document .write (propName); 





} 
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在 这 个 例子 中 ， 我 们 使 用 for-in 循环 来 显示 了 BOM 中 window 对 象 的 所 有 属性 。 每 次 执行 循环 
时 ， 都 会 将 window 对 象 中 存在 的 一 个 属性 名 赋值 给 变量 propName。 这 个 过 程 会 一 直 持 续 到 对 象 中 的 
所 有 属性 都 被 枚 举 一 遍 为 止 。 与 for 语句 类 似 ， 这 里 控制 语句 中 的 var 操作 符 也 不 是 必需 的 。 但 是 ， 
为 了 保证 使 用 局 部 变量 ， 我 们 推荐 上 面 例子 中 的 这 种 做 法 。 

ECMAScript 对 象 的 属性 没有 顺序 。 因 此 ， 通 过 for-in 循环 输出 的 属性 名 的 顺序 是 不 可 预测 的 。 
具体 来 讲 ， 所 有 属性 都 会 被 返回 一 次 ， 但 返回 的 先后 次 序 可 能 会 因 浏览 器 而 异 。 

但 是 ， 如 果 表 示 要 迭代 的 对 象 的 变量 值 为 null 或 undefined，for-in 语句 会 抛 出 错误 。 
ECMAScript5 更 正 了 这 一 行为 ; 对 这 种 情况 不 再 抛 出 错误 ， 而 只 是 不 执行 循环 体 。 为 了 保证 最 大 限度 的 
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兼容 性 ， 建 议 在 使 用 for-in 循环 之 前 ， 先 检测 确认 该 对 象 的 值 不 是 null 或 undefineqd。 


Safari 3 以 前 版 本 的 for-in 语句 中 存在 一 个 bug, 该 bug 会 导致 某 些 属性 被 返回 


两 次 。 





3.6.6 ”label 语 句 
使 用 1abel 语句 可 以 在 代码 中 添加 标签 ， 以 便 将 来 使 用 。 以 下 是 lapel 语句 的 语法 : 


label: statement 


下 面 是 一 个 示例 : 














start: for (var i=0; i < count; i++) { 
alert (i); 


} 


这 个 例子 中 定义 的 start 标签 可 以 在 将 来 由 break 或 continue 语句 引用 。 加 标签 的 语句 一 般 都 
要 与 foxr 语句 等 循环 语句 配合 使 用 。 


3.6.7 break 和 continue 语 人 句 














break 和 continue 语句 用 于 在 循环 中 精确 地 控制 代码 的 执行 ,其 中 ,break 语句 会 立即 退出 循环 ， 
强制 继续 执行 循环 后 面 的 语句 。 而 continue 语句 虽然 也 是 立即 退出 循环 , 但 退出 循环 后 会 从 循环 的 顶 
部 继续 执行 。 请 看 下 面 的 例子 : 


个 var num = 0; 


for (var i=1; i < 10; i++) { 

















if (1 %$ 5 == 0) { 
break; 
} 
num++; 
} 
alert (num); //4 
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这 个 例子 中 的 for 循环 会 将 变量 i 由 1 递增 至 10。 在 循环 体内 ， 有 一 个 if 语句 检查 i 的 值 是 否 

可 以 被 5 整除 (使 用 求 模 操作 符 )。 如 果 是 ， 则 执行 preak 语句 退出 循环 。 另 一 方面 ,变量 num 从 0 开 

台 ， 用 于 记录 循环 执行 的 次 数 。 在 执行 break 语句 之 后 ， 要 执行 的 下 一 行 代 码 是 alert () 函数 ， 结 果 

显示 4。 也 就 是 说 ， 在 变量 i 等 于 5 时 ,循环 总 共 执行 了 4 次 ; 而 break 语句 的 执行 ， 导 致 了 循环 在 
num 再 次 递增 之 前 就 退出 了 。 如 果 在 这 里 把 break 替换 为 continue 的 话 ， 则 可 以 看 到 另 一 种 结 


Var num = 0; 


for (var i=1; 1 < 10; i++) { 
if (i % 5 :== 0) { 
continue; 


























} 
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nuUum++; 


} 


alert (num); //8 
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例子 的 结果 显示 8， 也 就 是 循环 总 共 执行 了 8 次。 当 变 量 i 等 于 5 时 , 循环 会 在 num 再 次 递增 之 前 
退出 ,但 接 下 来 执行 的 是 下 一 次 循环 ， 即 i 的 值 等 于 6 的 循环 。 于 是 ,循环 又 继续 执行 ， 直 到 i 等 于 
10 时 自然 结束 。 而 num 的 最 终 值 之 所 以 是 8， 是 因为 continue 语句 导致 它 少 递增 了 一 次 。 
break 和 continue 语句 都 可 以 与 label 语句 联合 使 用 ， 从 而 返回 代码 中 特定 的 位 置 。 这 种 联合 
使 用 的 情况 多 发 生 在 循环 召 套 的 情况 下 ， 如 下 面 的 例子 所 示 : 


Var num = 0; 




















outermost: 
for (var i=0; i < 10; i++) { 
for (var j=0; j < 10; j++) { 
if (i == 5 && j == 5) 1{ 
break outermost; 
} 


num++; 
} 


alert (num); /35 
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在 这 个 例子 中 ，outermost 标签 表示 外 部 的 for 语句 。 如 果 每 个 循环 正常 执行 10 次 ， 则 num++ 
语句 就 会 正常 执行 100 次 。 换 句 话说， 如 果 两 个 循环 都 自然 结束 ，num 的 值 应 该 是 100。 但 内 部 循环 中 
的 break 语句 带 了 一 个 参数 : 要 返回 到 的 标签 。 添 加 这 个 标签 的 结果 将 导致 break 语句 不 仅 会 退出 内 
部 的 for 语句 (即使 用 变量 j 的 循环 )， 而 且 也 会 退出 外 部 的 for 语句 (即使 用 变量 i 的 循环 )。 为 此 ， 
当 变 量 i 和 j 都 等 于 5 时 ，num 的 值 正好 是 55。 同 样 ，continue 语句 也 可 以 像 这 样 与 1abel 话 句 联 
用 ， 如 下 面 的 例子 所 示 : 


Var num = 0; 














outermost: 
for (var i=0; i < 10; i++) { 
for (var j=0; j < 10; j++) { 
二 下 ( 攻 “ 三 三 区 E- 可 -三 E 5) 区 
continue outermost; 
} 


nuUum++; 
} 


alert (num); 大 /95 
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在 这 种 情况 下 ，continue 语句 会 强制 继续 执行 循环 一 一 退出 内 部 循环 ， 执 行 外 部 循环 。 当 j 是 5 
时 ，continue 语句 执行 ， 而 这 也 就 意味 着 内 部 循环 少 执行 了 5 次 ， 因 此 num 的 结果 是 95。 

虽然 联 用 break、continue 和 label 语句 能 够 执行 复杂 的 操作 ， 但 如 果 使 用 过 度 ， 也 会 给 调试 
人 带 来 麻烦 。 在 此 ， 我 们 建议 如 果 使 用 label 语句 ,一 定 要 使 用 描述 性 的 标签 ， 同 时 不 要 骨 套 过 多 的 循环 。 


3.6.8 with 语句 


with 语句 的 作用 是 将 代码 的 作用 域 设置 到 一 个 特定 的 对 象 中 。with 语句 的 语法 如 下 : 
with (expression) statement; 


定义 with 语句 的 目的 主要 是 为 了 简化 多 次 编写 同一 个 对 象 的 工作 ， 如 下 面 的 例子 所 示 : 














Var qs = location.search.substring(1); 
var hostName = location.hostname; 
var url = location.href; 














上 面 几 行 代码 都 包含 1ocation 对 象 。 如 果 使 用 with 语句 ， 可 以 把 上 面 的 代码 改写 成 如 下 所 示 : 


with(location)t{ 
var qs = search.substring(1); 
var hostName = hostname; 
Var url = href; 
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在 这 个 重 写 后 的 例子 中 ,使 用 with 语句 关联 了 location 对 象 。 这 意味 着 在 with 语句 的 代码 块 
内 部 ， 每 个 变量 首先 被 认为 是 一 个 局 部 变量 ， 而 如 果 在 局 部 环境 中 找 不 到 该 变量 的 定义 ， 就 会 查询 
location 对 象 中 是 否 有 同名 的 属性 。 如果 发 现 了 同名 属性 , 则 以 1ocation 对 象 属性 的 值 作为 变量 的 值 。 
严格 模式 下 不 允许 使 用 with 语句 ， 否 则 将 视 为 语法 错误 。 






































由 于 大 量 使 用 with 语句 会 导致 性 能 下 降 ， 同 时 也 会 给 调试 代码 造成 国难 ， 因 此 


在 开发 大 型 应 用 程序 时 ， 不 建议 使 用 with 语句。 





3.6.9 switch 语句 





switch 语句 与 ifE 语句 的 关系 最 为 密切 ， 而 且 也 是 在 其 他 语言 中 普遍 使 用 的 一 种 流 控 制 语句 。 
ECMAScript 中 switch 语句 的 语法 与 其 他 基于 C 的 语言 非常 接近 ， 如 下 所 示 : 


Switch (expression) { 

case value: statement 
break; 

case Value: statement 
break; 

case value: statement 
break; 

case value: statement 
break; 
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default: statement 


switch 语句 中 的 每 一 种 情形 ( case ) 的 含义 是 :“ 如 果 表 达 式 等 于 这 个 值 (value )， 则 执行 后 面 的 
语句 (statement )”。 而 break 关键 字 会 导致 代码 执行 流 跳出 switch 语句 。 如 果 省 略 break 关键 字 ， 
就 会 导致 执行 完 当 前 case 后 ， 继 续 执行 下 一 个 case。 最 后 的 aefault 关键 字 则 用 于 在 表达 式 不 匹配 前 
面 任何 一 种 情形 的 时 候 ， 执 行 机 动 代码 ( 因此 ， 也 相当 于 一 个 else 语句 )。 

从 根本 上 讲 ，switch 语句 就 是 为 了 让 开发 人 员 免 于 编写 像 下 面 这 样 的 代码 : 





























王 下 区 竺 三 研 多 时 
alert ("25"); 

} else if (i == 35) { 
alert ("35"); 

} else if (i == 45) { 
alert("45"); 

} else { 


alert ("Other"); 
} 


而 与 此 等 价 的 switch 语句 如 下 所 示 : 


switch (i) { 

case 25: 
alert ("25"); 
break; 
case 35: 
alert ("35"); 
break; 
case 45: 
alert("45"); 
break; 
default: 
alert ("Other"); 
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通过 为 每 个 case 后 面 都 添加 一 个 break 语句 ， 就 可 以 避免 同时 执行 多 个 case 代码 的 情况 。 假 如 确 
实 需要 混合 几 种 情形 ， 不 要 忘 了 在 代码 中 添加 注释 ， 说 明 你 是 有 意 省 略 了 break 关键 字 ， 如 下 所 示 : 


Switch (i) { 

case 25: 
/* 合并 两 种 情形 */ 

case 35: 
alert("25 0r .35"); 
break; 

case 45: 
alert ("45"); 
break; 

default: 
alert ("Other"); 
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虽然 ECMAScript 中 的 switch 语句 借鉴 自 其 他 语言 ， 但 这 个 语句 也 有 自己 的 特色 。 首 先 ， 可 以 在 
switch 语句 中 使 用 任何 数据 类 型 ( 在 很 多 其 他 语言 中 只 能 使 用 数值 ), 无 论 是 字符 串 ,， 还 是 对 象 都 没有 
问题 。 其 次 ， 每 个 case 的 值 不 一 定 是 常量 ， 可 以 是 变量 ， 甚 至 是 表达 式 。 请 看 下 面 这 个 例子 : 


Switch ("hello world") { 

case "hello" + " world": 
alert ("Greeting was found."); 
break; 

case "goodbye": 
alert ("Closing was found."); 
break; 

default: 
alert ("Unexpected message was found."); 
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在 这 个 例子 中 ，switch 语句 使 用 的 就 是 字符 串 。 其 中 ， 第 一 种 情形 实际 上 是 一 个 对 字符 串 拼 接 操 
作 求 值 的 表达 式 。 由 于 这 个 字符 串 拼 接 表达 式 的 结果 与 switch 的 参数 相等 ， 因 此 结果 就 会 显示 
"Greeting was found."。 而 且 , 使 用 表达 式 作 为 case 值 还 可 以 实现 下 列 操作 


Var num = 25; 
“) switch (true) { 

case num < 0: 
alert ("Less than 0."); 
break; 

case num >= 0 && num <= 10: 
alert ("Between 0 and 10."); 
break; 

case num > 10 && num <= 20: 
alert ("Between 10 and 20."); 
break; 

default: 
alert ("More than 20."); 
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这 个 例子 首先 在 switch 语句 外 面 声明 了 变量 num。 而 之 所 以 给 switch 语句 传递 表达 式 true， 


是 因为 每 个 case 值 都 可 以 返回 一 个 布尔 值 。 这 样 ， 每 个 case 按照 顺序 被 求 值 ， 直 到 找到 匹配 的 值 或 者 
遇 到 aefault 语句 为 止 (这 正 是 这 个 例子 的 最 终结 果 )。 























switch 语句 在 比较 值 时 使 用 的 是 全 等 操作 符 ， 因 此 不 会 发 生 类 型 转换 (例如 ， 
字符 串 "10" 不 等 于 数值 10 ) 。 





3.7 函数 


函数 对 任何 语言 来 说 都 是 一 个 核心 的 概念 。 通 过 函数 可 以 封装 任意 多 条 语句 , 而 且 可 以 在 任何 地 方 、 
任何 时 候 调 用 执行 。ECMAScript 中 的 函数 使 用 function 关键 字 来 声明 ， 后 跟 一 组 参数 以 及 函数 体 。 
孙 数 的 基本 语法 如 下 所 示 : 
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function functionName (arg0, argl,..., argN) { 
statements 


} 
以 下 是 一 个 函数 示例 : 


function sayHi (name, message) { 
alert("Hello " + name + "," + message); 


} 
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这 个 函数 可 以 通过 其 函数 名 来 调用 ,后面 还 要 加 上 一 对 圆 括号 和 参数 ( 圆 括号 中 的 参数 如 果 有 多 个 ， 
可 以 用 逗号 隔 开 )。 调 用 sayHi () 函数 的 代码 如 下 所 示 : 


sayHi ("Nicholas", "how are You today?"); 


这 个 函数 的 输出 结果 是 "Hello Nicholas,how are you today?"。 子 数 中 定义 中 的 命名 参数 name 
和 message 被 用 作 了 字符 串 拼接 的 两 个 操作 数 ， 而 结果 最 终 通过 警告 框 显示 了 出 来 。 

ECMAScript 中 的 函数 在 定义 时 不 必 指 定 是 否 返 回 值 。 实 际 上 ， 任 何 函 数 在 任何 时 候 都 可 以 通过 
return 语句 后 跟 要 返回 的 值 来 实现 返回 值 。 请 看 下 面 的 例子 : 


function sum(numl, num2) { 
叶 return numl + num2; 























} 
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这 个 sum() 函数 的 作用 是 把 两 个 值 加 起 来 返回 一 个 结果 。 我 们 注意 到 ,除了 return 语句 之 外 , 没 
Pe 函数 会 返回 一 个 值 。 调 用 这 个 函数 的 示例 代码 如 下 : 


var result = sum(5, 10); 


这 个 函数 会 在 执行 完 return 语句 之 后 停止 并 立即 退出 。 因 此 ,位 于 return 语句 之 后 的 任何 代码 
都 永远 不 会 执行 。 例 如 : 


function sum(numl, num2) { 
return numl + num2; 
alert ("Hello world"); // 永远 不 会 执行 





} 


在 这 个 例子 中 ， 由 于 调用 alert () 函数 的 语句 位 于 return 语句 之 后 ， 因 此 永远 不 会 显示 警告 村 
当然 ,一 个 函数 中 也 可 以 包含 多 个 return 语句 ， 如 下 面 这 个 例子 中 所 示 : 


function diff (numl, num2) { 
if (numl < num2) { 
return num2 - numl; 
} else { 
return numl - num2; 























I 





} 
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这 个 例子 中 定义 的 aiff () 函数 用 于 计算 两 个 数值 的 差 。 如 果 第 一 个 数 比 第 二 个 小 ， 则 用 第 二 个 数 
减 第 一 个 数 ; 否则 ， 用 第 一 个 数 减 第 二 个 数 。 代 码 中 的 两 个 分 支 都 具有 自己 的 return 语句 ， 分 别 用 于 
执行 正确 的 计算 。 

男 外 ,return 语句 也 可 以 不 带 有 任何 返回 值 。 在 这 种 情况 下 , 函数 在 停止 执行 后 将 返回 ungefined 
值 。 这 种 用 法 一 般 用 在 需要 提前 停止 函数 执行 而 又 不 需要 返回 值 的 情况 下 。 比 如 在 下 面 这 个 例子 中 , 就 












































不 会 显示 警告 框 : 
function sayHi (name, message) { 
时 return; 
alert ("Hello " + name + "," + message); / /永远 不 会 调用 
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推荐 的 做 法 是 要 么 让 函数 始终 都 返回 一 个 值 ， 要 么 永远 都 不 要 返回 值 。 和 否则 ， 如 


果 函 数 有 时 候 返 回 值 ， 有 时 候 有 不 返回 值 ， 会 给 调试 代码 带 来 不 便 。 





严格 模式 对 函数 有 一 些 限 制 ; 

口 不 能 把 函数 命名 为 eval 或 arguments; 

口 不 能 把 参数 命名 为 eval 或 arguments; 

口 不 能 出 现 两 个 命名 参数 同名 的 情况 。 

如 果 发 生 以 上 情况 ， 就 会 导致 语法 错误 ， 代 码 无 法 执行 。 


3.7.1 理解 参数 


ECMAScript 函数 的 参数 与 大 多 数 其 他 语言 中 函数 的 参数 有 所 不 同 。ECMAScript 函数 不 介意 传递 进 
来 多 少 个 参数 ， 也 不 在 乎 传 进来 参数 是 什么 数据 类 型 。 也 就 是 说 ， 即 便 你 定义 的 函数 只 接收 两 个 参数 ， 
在 调用 这 个 函数 时 也 未 必 一 定 要 传递 两 个 参数 。 可 以 传递 一 个 、 三 个 甚至 不 传递 参数 ， 而 解析 器 永远 不 
会 有 什么 人 怨言。 之 所 以 会 这 样 ， 原 因 是 ECMAScript 中 的 参数 在 内 部 是 用 一 个 数组 来 表示 的 。 函 数 接收 
到 的 始终 都 是 这 个 数组 ， 而 不 关心 数组 中 包含 哪些 参数 ( 如 果 有 参数 的 话 )。 如 果 这 个 数组 中 不 包含 任 
何 元 素 ， 无 所 谓 ; 如 果 包 含 多 个 元 素 ， 也 没有 问题 。 实 际 上 ， 在 函数 体内 可 以 通过 arguments 对 象 来 
访问 这 个 参数 数组 ， 从 而 获取 传递 给 函数 的 每 一 个 参数 。 
其 实 ，arguments 对 象 只 是 与 数组 类 似 ( 它 并 不 是 Array 的 实例 )， 因 为 可 以 使 用 方 括号 语法 访 
问 它 的 每 一 个 元 素 〈 即 第 一 个 元 素 是 arguments [0] ， 第 二 个 元 素 是 argumetns [1] ， 以 此 类 推 ), 使 
用 length 属性 来 确定 传递 进来 多 少 个 参数 。 在 前 面 的 例子 中 ，sayHi () 函数 的 第 一 个 参数 的 名 字 叫 
name ， 而 该 参数 的 值 也 可 以 通过 访问 arguments[0] 来 获取 。 因 此 ， 那 个 函数 也 可 以 像 下 面 这 样 重 写 ， 
即 不 显 式 地 使 用 命名 参数 : 







































































function sayHi() { 
CC alert("Hello " + arguments[0] + "," + arguments[1]); 
} 


FunctionExample03.htm 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


3.7 ”函数 65 





这 个 重 写 后 的 函数 中 不 包含 命名 的 参数 。 虽 然 没 有 使 用 name 和 message 标识 符 , 但 函数 的 功能 
依旧 。 这 个 事实 说 明了 ECMAScript 困 数 的 一 个 重要 特点 : 命名 的 参数 只 提供 便利 ， 但 不 是 必需 的 。 另 
外 ,在 命名 参数 方面 ， 其 他 语言 可 能 需要 事先 创建 一 个 函数 签名 ， 而 将 来 的 调用 必须 与 该 签名 一 致 。 但 
在 ECMAScript 中 ， 没 有 这 些 条 条 框框 ， 解 析 器 不 会 验证 命名 参数 。 

通过 访问 arguments 对 象 的 length 属性 可 以 获知 有 多 少 个 参数 传递 给 了 函数 。 下 面 这 个 函数 会 
在 每 次 被 调用 时 ， 输 出 传人 其 中 的 参数 个 数 : 


function howManyArgs() { 
alert(arguments.1length); 





















































} 


howManyArgs ("string", 45); //2 
howManyArgs () ; //0 
howManyArgs (12); 7 人 
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执行 以 上 代码 会 依次 出 现 3 个 警告 框 , 分 别 显 示 2、0 和 1。 由 此 可 见 , 开发 人 员 可 以 利用 这 一 点 让 
函数 能 够 接收 任意 个 参数 并 分 别 实现 适当 的 功能 。 请 看 下 面 的 例子 : 


function qoAddq() { 









































if(larguments.length == 1) { 
alert(arguments[0] + 10); 
} else if (arguments.length == 2) { 


alert(arguments[0] + arguments[1]); 
} 
} 


doAadd (10); //20 
doadd(30, 20); //50 
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函数 aoada () 会 在 只 有 一 个 参数 的 情况 下 给 该 参数 加 上 10; 如 果 是 两 个 参数 ， 则 将 那个 参数 简单 
相 加 并 返回 结果 。 因 此 ，doadaa(10) 会 返回 20， 而 doaqq (30,20) 则 返回 50。 虽 然 这 个 特性 算 不 上 完 
美的 重 载 ， 但 也 足够 弥补 ECMAScript 的 这 一 缺憾 了 。 

另 一 个 与 参数 相关 的 重要 方面 ， 就 是 arguments 对 象 可 以 与 命名 参数 一 起 使 用 ， 如 下 面 的 例子 所 示 : 














function doAdd (numl, num2) { 
量 if(arguments.length == 1) { 
alert (numl + 10); 
} else if (arguments.length == 2) { 


alert(arguments[0] + num2); 


} 
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在 重 写 后 的 这 个 doaga () 函数 中 ， 两 个 命名 参数 都 与 arguments 对 象 一 起 使 用 。 由 于 numl 的 值 
与 arguments[0] 的 值 相同 ， 因 此 它们 可 以 互 换 使 用 ( 当然 ，num2 和 arguments[1] 也 是 如 此 )。 

关于 arguments 的 行为 , 还 有 一 点 比较 有 意思 。 那 就 是 它 的 值 永远 与 对 应 命名 参数 的 值 保持 同步 。 
例如 : 
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function doAdd(numl, num2) { 
arguments[1] = 10; 
alert (arguments[0] + num2); 
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每 次 执行 这 个 aoadad () 函数 都 会 重 写 第 二 个 参数 ， 将 第 二 个 参数 的 值 修改 为 10。 因 为 arguments 
对 象 中 的 值 会 自动 反映 到 对 应 的 命名 参数 ， 所 以 修改 arguments [1] ， 也 就 修改 了 num2 ， 结 果 它 们 的 
值 都 会 变 成 10。 不 过 , 这 并 不 是 说 读 取 这 两 个 值 会 访问 相同 的 内 存 空间 ; 它们 的 内 存 空间 是 独立 的 , 但 
它们 的 值 会 同步 。 另外 还 要 记 住 ,如 果 只 传人 了 一 个 参数 ,那么 为 arguments[1] 设 置 的 值 不 会 反应 到 
命名 参数 中 。 这 是 因为 arguments 对 象 的 长 度 是 由 传人 的 参数 个 数 决 定 的 ， 不 是 由 定义 函数 时 的 命名 
参数 的 个 数 决定 的 。 

关于 参数 还 要 记 住 最 后 一 点 : 没有 传递 值 的 命名 参数 将 自动 被 赋予 undefined 值 。 这 就 跟 定 义 了 
变量 但 又 没有 初始 化 一 样 。 例 如 ， 如 果 只 给 aoadqdq() 函数 传递 了 一 个 参数 ， 则 num2 中 就 会 保存 
undefined 值 。 

严格 模式 对 如 何 使 用 arguments 对 象 做 出 了 一 些 限 制 。 首 先 ， 像 前 面 例子 中 那样 的 赋值 会 变 得 无 
效 。 也 就 是 说 ， 即 使 把 arguments[1] 设 置 为 10，num2 的 值 仍然 还 是 undefined。 其 次 ， 重 写 
arguments 的 值 会 导致 语法 错误 (代码 将 不 会 执行 )。 
































ECMAScript 中 的 所 有 参数 传递 的 都 是 值 ， 不 可 能 通过 引用 传递 参数 。 


3.7.2 ”没有 重 载 


ECMAScript 函数 不 能 像 传统 意义 上 那样 实现 重 载 。 而 在 其 他 语言 (如 Java ) 中 ， 可 以 为 一 个 函数 
编写 两 个 定义 ， 只 要 这 两 个 定义 的 签名 ( 接受 的 参数 的 类 型 和 数量 ) 不 同 即 可 。 如 前 所 述 , ECMAScirpt 
函数 没有 签名 ， 因 为 其 参数 是 由 包含 零 或 多 个 值 的 数组 来 表示 的 。 而 没有 函数 签名 ,真正 的 重 载 是 不 可 
能 做 到 的 。 

如 果 在 ECMAScript 中 定义 了 两 个 名 字 相 同 的 函数 , 则 该 名 字 只 属于 后 定义 的 函数 ,请 看 下 面 的 例子 : 

function addSomeNumber (num){ 

return num + 100; 












































站 
function addSomeNumber (num) { 
return num + 200; 


} 


var result = addSomeNumber (100); //300 
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在 此 ， 函 数 adadqsomeNumber () 被 定义 了 两 次 。 第 一 个 版 本 给 参数 加 100， 而 第 二 个 版 本 给 参数 加 
200。 由 于 后 定义 的 函数 覆盖 了 先 定 义 的 函数 ， 因 此 当 在 最 后 一 行 代 码 中 调用 这 个 函数 时 ， 返 回 的 结 
就 是 300。 
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如 前 所 述 ， 通 过 检查 传人 函数 中 参数 的 类 型 和 数量 并 作出 不 同 的 反应 ， 可 以 模仿 方法 的 重 载 。 
3.8 小结 


JavaScript 的 核心 语言 特性 在 ECMA-262 中 是 以 名 为 ECMAScript 的 伪 语 言 的 形式 来 定义 的 。 
ECMAScript 中 包含 了 所 有 基本 的 语法 、 操 作 符 、 数 据 类 型 以 及 完成 基本 的 计算 任务 所 必需 的 对 象 ， 但 
没有 对 取得 输入 和 产生 输出 的 机 制作 出 规定 。 理 解 ECMAScript 及 其 纷繁 复杂 的 各 种 细节 ， 是 理解 其 在 
Web 浏览 器 中 的 实现 一 一 JavaScript 的 关键 。 目 前 大 多 数 实现 所 遵循 的 都 是 ECMA-262 第 3 版 ,但 很 多 
也 已 经 着 手 开始 实现 第 5 版 了 。 以 下 简要 总 结 了 ECMAScript 中 基本 的 要 素 。 

DQ ECMAScript 中 的 基本 数据 类 型 包括 Undefined、Null、Boolean、Number 和 String。 

口 与 其 他 语言 不 同 ，ECMScript 没有 为 整数 和 浮 点 数值 分 别 定义 不 同 的 数据 类 型 ，Number 类 型 可 
用 于 表示 所 有 数值 。 
口 ECMAScript 中 也 有 一 种 复杂 的 数据 类 型 ， 即 object 类 型 ， 该 类 型 是 这 门 语言 中 所 有 对 象 的 基 
础 类 型 。 

口 严格 模式 为 这 门 语言 中 容易 出 错 的 地 方 施加 了 限制 。 

口 ECMAScript 提供 了 很 多 与 C 及 其 他 类 C 语言 中 相同 的 基本 操作 符 , 包括 算术 操作 符 、 布 尔 操作 
符 、 关 系 操作 符 、 相 等 操作 符 及 赋值 操作 符 等 。 

口 ECMAScript 从 其 他 语言 中 借鉴 了 很 多 流 控制 语句 , 例如 if 语句 、for 语句 和 switch 语句 等 。 
ECMAScript 中 的 函数 与 其 他 语言 中 的 函数 有 诸多 不 同 之 处 。 

口 无 须 指定 函数 的 返回 值 ， 因 为 任何 ECMAScript 函数 都 可 以 在 任何 时 候 返 回 任何 值 。 

口 实际 上 ， 未 指定 返回 值 的 函数 返回 的 是 一 个 特殊 的 undefined 值 。 

口 ECMAScript 中 也 没有 函数 签名 的 概念 ,因为 其 函数 参数 是 以 一 个 包含 零 或 多 个 值 的 数组 的 形式 
传递 的 。 

口 可 以 向 ECMAScript 本 数 传递 任意 数量 的 参数 ,并 且 可 以 通过 arguments 对 象 来 访问 这 些 参 数 。 
口 由 于 不 存在 函数 签名 的 特性 ，ECMAScript 函数 不 能 重 载 。 
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变量 、 作 用 域 和 内 存 问题 


本 章 内 容 
口 理解 基本 类 型 和 引用 类 型 的 什 
口 理解 执行 环境 

D 理解 垃圾 收集 



























































按 ， ECMA-262 的 定义 ，JavaScript 的 变量 与 其 他 语言 的 变量 有 很 大 区 别 。JavaScript 变量 松散 
女 类 型 的 本 质 ， 决定 了 它 只 是 在 特定 时 间 用 于 保存 特定 值 的 一 个 名 字 而 已 。 由 于 不 存在 定义 某 
个 变量 必须 要 保存 何 种 数据 类 型 值 的 规则 , 变量 的 值 及 其 数据 类 型 可 以 在 脚本 的 生命 周期 内 改变 。 尽 管 
从 某 种 角度 看 ， 这 可 能 是 一 个 既 有 趣 又 强大 ， 同 时 又 容易 出 问题 的 特性 ， 但 JavaScript 变量 实际 的 复杂 
程度 还 远 不 止 如 此 。 


4.1 基本 类 型 和 引用 类 型 的 值 


ECMAScript 变量 可 能 包含 两 种 不 同 数据 类 型 的 值 : 基本 类 型 值 和 引用 类 型 值 。 基 本 类 型 值 指 的 是 
简单 的 数据 段 ， 而 引用 类 型 值 指 那些 可 能 由 多 个 值 构成 的 对 象 。 

在 将 一 个 值 赋 给 变量 时 ,解析 器 必须 确定 这 个 值 是 基本 类 型 值 还 是 引用 类 型 值 。 第 3 章 讨 论 了 5 种 
基本 数据 类 型 : Undefined、Null、Boolean、Number 和 string。 这 5 种 基本 数据 类 型 是 按 值 访问 
的 ， 因 为 可 以 操作 保存 在 变量 中 的 实际 的 值 。 

引用 类 型 的 值 是 保存 在 内 存 中 的 对 象 。 与 其 他 语言 不 同 ，JavaScript 不 允许 直接 访问 内 存 中 的 位 置 ， 
也 就 是 说 不 能 直接 操作 对 象 的 内 存 空 间 。 在 操作 对 象 时 , 实际 上 是 在 操作 对 象 的 引用 而 不 是 实际 的 对 象 。 
为 此 ， 引 用 类 型 的 值 是 按 引用 访问 的 "。 























































































































在 很 多 语言 中 ， 字 符 串 以 对 象 的 形式 来 表示 ， 因 此 被 认为 是 引用 类 型 的 。 


ECMAScript 放弃 了 这 一 传统 。 





4.1.1 动态 的 属性 

定义 基本 类 型 值 和 引用 类 型 值 的 方式 是 类 似 的 : 创建 一 个 变量 并 为 该 变量 赋值 。 但 是 ， 当 这 个 值 
存 到 变量 中 以 后 ， 对 不 同类 型 值 可 以 执行 的 操作 则 大 相 径 庭 。 对 于 引用 类 型 的 值 ， 我 们 可 以 为 其 添加 
性 和 方法 ， 也 可 以 改变 和 删除 其 属性 和 方法 。 请 看 下 面 的 例子 











邓 汇 























这 种 说 法 不 严密 ， 当 复制 保存 着 对 象 的 某 个 变量 时 ， 操 作 的 是 对 象 的 引用 。 但 在 为 对 象 添加 属性 时 ， 操 作 的 是 实际 
的 对 象 。 图 灵 社 区 “ 壮 壮 的 前 端 之 路 ” 注 
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Var person = new Object() ; 
person.name = "Nicholas"; 
alert (person.name); //"Nicholas" 
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以 上 代码 创建 了 一 个 对 象 并 将 其 保存 在 了 变量 person 中 。 然 后 ， 我 们 为 该 对 象 添 加 了 一 个 名 为 
name 的 属性 ， 并 将 字符 串 值 "Nicholas" 赋 给 了 这 个 属性 。 紧 接着 ， 又 通过 alert () 函数 访问 了 这 个 
新 属性 。 如 果 对 象 不 被 销毁 或 者 这 个 属性 不 被 删除 ， 则 这 个 属性 将 一 直 存 在 。 

但 是 ， 我 们 不 能 给 基本 类 型 的 值 添加 属性 ， 尽 管 这 样 做 不 会 导致 任何 错误 。 比 如 : 









































Var name = "Nicholas"; 
name.age = 27; 
alert (name.age); //undefined 
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在 这 个 例子 中 ， 我 们 为 字符 串 name 定义 了 一 个 名 为 age 的 属性 ， 并 为 该 属性 赋值 27。 但 在 下 一 
行 访问 这 个 属性 时 ， 发 现 该 属性 不 见 了 。 这 说 明 只 能 给 引用 类 型 值 动态 地 添加 属性 ， 以 便 将 来 使 用 。 


4.1.2 复制 变量 值 


除了 保存 的 方式 不 同 之 外 , 在 从 一 个 变量 向 另 一 个 变量 复制 基本 类 型 值 和 引用 类 型 值 时 ,也 存在 不 
同 。 如 果 从 一 个 变量 向 另 一 个 变量 复制 基本 类 型 的 值 ， 会 在 变量 对 象 上 创建 一 个 新 值 ， 然 后 把 该 值 复 制 
到 为 新 变量 分 配 的 位 置 上 。 来 看 一 个 例子 : 


D3 
numl; 












































Var numl 
var num2 


在 此 , numl 中 保存 的 值 是 5。 当 使 用 numi 的 值 来 初始 化 num2 时 , num2 中 也 保存 了 值 5。 但 num2 
中 的 5 与 numl 中 的 5 是 完全 独立 的 ,该 值 只 是 numl 中 5 的 一 个 副本 。 此 后 ， 这 两 个 变量 可 以 参与 任 
何 操作 而 不 会 相互 影响 。 图 4-1 形象 地 展示 了 复制 基本 类 型 值 的 过 程 。 

复制 前 的 变量 对 象 























(Number 类 型 ) 





复制 后 的 变量 对 象 








num2 人 
(Number 类 型 ) 





numl 





5 
(Number 类 型 ) 
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当 从 一 个 变量 向 另 一 个 变量 复制 引用 类 型 的 值 时, 同样 也 会 将 存储 在 变量 对 象 中 的 值 复制 一 份 放 到 
为 新 变量 分 配 的 空间 中 。 不 同 的 是 , 这 个 值 的 副本 实际 上 是 一 个 指针 ， 而 这 个 指针 指向 存储 在 堆 中 的 一 
个 对 象 。 复 制 操作 结束 后 ， 两 个 变量 实际 上 将 引用 同一 个 对 象 。 因 此 ,改变 其 中 一 个 变量 ， 就 会 影响 另 
一 个 变量 ， 如 下 面 的 例子 所 示 : 



































Var objl1 = new Object() ; 

var’ OBj2 = Objl:; 

objl.name = "Nicholas"; 

alert (obj2.name); //"Nicholas" 


首先 , 变量 obj1 保存 了 一 个 对 象 的 新 实例 。 然后, 这 个 值 被 复制 到 了 obj2 中 ; 换 名 话说, obj1 
和 obj2 都 指向 同一 个 对 象 。 这 样 ， 当 为 opj1 添加 name 属性 后 ， 可 以 通过 obj2 来 访问 这 个 属性 ， 
因为 这 两 个 变量 引用 的 都 是 同一 个 对 象 。 图 4-2 展示 了 保存 在 变量 对 象 中 的 变量 和 保存 在 堆 中 的 对 象 之 
间 的 这 种 关系 。 

















复制 前 的 变量 对 象 堆 内 存 
















obj1 








(Object 类 型 ) 





复制 后 的 变量 对 象 


obj2 | (Object 类 型 ) 


obj1 | (object 类 型 ) 
































4.1.3 ”传递 参数 


ECMAScript 中 所 有 函数 的 参数 都 是 按 值 传递 的 。 也 就 是 说 ， 把 函数 外 部 的 值 复制 给 函数 内 部 的 参 
数 ， 就 和 把 值 从 一 个 变量 复制 到 另 一 个 变量 一 样 。 基 本 类 型 值 的 传递 如 同 基本 类 型 变量 的 复制 一 样 ， 而 
引用 类 型 值 的 传递 ， 则 如 同 引 用 类 型 变量 的 复制 一 样 。 有 不 少 开发 人 员 在 这 一 点 上 可 能 会 感到 困惑 ， 
为 访问 变量 有 按 值 和 按 引 用 两 种 方式 ， 而 参数 只 能 按 值 传递 。 

在 向 参数 传递 基本 类 型 的 值 时 ， 被 传递 的 值 会 被 复制 给 一 个 局 部 变量 〈 即 命名 参数 ， 或 者 用 
ECMAScript 的 概念 来 说 ， 就 是 arguments 对 象 中 的 一 个 元 素 )。 在 向 参数 传递 引用 类 型 的 值 时 ， 会 把 
这 个 值 在 内 存 中 的 地 址 复制 给 一 个 局 部 变量 ,因此 这 个 局 部 变量 的 变化 会 反映 在 函数 的 外 部 。 请 看 下 函 
这 个 例子 : 

function addTen (num) { 


num += 10; 
return num; 
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Var count = 20; 

var result = addTen (count); 
alert (count); //20， 没 有 变化 
alert (result); //30 


FunctionAreumentsExample01.htm 


这 里 的 函数 addTen () 有 一 个 参数 num， 而 参数 实际 上 是 函数 的 局 部 变量 。 在 调用 这 个 函数 时 ， 变 
量 count 作为 参数 被 传递 给 函数 ,这 个 变量 的 值 是 20, 于 是 ,数值 20 被 复制 给 参数 num 以 便 在 addTen () 
中 使 用 。 在 函数 内 部 ， 参 数 num 的 值 被 加 上 了 10， 但 这 一 变化 不 会 影响 函数 外 部 的 count 变量 。 参 数 
num 与 变量 count 互 不 相识 , 它们 仅仅 是 具有 相同 的 值 。 假如 num 是 按 引用 传递 的 话 , 那么 变量 count 
的 值 也 将 变 成 30, 从 而 反映 函数 内 部 的 修改 。 当 然 , 使 用 数值 等 基本 类 型 值 来 说 明 按 值 传递 参数 比较 简 
单 ， 但 如 果 使 用 对 象 ， 那 问题 就 不 怎么 好 理解 了 。 再 举 一 个 例子 : 


function setName(obj) { 
obj.name = "Nicholas"; 





























} 


Var person = new Object(); 
setName (person); 
alert (person.name); //"Nicholas" 


FunctionAregumentsExample02.htm 


以 上 代码 中 创建 一 个 对 象 , 并 将 其 保存 在 了 变量 person 中 。 然后 , 这 个 变量 被 传递 到 setName () 
函数 中 之 后 就 被 复制 给 了 obj。 在 这 个 孔 数 内 部 ，obj 和 person 引用 的 是 同一 个 对 象 。 换 句 话 说， 即 
使 这 个 变量 是 按 值 传递 的 ，obj 也 会 按 引 用 来 访问 同一 个 对 象 。 于 是 ， 当 在 函数 内 部 为 obj 添加 name 
属性 后 ， 函 数 外 部 的 person 也 将 有 所 反映 ; 因为 person 指向 的 对 象 在 堆 内 存 中 只 有 一 个 ， 而 且 是 全 
局 对 象 。 有 很 多 开发 人 员 错 误 地 认为 : 在 局 部 作用 域 中 修改 的 对 象 会 在 全 局 作用 域 中 反映 出 来 ， 就 说 明 
参数 是 按 引用 传递 的 。 为 了 证 明 对 象 是 按 值 传递 的 ， 我 们 再 看 一 看 下 面 这 个 经 过 修改 的 例子 : 


function setName(obj) { 














obj.name = "Nicholas"; 
obj = new Object(); 
obj.name = "Greg"; 


: 


Var person = new Object(); 
setName (person); 
alert (person.name); //"Nicholas" 


这 个 例子 与 前 一 个 例子 的 唯一 区 别 ， 就 是 在 setName () 函数 中 添加 了 两 行 代码 : 一 行 代 码 为 obj 
重新 定义 了 一 个 对 象 ， 另 一 行 代码 为 该 对 象 定义 了 一 个 带 有 不 同 值 的 name 属性 。 在 把 person 传递 给 
setName () 后 , 其 name 属性 被 设置 为 "Nicholas"。 然 后 , 又 将 一 个 新 对 象 赋 给 变量 obj , 同时 将 其 name 
属性 设置 为 "Greg"。 如果 person 是 按 引 用 传递 的 , 那么 person 就 会 自动 被 修改 为 指向 其 name 属性 值 
为 "Greg" 的 新 对 象 。 但 是 ， 当 接 下 来 再 访问 person.name 时 ,显示 的 值 仍然 是 "Nicholas"。 这 说 明 
即使 在 函数 内 部 修改 了 参数 的 值 , 但 原始 的 引用 仍然 保持 未 变 。 实 际 上 ， 当 在 函数 内 部 重 写 obj 时 , 这 
个 变量 引用 的 就 是 一 个 局 部 对 象 了 。 而 这 个 局 部 对 象 会 在 函数 执行 完毕 后 立即 被 销毁 。 
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可 以 把 ECMAScript 函数 的 参数 想象 成 局 部 变量 。 


4.1.4 检测 类 型 


要 检测 一 个 变量 是 不 是 基本 数据 类 型 9 第 3 章 介绍 的 typeof 操作 符 是 最 佳 的 工具 。 说 得 更 具体 一 
点 ，typeof 操作 符 是 确定 一 个 变量 是 字符 串 、 数 值 、 布 尔 值 ， 还 是 undefined 的 最 佳 工具 。 如 果 变 
量 的 值 是 一 个 对 象 或 null1， 则 typeof 操作 符 会 像 下 面 例子 中 所 示 的 那样 返回 "object": 


























var s = "Nicholas"; 

var b = true; 

Va L223 

Var u; 

Var Ne ML 

Var Oo = new Object(); 

alert (typeof s) //String 
alert (typeof 工 ) ; //number 
alert (typeof b); //boolean 
alert (typeof u); //undefined 
alert (typeof n) //object 
alert (typeof o) //object 


DeterminingTypeExample01.htm 
虽然 在 检测 基本 数据 类 型 时 typeof 是 非常 得 力 的 助手 , 但 在 检测 引用 类 型 的 值 时 ， 这 个 操作 符 的 


用 人 处 不 大 ,通常 , 我 们 并 不 是 想 知道 某 个 值 是 对 象 , 而 是 想 知道 它 是 什么 类 型 的 对 象 。 为 此 , ECMAScript 
提供 了 instanceof 操作 符 ， 其 语法 如 下 所 示 : 








result = variable instanceof constructor 


如 果 变 量 是 给 定 引 用 类 型 (根据 它 的 原型 链 来 识别 ; 第 6 章 将 介绍 原型 链 ) 的 实例 ， 那 么 
instanceof 操作 符 就 会 返回 true。 请 看 下 面 的 例子 : 








alert (person instanceof Object); // 变量 person 是 Object 吗 ? 
alert (colors instanceof Array); // 变量 colors 是 Array 吗 ? 
alert (pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗 ? 











根据 规定 ， 所 有 引用 类 型 的 值 都 是 object 的 实例 。 因 此 ， 在 检测 一 个 引用 类 型 值 和 object 构造 
函数 时 ，instanceof 操作 符 始 终 会 返回 true。 当 然 ， 如 果 使 用 instanceof 操作 符 检 测 基 本 类 型 的 
值 ， 则 该 操作 符 始终 会 返回 false， 因 为 基本 类 型 不 是 对 象 。 









使 用 typeof 操作 符 检测 函数 时 ， 该 操作 符 会 返回 "function"。 在 Safari 5 及 
之 前 版 本 和 Chrome 7 及 之 前 版 本 中 使 用 typeof 检测 正则 表达 式 时 ， 由 于 规范 的 原 
因 , 这 个 操作 符 也 返回 "function"。ECMA-262 规定 任何 在 内 部 实现 [[ca1l1]1] 方 法 
的 对 象 都 应 该 在 应 用 typeof 操作 符 时 返回 "function"。 由 于 上 述 浏览 器 中 的 正则 
表达 式 也 实现 了 这 个 方法 ， 因 此 对 正则 表达 式 应 用 typeof 会 返回 "function"。 在 
IE 和 Firefox 中 ， 对 正则 表达 式 应 用 typeof 会 返回 "object"。 
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4.2 ”执行 环境 及 作用 域 


执行 环境 ( execution context，, 为 简单 起 见 ， 有 时 也 称 为 “环境 ” ) 是 JavaScript 中 最 为 重要 的 一 个 概 
念 。 执 行 环境 定义 了 变量 或 函数 有 权 访 问 的 其 他 数据 ,决定 了 它们 各 自 的 行为 。 每 个 执行 环境 都 有 一 个 
与 之 关联 的 变量 对 象 (variable object )， 环 境 中 定义 的 所 有 变量 和 函数 都 保存 在 这 个 对 象 中 。 虽 然 我 们 
编写 的 代码 无 法 访问 这 个 对 象 ， 但 解析 器 在 处 理 数据 时 会 在 后 台 使 用 它 。 

全 局 执行 环境 是 最 外 围 的 一 个 执行 环境 。 根 据 ECMAScript 实现 所 在 的 宿主 环境 不 同 ， 表 示 执 行 环 
境 的 对 象 也 不 一 样 。 在 Web 浏览 器 中 ， 全 局 执行 环境 被 认为 是 window 对 象 (第 7 章 将 详细 讨论 )， 因 
此 所 有 全 局 变量 和 函数 都 是 作为 window 对 象 的 属性 和 方法 创建 的 。 某 个 执行 环境 中 的 所 有 代码 执行 完 
毕 后 ， 该 环境 被 销毁 ， 保 存在 其 中 的 所 有 变量 和 函数 定义 也 随 之 销毁 ( 全 局 执行 环境 直到 应 用 程序 退 
出 一 一 例如 关闭 网 页 或 浏览 时 才 会 被 销毁 )。 

每 个 函数 都 有 自己 的 执行 环境 。 当 执行 流 进 入 一 个 函数 时 ， 函 数 的 环境 就 会 被 推 人 一 个 环境 栈 中 。 
而 在 函数 执行 之 后 ， 栈 将 其 环境 弹出 ， 把 控制 权 返 回 给 之 前 的 执行 环境 。ECMAScript 程序 中 的 执行 流 
正 是 由 这 个 方便 的 机 制 控制 着 。 

当代 码 在 一 个 环境 中 执行 时 ,会 创建 变量 对 象 的 一 个 作用 域 链 ( scope chain )。 作 用 域 链 的 用 途 ， 是 
保证 对 执行 环境 有 权 访 问 的 所 有 变量 和 函数 的 有 序 访问 。 作 用 域 链 的 前 端 ， 始 终 都 是 当前 执行 的 代码 所 
在 环境 的 变量 对 象 。 如 果 这 个 环境 是 函数 ， 则 将 其 活动 对 象 (activation object ) 作为 变量 对 象 。 活动 对 
象 在 最 开始 时 只 包含 一 个 变量 , 即 arguments 对 象 ( 这 个 对 象 在 全 局 环境 中 是 不 存在 的 )。 作 用 域 链 中 
的 下 一 个 变量 对 象 来 自 包含 ( 外 部 ) 环境 ， 而 再 下 一 个 变量 对 象 则 来 自 下 一 个 包含 环境 。 这 样 ， 一 直 迁 
续 到 全 局 执行 环境 ; 全 局 执行 环境 的 变量 对 象 始终 都 是 作用 域 链 中 的 最 后 一 个 对 象 。 

标识 符 解析 是 沿 着 作用 域 链 一 级 一 级 地 搜索 标识 符 的 过 程 。 搜 索 过 程 始终 从 作用 域 链 的 前 端 开始 ， 
然后 逐 级 地 向 后 回溯 ， 直 至 找到 标识 符 为 止 (如果 找 不 到 标识 符 ， 通 常会 导致 错误 发 生 )。 

请 看 下 面 的 示例 代码 : 


Var color = "blue"; 












































































































































function changeColor(){ 


1 (GOLOF =S== "BLUue.)t 
Color = "red"; 
} else { 
color = "blue"; 
} 
} 
changeColor () ; 


alert("Color is now " + color); 


ExecutionContextExample01.htm 


在 这 个 简单 的 例子 中 ， 函 数 changecolor () 的 作用 域 链 包 含 两 个 对 象 : 它 自己 的 变量 对 象 ( 其 中 
定义 着 arguments 对 象 ) 和 全 局 环境 的 变量 对 象 。 可 以 在 函数 内 部 访问 变量 color ， 就 是 因为 可 以 在 
这 个 作用 域 链 中 找到 它 。 

此 外 ， 在 局 部 作用 域 中 定义 的 变量 可 以 在 局 部 环境 中 与 全 局 变量 互 换 使 用 ， 如 下 面 这 个 例子 所 示 : 














图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





74 


第 4 章 变量 、 作 用 域 和 内 存 问题 





Var color = "blue"; 

function changeColor(){ 
Var anotherColor = "red"; 

function swapColors()f{ 
Var tempColor = 
anotherColor = color; 
Color = tempColor; 


anotherColor; 


// 这 里 可 以 访问 color、anotherColor 和 tempColor 


} 


// 这 里 可 以 访问 color 和 anotherColor, 但 不 能 访问 tempColor 


swapColors () ; 


} 


// 这 里 只 能 访问 color 
changeColor (); 





以 上 代码 共 涉 及 3 个 执行 环境 : 全 局 环境 、changeColor () 的 局 部 环境 和 swapcolors () 的 局 部 


环境 。 全 局 环境 中 有 一 个 变量 color 和 一 个 函数 c 


hangeColor()。 changeColor () 的 局 部 环境 中 有 


一 个 名 为 anotherCcolor 的 变量 和 一 个 名 为 swapcolors () 的 函数 ,但 它 也 可 以 访问 全 局 环境 中 的 变 


量 color。swapcolors () 的 局 部 环境 中 有 一 个 变量 





tempColor, 该 变量 只 














! 访 问 到 。 





能 在 这 个 环境 


无 论 全 局 环境 还 是 changeColor () 的 局 部 环境 都 无 权 访 问 tempcolor。 然而 , 在 swapcolors () 内 部 


则 可 以 访问 其 他 两 个 环境 中 的 所 有 变量 ， 


这 个 例子 的 作用 域 链 。 


为 那 两 个 环境 是 它 的 父 执行 环境 。 


window 





craaliene 


changeColor () 


— anotherColor 





.swapColors() 


tempColor 


图 4-3 








外 部 环境 不 能 访问 内 部 环境 中 的 任何 变量 和 函数 。 这 些 环境 之 间 的 联系 是 线 怕 























图 4-3 形象 地 展示 了 前 面 





图 4-3 中 的 矩形 表示 特定 的 执行 环境 。 其 中 ， 内 部 环境 可 以 通过 作用 域 链 访 问 所 有 的 外 部 环境 ， 但 








E、 有 次 序 的 。 每 个 环境 都 





可 以 向 上 搜索 作用 域 链 ,以 查询 变量 和 函数 名 ; 但 任何 环境 都 不 能 通过 向 下 搜索 作用 域 链 而 进入 男 一 个 
执行 环境 。 对 于 这 个 例子 中 的 swapcolors () 而 言 ， 其 作用 域 链 中 包含 3 个 对 象 : swapcolors () 的 变 
量 对 象 、changeColor () 的 变量 对 象 和 全 局 变量 对 象 swapcolors () 的 局 部 环境 开始 时 会 先 在 自己 的 














变量 对 象 中 搜索 变量 和 函数 名 ， 如 果 搜 索 不 到 则 用 

















了 搜索 上 一 级 作用 域 链 。changecolor () 的 作用 域 链 
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中 只 包含 两 个 对 象 : 它 自己 的 变量 对 象 和 全 局 变量 对 象 。 这 也 就 是 说 ， 它 不 能 访问 swapcolors () 的 
环境 。 


函数 参数 也 被 当 作 变量 来 对 待 ， 因 此 其 访问 规则 与 执行 环境 中 的 其 他 变量 相同 。 





4.2.1 延长 作用 域 链 


虽然 执行 环境 的 类 型 总 共 只 有 两 种 一 一 全 局 和 局 部 ( 吸 数 )， 但 还 是 有 其 他 办 法 来 延长 作用 域 链 。 
这 么 说 是 因为 有 些 语句 可 以 在 作用 域 链 的 前 端 临时 增加 一 个 变量 对 象 , 该 变量 对 象 会 在 代码 执行 后 被 移 
除 。 在 两 种 情况 下 会 发 生 这 种 现象 。 具 体 来 说 ， 就 是 当 执行 流 进 入 下 列 任何 一 个 语句 时 ， 作 用 域 链 就 会 
得 到 加 长 : 
口 try-catch 语句 的 catch 块 ; 
口 with 语句 。 

这 两 个 语句 都 会 在 作用 域 链 的 前 端 添 加 一 个 变量 对 象 。 对 with 语句 来 说 ， 会 将 指定 的 对 象 添加 到 
作用 域 链 中 。 对 catch 语句 来 说 ， 会 创建 一 个 新 的 变量 对 象 ， 其 中 包含 的 是 被 抛 出 的 错误 对 象 的 声明 。 
下 面 看 一 个 例子 。 


function builgdUrl() { 
Var qs = "?debug=true"; 




















with(location){ 
Var url = href + gs; 


} 


return url; 
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在 此，with 语句 接收 的 是 1ocation 对 象 ， 因 此 其 变量 对 象 中 就 包含 了 location 对 象 的 所 有 属 
性 和 方法 ， 而 这 个 变量 对 象 被 添加 到 了 作用 域 链 的 前 端 。builaur1l () 函数 中 定义 了 一 个 变量 gs。 当 在 
with 语句 中 引用 变量 href 时 (实际 引用 的 是 location.href )， 可 以 在 当前 执行 环境 的 变量 对 象 中 
找到 。 当 引用 变量 qs 时 ， 引 用 的 则 是 在 puilqurl () 中 定义 的 那个 变量 ， 而 该 变量 位 于 函数 环境 的 变 
量 对 象 中 。 至 于 with 语句 内 部 ， 则 定义 了 一 个 名 为 url 的 变量 ， 因 而 url 就 成 了 函数 执行 环境 的 一 
部 分 ， 所 以 可 以 作为 函数 的 值 被 返回 。 




















在 IE8 及 之 前 版 本 的 JavaScript 实现 中 ， 存 在 一 个 与 标准 不 一 致 的 地 方 ， 即 在 
catch 语句 中 捕获 的 错误 对 象 会 被 添加 到 执行 环境 的 变量 对 象 ， 而 不 是 catch 语句 
的 变量 对 象 中 。 换 和 名 话说 ， 即 使 是 在 catch 块 的 外 部 也 可 以 访问 到 错误 对 象 。IE9 修 
复 了 这 个 问题 。 
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4.2.2 ”没有 块 级 作用 域 

JavaScript 没有 块 级 作用 域 经 常会 导致 理解 上 的 困惑 。 在 其 他 类 C 的 语言 中 ， 由 花 括号 封闭 的 代码 
块 都 有 自己 的 作用 域 ( 如果 用 ECMAScript 的 话 来 讲 , 就 是 它们 自己 的 执行 环境 ), 因而 支持 根据 条 件 来 
定义 变量 。 例 如 ， 下 面 的 代码 在 JavaScript 中 并 不 会 得 到 想象 中 的 结果 : 


if (true) { 
Var color = "blue"; 


























} 


alert (color); //"blue" 

这 里 是 在 一 个 if 语句 中 定义 了 变量 color。 如 果 是 在 C、C++ 或 Java 中 ，color 会 在 if 语句 执 
行 完毕 后 被 销毁 。 但 在 JavaScript 中 ，if 语句 中 的 变量 声明 会 将 变量 添加 到 当前 的 执行 环境 (在 这 里 是 
全 局 环境 ) 中 。 在 使 用 for 语句 时 尤其 要 牢记 这 一 差异 ， 例 如 : 


for (var i=0; i < 10; i++){ 
doSomething (i); 





























} 

alert (i); AE 

对 于 有 块 级 作用 域 的 语言 来 说 ，for 语句 初始 化 变量 的 表达 式 所 定义 的 变量 ， 只 会 存在 于 循环 的 环 
境 之 中 。 而 对 于 JavaScript 来 说 , 由 for 语句 创建 的 变量 i 即使 在 for 循环 执行 结束 后 , 也 依旧 会 存在 
于 循环 外 部 的 执行 环境 中 。 

1. 声明 变量 

使 用 var 声明 的 变量 会 自动 被 添加 到 最 接近 的 环境 中 。 在 函数 内 部 , 最 接近 的 环境 就 是 函数 的 局 部 
环境 ; 在 with 语句 中 ,最 接近 的 环境 是 函数 环境 。 如 果 初 始 化 变量 时 没有 使 用 var 声明 ， 该 变量 会 自 
动 被 添加 到 全 局 环境 。 如 下 所 示 : 























function add (numl, num2) { 
时 ) Var sum = numl + num2; 
return sum; 
} 
var result = add(10, 20); //30 
alert (sum); // 由 于 sum 不 是 有 效 的 变量 ， 因 此 会 导致 错误 
ExecutionContextExample04.htm 


以 上 代码 中 的 函数 add () 定 义 了 一 个 名 为 sum 的 局 部 变量 ， 该 变量 包含 加 法 操作 的 结果 。 虽 然 结 
果 值 从 函数 中 返回 了 ， 但 变量 sum 在 函数 外 部 是 访问 不 到 的 。 如 果 省 略 这 个 例子 中 的 var 关键 字 ， 那 
么 当 aqad () 执行 完毕 后 ，sum 也 将 可 以 访问 到 : 


function add(numl, num2) { 
sum = numl + num2; 
return sum; 


























} 


var result = add(10, 20); //30 
alert (sum); //30 
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这 个 例子 中 的 变量 sum 在 被 初始 化 赋值 时 没有 使 用 var 关键 字 。 于 是 ， 当 调用 完 aad () 之 后 ， 添 
加 到 全 局 环境 中 的 变量 sum 将 继续 存在 ; 即使 函数 已 经 执行 完毕 ， 后 面 的 代码 依旧 可 以 访问 它 。 











在 编写 JavaScript 代码 的 过 程 中 ， 不 声明 而 直接 初始 化 变量 是 一 个 常见 的 错误 做 
法 ， 因 为 这 样 可 能 会 导致 意外 。 我 们 建议 在 初始 化 变量 之 前 ， 一 定 要 先 声明 ， 这 样 就 
可 以 避免 类 似 问题 。 在 严格 模式 下 ， 初 始 化 未 经 声明 的 变量 会 导致 错误 。 






2. 查询 标识 符 

当 在 某 个 环境 中 为 了 读 取 或 写 人 而 引用 一 个 标识 符 时 ， 必 须 通过 搜索 来 确定 该 标识 符 实际 代表 什 
么 。 搜 索 过 程 从 作用 域 链 的 前 端 开 始 ， 向 上 逐 级 查询 与 给 定名 字 匹 配 的 标识 符 。 如 果 在 局 部 环境 中 找到 
了 该 标识 符 ， 搜 索 过 程 停止 ,变量 就 绪 。 如 果 在 局 部 环境 中 没有 找到 该 变量 名 ， 则 继续 沿 作用 域 链 向 上 
搜索 。 搜索 过 程 将 一 直 追 溯 到 全 局 环境 的 变量 对 象 。 如 果 在 全 局 环境 中 也 没有 找到 这 个 标识 符 ， 则 意味 
着 该 变量 尚未 声明 。 

通过 下 面 这 个 示例 ， 可 以 理解 查询 标识 符 的 过 程 : 


var color = "blue"; 
































function getColor(){ 
return color; 
} 
alert (getColor()); //"blue" 
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步 的 搜索 过 程 。 首 先 ， 搜 索 getcolor () 的 变量 对 象 ， 查 找 其 中 是 否 包 含 一 个 名 为 color 的 标识 符 。 
在 没有 找到 的 情况 下 ， 搜 索 继续 到 下 一 个 变量 对 象 ( 全 局 环境 的 变量 对 象 )， 然 后 在 那里 找到 了 名 为 
color 的 标识 符 。 因 为 搜索 到 了 定义 这 个 变量 的 变量 对 象 ， 搜 索 过 程 宣告 结束 。 图 4-4 形象 地 展示 了 上 


述 搜索 过 程 。 
window (2) 
pa 


getColor 


调用 本 例 中 的 函数 getcolor () 时 会 引用 变量 color。 为 了 确定 变量 color 的 值 ， 将 开始 一 个 两 











return colorl 


图 4-4 
在 这 个 搜索 过 程 中 ， 如 果 存 在 一 个 局 部 的 变量 的 定义 ， 则 搜索 会 自动 停止 , 不 再 进入 另 一 个 变量 对 
象 。 换 句 话 说， 如 果 局 部 环境 中 存在 着 同名 标识 符 ， 就 不 会 使 用 位 于 父 环境 中 的 标识 符 ， 如 下 面 的 例子 
所 示 : 
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Var color = "blue"; 


function getColor(){ 
Var color = "red"; 
return color; 


} 


alert (getColor()); //"red" 
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修改 后 的 代码 在 getcolor () 男 数 中 声明 了 一 个 名 为 color 的 局 部 变量 。 调 用 函数 时 ， 该 变量 
就 会 被 声明 。 而 当 函 数 中 的 第 二 行 代码 执行 时 ， 意 味 着 必须 找到 并 返回 变量 color 的 值 。 搜 索 过 程 
首先 从 局 部 环境 中 开始 ,而 且 在 这 里 发 现 了 一 个 名 为 color 的 变量 , 其 值 为 "red"。 因 为 变量 已 经 找 
到 了 ， 所 以 搜索 即行 停止 ，return 语句 就 使 用 这 个 局 部 变量 ， 并 为 函数 会 返回 "red"。 也 就 是 说 ， 
任何 位 于 局 部 变量 color 的 声明 之 后 的 代码 ， 如 果 不 使 用 window.color 都 无 法 访问 全 局 color 


有 局 . 
变量 。 







































变量 查询 也 不 是 没有 代价 的 。 很 明显 ， 访 问 局 部 变量 要 比 访 问 全 局 变量 更 快 ， 因 
为 不 用 向 上 搜索 作用 域 链 。JavaScript 引擎 在 优化 标识 符 查 询 方面 做 得 不 错 ， 因 此 这 
个 差别 在 将 来 息 怕 就 可 以 忽略 不 计 了 。 






4.3 垃圾 收集 


JavaScript 具有 自动 垃圾 收集 机 制 ， 也 就 是 说 ， 执 行 环 境 会 负责 管理 代码 执行 过 程 中 使 用 的 内 存 。 
而 在 C 和 C++ 之 类 的 语言 中 , 开发 人 员 的 一 项 基本 任务 就 是 手工 跟踪 内 存 的 使 用 情况 , 这 是 造成 许多 问 
题 的 一 个 根源 。 在 编写 JavaScript 程序 时 ， 开 发 人 员 不 用 再 关心 内 存 使 用 问题 ， 所 需 内 存 的 分 配 以 及 无 
用 内 存 的 回收 完全 实现 了 自动 管理 。 这 种 垃圾 收集 机 制 的 原理 其 实 很 简单 : 找 出 那些 不 再 继续 使 用 的 变 
量 , 然后 释放 其 占用 的 内 存 , 为 此 , 垃圾 收集 器 会 按照 固定 的 时 间 间 隔 ( 或 代码 执行 中 预定 的 收集 时 间 )， 
周期 性 地 执行 这 一 操作 。 

下 面 我 们 来 分 析 一 下 函数 中 局 部 变量 的 正常 生命 周期 。 局 部 变量 只 在 函数 执行 的 过 程 中 存在 。 而 在 
这 个 过 程 中 ,会 为 局 部 变量 在 栈 (或 堆 ) 内 存 上 分 配 相应 的 空间 ， 以 便 存 储 它们 的 值 。 然 后 在 函数 中 使 
用 这 些 变量 ， 直 至 函数 执行 结束 。 此 时 ， 局 部 变量 就 没有 存在 的 必要 了 ,因此 可 以 释放 它们 的 内 存 以 供 
将 来 使 用 。 在 这 种 情况 下 ,很 容易 判断 变量 是 否 还 有 存在 的 必要 ; 但 并 非 所 有 情况 下 都 这 么 容易 就 能 得 
出 结论 。 垃 圾 收集 器 必须 跟踪 哪个 变量 有 用 哪个 变量 没 用 ， 对 于 不 再 有 用 的 变量 打上 标记 ， 以 备 将 来 收 
回 其 占用 的 内 存 。 用 于 标识 无 用 变量 的 策略 可 能 会 因 实现 而 异 , 但 具体 到 浏览 器 中 的 实现 , 则 通常 有 两 
个 策略 。 


4.3.1 标记 清除 


JavaScript 中 最 常用 的 垃圾 收集 方式 是 标记 清除 ( mark-and-sweep )。 当 变量 进入 环境 (例如 ， 在 郴 
数 中 声明 一 个 变量 ) 时 ， 就 将 这 个 变量 标记 为 “进入 环境 "”。 从 逻辑 上 讲 ， 永 远 不 能 释放 进入 环境 的 变 















































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


4.3 垃圾 收集 79 








量 所 占用 的 内 存 ， 因 为 只 要 执行 流 进 入 相应 的 环境 ， 就 可 能 会 用 到 它们 。 而 当 变 量 离开 环境 时 ， 则 将 其 
标记 为 “离开 环境 ”。 

可 以 使 用 任何 方式 来 标记 变量 。 比 如 ， 可 以 通过 翻转 某 个 特殊 的 位 来 记录 一 个 变量 何 时 进入 环境 ， 
或 者 使 用 一 个 “进入 环境 的 ”变量 列表 及 一 个 “离开 环境 的 ”变量 列表 来 跟踪 哪个 变量 发 生 了 变化 。 说 
到 底 ， 如 何 标记 变量 其 实 并 不 重要 ， 关 键 在 于 采取 什么 策略 。 

垃圾 收集 器 在 运行 的 时 候 会 给 存储 在 内 存 中 的 所 有 变量 都 加 上 标记 当然 ， 可 以 使 用 任何 标记 方 
式 )。 然 后 ， 它 会 去 掉 环 境 中 的 变量 以 及 被 环境 中 的 变量 引用 的 变量 的 标记 。 而 在 此 之 后 青 被 加 上 标记 
的 变量 将 被 视 为 准备 删除 的 变量 ,原因 是 环境 中 的 变量 已 经 无 法 访问 到 这 些 变 量 了 。 最 后 ,垃圾 收集 器 
完成 内 存 清除 工作 ， 销 毁 那 些 带 标记 的 值 并 回收 它们 所 占用 的 内 存 空间 。 

到 2008 年 为 止 ， IE、Firefox、Opera、Chrome 和 Safari 的 JavaScript 实现 使 用 的 都 是 标记 清除 式 的 
垃圾 收集 策略 ( 或 类 似 的 策略 )， 只 不 过 垃圾 收集 的 时 间 间 隔 互 有 不 同 。 


4.3.2 引用 计数 


另 一 种 不 太 常 见 的 垃圾 收集 策略 叫做 引用 计数 ( reference counting )。 引 用 计数 的 含义 是 跟踪 记录 每 
个 值 被 引用 的 次 数 。 当 声明 了 一 个 变量 并 将 一 个 引用 类 型 值 赋 给 该 变量 时 , 则 这 个 值 的 引用 次 数 就 是 1。 
如 果 同 一 个 值 又 被 赋 给 另 一 个 变量 ， 则 该 值 的 引用 次 数 加 1。 相 反 ， 如 果 包 含 对 这 个 值 引用 的 变量 又 取 
得 了 另外 一 个 值 ， 则 这 个 值 的 引用 次 数 减 1。 当 这 个 值 的 引用 次 数 变 成 0 时 ， 则 说 明 没 有 办 法 再 访问 这 
个 值 了 ， 因 而 就 可 以 将 其 占用 的 内 存 空间 回收 回来 。 这 样 ， 当 垃圾 收集 器 下 次 再 运行 时 ， 它 就 会 释放 那 
些 引 用 次 数 为 零 的 值 所 占用 的 内 存 。 

Netscape Navigator 3.0 是 最 早 使 用 引用 计数 策略 的 浏览 器 ， 但 很 快 它 就 遇 到 了 一 个 严重 的 问题 : 循 
环 引用 。 循 环 引 用 指 的 是 对 象 A 中 包含 一 个 指向 对 象 B 的 指针 ， 而 对 象 B 中 也 包含 一 个 指向 对 象 A 的 
引用 。 请 看 下 面 这 个 例子 : 

function Problem(){ 


var objectA new Object(); 
var objectB new Object(); 



























































objectA.someOtherObject = objectB; 
objectB.anotherObject = objectAa; 
} 


在 这 个 例子 中 ，objectA 和 objectB 通过 各 自 的 属性 相互 引用 ; 也 就 是 说 ， 这 两 个 对 象 的 引用 次 
数 都 是 2。 在 采用 标记 清除 策略 的 实现 中 ， 由 于 函数 执行 之 后 ， 这 两 个 对 象 都 离开 了 作用 域 ， 因 此 这 种 
相互 引用 不 是 个 问题 。 但 在 采用 引用 计数 策略 的 实现 中 ， 当 函数 执行 完毕 后 ，objectA 和 objectB 还 
将 继续 存在 ， 因 为 它们 的 引用 次 数 永远 不 会 是 0。 假 如 这 个 函数 被 重复 多 次 调用 ， 就 会 导致 大 量 内 存 得 
不 到 回收 。 为 此 ，Netscape 在 Navigator 4.0 中 放弃 了 引用 计数 方式 ， 转 而 采用 标记 清除 来 实现 其 垃圾 收 
集 机 制 。 可 是 ， 引 用 计数 导致 的 麻烦 并 未 就 此 终结 。 

我 们 知道 ，IE 中 有 一 部 分 对 象 并 不 是 原生 JavaScript 对 象 。 例 如 ， 其 BOM 和 DOM 中 的 对 象 就 是 
使 用 C++ 以 COM (Component Object Model， 组 件 对 象 模型 ) 对 象 的 形式 实现 的 ， 而 COM 对 象 的 垃圾 
收集 机 制 采用 的 就 是 引用 计数 策略 。 因 此 ， 即 使 正 的 JavaScript 引擎 是 使 用 标记 清除 策略 来 实现 的 , 但 
JavaScript 访问 的 COM 对 象 依然 是 基于 引用 计数 策略 的 。 换 句 话说， 只 要 在 正 中 涉及 COM 对象, 就 会 
存在 循环 引用 的 问题 。 下 面 这 个 简单 的 例子 ， 展 示 了 使 用 COM 对 象 导致 的 循环 引用 问题 : 
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Var element = document .getElementById("Ssome_element'" ) ; 
Var myObject = new Object() ; 

myObject.element = element; 

element.someObject = myObject; 


这 个 例子 在 一 个 DOM 元 素 (element ) 与 一 个 原生 JavaScript 对 象 (myobject ) 之 间 创 建 了 循环 
引用 。 其 中 ， 变 量 myobject 有 一 个 名 为 element 的 属性 指向 element 对 象 ; 而 变量 element 也 有 
一 个 属性 名 叫 someobject 回 指 myobject。 由 于 存在 这 个 循环 引用 ， 即 使 将 例子 中 的 DOM 从 页 面 中 
移 除 ， 它 也 永远 不 会 被 回收 。 

为 了 避免 类 似 这 样 的 循环 引用 问题 ， 最 好 是 在 不 使 用 它们 的 时 候 手 工 断 开 原 生 JavaScript 对 象 与 
DOM 元 素 之 间 的 连接 。 例 如 ， 可 以 使 用 下 面 的 代码 消除 前 面 例子 创建 的 循环 引用 : 


myObject.element = null; 
element.someObject = null; 


将 变量 设置 为 null 意味 着 切断 变量 与 它 此 前 引用 的 值 之 间 的 连接 。 当 垃圾 收集 器 下 次 运行 时 ， 就 
会 删除 这 些 值 并 回收 它们 占用 的 内 存 。 

为 了 解决 上 述 问题 ，IE9 把 BOM 和 DOM 对 象 都 转换 成 了 真正 的 JavaScript 对 象 。 这 样 ， 就 避免 了 
两 种 垃圾 收集 算法 并 存 导 致 的 问题 ， 也 消除 了 常见 的 内 存 泄漏 现象 。 






































导致 循环 引用 的 情况 不 止 这 些 ， 其 他 一 些 情况 将 在 本 书 中 陆续 介 





4.3.3 ”性 能 问题 


垃圾 收集 器 是 周期 性 运行 的 , 而 且 如 果 为 变量 分 配 的 内 存 数量 很 可 观 , 那么 回收 工作 量 也 是 相当 大 

的 。 在 这 种 情况 下 ， 确 定 垃圾 收集 的 时 间 间 隔 是 一 个 非常 重要 的 问题 。 说 到 垃圾 收集 器 多 长 时 间 运 行 一 
次 ,不禁 让 人 联想 到 下 因此 而 声名 狼藉 的 性 能 问题 。IE 的 垃圾 收集 右 是 根据 内 存 分 配 量 运行 的 ， 具 体 
一 点 说 就 是 256 个 变量 、4096 个 对 象 ( 或 数组 ) 字面 量 和 数组 元 素 ( slot ) 或 者 64KB 的 字符 串 。 达 到 
上 述 任何 一 个 临界 值 ， 垃圾 收集 器 就 会 运行 。 这 种 实现 方式 的 问题 在 于 ， 如 果 一 个 脚本 中 包含 那么 多 变 
量 , 那么 该 脚本 很 可 能 会 在 其 生命 周期 中 一 直 保 有 那么 多 的 变量 。 而 这 样 一 来 ,垃圾 收集 器 就 不 得 不 频 
繁 地 运行 。 结 果 ， 由 此 引发 的 严重 性 能 问题 促使 IE7 重 写 了 其 垃圾 收集 例 程 。 
随 着 IE7 的 发 布 ， 其 JavaScript 引擎 的 垃圾 收集 例 程 改 变 了 工作 方式 : 触发 垃圾 收集 的 变量 分 配 、 
字面 量 和 (或 ) 数组 元 素 的 临界 值 被 调整 为 动态 修正 。IE7 中 的 各 项 临界 值 在 初始 时 与 IE6 相等 。 如 果 
垃圾 收集 例 程 回收 的 内 存 分 配 量 低 于 15%， 则 变量 、 字 面 量 和 (或 ) 数组 元 素 的 临界 值 就 会 加 倍 。 如 
例 程 回收 了 85% 的 内 存 分 配 量 , 则 将 各 种 临界 值 重 置 回 默认 值 。 这 一 看 似 简单 的 调整 , 极 大 地 提升 了 卫 
在 运行 包含 大 量 JavaScript 的 页 面 时 的 性 能 。 










































































































































事实 上 , 在 有 的 浏览 器 中 可 以 触发 垃圾 收集 过 程 ， 但 我 们 不 建议 读者 这 样 做 。 在 
正中, 调用 window.CollectGarbage() 方 法 会 立即 执行 垃圾 收集 。 在 Opera7 及 更 
高 版 本 中 ,调用 window.opera.collect() 也 会 启动 垃圾 收集 例 程 。 
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4.3.4 ”管理 内 存 


使 用 具备 垃圾 收集 机 制 的 语言 编写 程序 , 开发 人 员 一 般 不 必 操 心 内 存 管理 的 问题 。 但 是 ,JavaScript 
在 进行 内 存 管 理 及 垃圾 收集 时 面临 的 问题 还 是 有 点 与 众 不 同 。 其 中 最 主要 的 一 个 问题 , 就 是 分 配给 Web 
浏览 器 的 可 用 内 存 数量 通常 要 比分 配给 桌面 应 用 程序 的 少 。 这 样 做 的 目的 主要 是 出 于 安全 方面 的 考虑 ， 
目的 是 防止 运行 JavaScript 的 网 页 耗 尽 全 部 系统 内 存 而 导致 系统 骨 溃 。 内 存 限制 问题 不 仅 会 影响 给 变量 
分 配 内 存 ， 同 时 还 会 影响 调用 栈 以 及 在 一 个 线程 中 能 够 同时 执行 的 语句 数量 。 
因此 ， 确 保 占 用 最 少 的 内 存 可 以 让 页 面 获 得 更 好 的 性 能 。 而 优化 内 存 占 用 的 最 佳 方式 ， 就 是 为 执行 
中 的 代码 只 保存 必要 的 数据 。 一 旦 数据 不 再 有 用 ， 最 好 通过 将 其 值 设 置 为 null 来 释放 其 引用 一 一 这 个 
做 法 叫做 解除 引用 ( dereferencing )。 这 一 做 法 适用 于 大 多 数 全 局 变量 和 全 局 对 象 的 属性 。 局 部 变量 会 在 
它们 离开 执行 环境 时 自动 被 解除 引用 ， 如 下 面 这 个 例子 所 示 : 
function CreatePerson (name){ 
var localPerson = new Object() : 
localPerson.name = name; 


return localPerson; 


} 

























































































Var globalPerson = createPerson("Nicholas"); 
// 手工 解除 globalPerson 的 引用 


globalPerson = null; 


在 这 个 例子 中 ,变量 globalPerson 取得 了 createPerson () 函数 返回 的 值 . 在 createPerson () 
函数 内 部 ， 我 们 创建 了 一 个 对 象 并 将 其 赋 给 局 部 变量 localPerson， 然 后 又 为 该 对 象 添加 了 一 个 名 为 
name 的 属性 。 最 后 ， 当 调用 这 个 函数 时 ，1localPerson 以 函数 值 的 形式 返回 并 赋 给 全 局 变量 
globalPerson。 由 于 localPerson 在 createPerson () 函数 执行 完毕 后 就 离开 了 其 执行 环境 ， 因 此 

需 我 们 显 式 地 去 为 它 解除 引用 。 但 是 对 于 全 局 变量 globalPerson 而 言 ， 则 需要 我 们 在 不 使 用 它 的 
时 候 手工 为 它 解除 引用 ， 这 也 正 是 上 面 例子 中 最 后 一 行 代码 的 目的 。 

不 过 ,解除 一 个 值 的 引用 并 不 意味 着 自动 回收 该 值 所 占用 的 内 存 。 解 除 引用 的 真正 作用 是 让 值 脱离 

执行 环境 ， 以 便 垃 圾 收集 器 下 次 运行 时 将 其 回收 。 


4.4 小 结 
JavaScript 变量 可 以 用 来 保存 两 种 类 型 的 值 : 基本 类 型 值 和 引用 类 型 值 。 基本 类 型 的 值 源 自 以 下 5 


种 基本 数据 类 型 : Undefined、Null1、Boolean、Number 和 String。 基 本 类 型 值 和 引用 类 型 值 具 

有 以 下 特点 : 

口 基本 类 型 值 在 内 存 中 占据 固定 大 小 的 空间 ， 因 此 被 保存 在 栈 内 存 中 ; 

口 从 一 个 变量 向 另 一 个 变量 复制 基本 类 型 的 值 ， 会 创建 这 个 值 的 一 个 副本 ; 

口 引用 类 型 的 值 是 对 象 ， 保 存在 堆 内 存 中 ; 

口 包含 引用 类 型 值 的 变量 实际 上 包含 的 并 不 是 对 象 本 身 ， 而 是 一 个 指向 该 对 象 的 指针 ; 

口 从 一 个 变量 向 男 一 个 变量 复制 引用 类 型 的 值 ， 复 制 的 其 实 是 指针 ， 因 此 两 个 变量 最 终 都 指向 同 
一 个 对 象 ; 
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口 确定 一 个 值 是 哪 种 基本 类 型 可 以 使 用 typeof 操作 符 ， 而 确定 一 个 值 是 哪 种 引用 类 型 可 以 使 用 


instanceof 操作 符 。 





所 有 变量 ( 包括 基本 类 型 和 引用 类 型 ) 都 存在 于 一 个 执行 环境 〈 也 称 为 作用 域 ) 当中 ， 这 个 执 
行 环境 决定 了 变量 的 生命 周期 ， 以 及 哪 一 部 分 代码 可 以 访问 其 中 的 变量 。 以 下 是 关于 执行 环境 的 几 








色 乡 十 
点 总 结 : 




















局 环境 ; 





口 执行 环境 有 全 局 执行 环境 〈 也 称 为 全 局 环境 ) 和 函数 执行 环境 之 分 ; 
口 每 次 进入 一 个 新 执行 环境 ， 都 会 创建 一 个 用 于 搜索 变量 和 函数 的 作用 域 链 ; 
口 函数 的 局 部 环境 不 仅 有 权 访 问 函数 作用 域 中 的 变量 ， 























而 且 有 权 访 问 其 包含 ( 父 ) 环境 ， 乃 至 全 


























口 全 局 环境 只 能 访问 在 全 局 环境 中 定义 的 变量 
口 变量 的 执行 环境 有 助 于 确定 应 该 何 时 释放 内 存 。 


和 函数 ， 而 不 能 直接 访问 局 部 环境 中 的 任何 数据 ; 





JavaScript 是 一 门 具 有 自动 垃圾 收集 机 制 的 编程 语言 ， 开 发 人 员 不 必 关 心 内 存 分 配 和 回收 问题 。 可 


以 对 JavaScript 的 垃圾 收集 例 程 作 如 下 总 结 。 

















口 离开 作用 域 的 值 将 被 自动 标记 为 可 以 回收 ， 因 此 将 在 垃圾 收集 期 间 被 删除 。 

















后 再 回收 其 内 存 。 



































口 “标记 清除 ”是 目前 主流 的 垃圾 收集 算法 ， 这 种 算法 的 思想 是 给 当前 不 使 




















用 的 值 加 上 标记 ， 然 


口 男 一 种 垃圾 收集 算法 是 “引用 计数 ”, 这 种 算法 的 思想 是 跟踪 记录 所 有 值 被 引用 的 次 数 。JavaScript 


引擎 目前 都 不 再 使 用 这 种 算法 ; 但 在 IE 中 访问 非 原生 JavaScript 对 象 (如 DOM 元 素 ) 时 , 这 种 








算法 仍然 可 能 会 导致 问题 。 





口 当代 码 中 存在 循环 引用 现象 时 ,“ 引 用 计数 ”算法 就 会 导致 问题 。 














口 解除 变量 的 引用 不 仅 有 助 于 消除 循环 引 





用 现象 ， 而 且 对 垃圾 收集 也 有 好 处 。 为 了 下 





























保有 效 地 回 


收 内 存 ， 应 该 及 时 解除 不 再 使 用 的 全 局 对 象 、 全 局 对 象 属性 以 及 循环 引用 变量 的 引用 。 
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第 各 
引用 类 型 


本 章 内 容 

口 使 用 对 象 

口 创建 并 操作 数组 

口 理解 基本 的 JavaScript 类 型 
口 使 用 基本 类 型 和 基本 包装 类 型 




















5 用 类 型 的 值 (对象 ) 是 引用 类 型 的 一 个 实例 。 在 ECMAScript 中 ， 引 用 类 型 是 一 种 数据 结构 ， 

用 于 将 数据 和 功能 组 织 在 一 起 。 它 也 常 被 称 为 类 ， 但 这 种 称呼 并 不 妥当 。 尽 管 ECMAScript 
从 技术 上 讲 是 一 门面 向 对 象 的 语言 , 但 它 不 具备 传统 的 面向 对 象 语言 所 支持 的 类 和 接口 等 基本 结构 。 引 
用 类 型 有 时 候 也 被 称 为 对 象 定义 ， 因 为 它们 描述 的 是 一 类 对 象 所 具有 的 属性 和 方法 。 





























虽然 引用 类 型 与 类 看 起 来 相似 ， 但 它们 并 不 是 相同 的 概 您 。 为 避免 混淆 ,本 书 将 


不 使 用 类 这 个 概念 。 























如 前 所 述 ， 对 象 是 某 个 特定 引用 类 型 的 实例 。 新 对 象 是 使 用 new 操作 符 后 跟 一 个 构造 函数 来 创建 的 。 
构造 函数 本 身 就 是 一 个 函数 ， 只 不 过 该 函数 是 出 于 创建 新 对 象 的 目的 而 定义 的 。 请 看 下 面 这 行 代码 : 

Var person = new Object() :; 

这 行 代码 创建 了 object 引用 类 型 的 一 个 新 实例 ， 然 后 把 该 实例 保存 在 了 变量 person 中 。 使 用 
的 构造 函数 是 object， 它 只 为 新 对 象 定义 了 默认 的 属性 和 方法 。ECMAScript 提供 了 很 多 原生 引用 类 
型 (例如 object )， 以 便 开发 人 员 用 以 实现 常见 的 计算 任务 。 























5.1 Object 类 型 














到 目前 为 止 ， 我 们 看 到 的 大 多 数 引用 类 型 值 都 是 object 类 型 的 实例 ; 而 且 ，object 也 是 
ECMAScript 中 使 用 最 多 的 一 个 类 型 。 虽 然 object 的 实例 不 具备 多 少 功能 ， 但 对 于 在 应 用 程序 中 存储 
和 传输 数据 而 言 ， 它 们 确实 是 非常 理想 的 选择 。 

创建 object 实例 的 方式 有 两 种 。 第 一 种 是 使 用 new 操作 符 后 跟 opject 构造 函数 ， 如 下 所 示 : 

Var person = new Object(); 


person.name = "Nicholas"; 
person.age = 29; 















































ObjectTypeExample01.htm 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


84 第 5 章 引用 类 型 








另 一 种 方式 是 使 用 对 象 字 面 量 表示 法 。 对 象 字面 量 是 对 象 定义 的 一 种 简写 形式 ， 目 的 在 于 简化 创建 
包含 大 量 属性 的 对 象 的 过 程 。 下 面 这 个 例子 就 使 用 了 对 象 字面 量 语法 定义 了 与 前 面 那个 例子 中 相同 的 
person 对 象 ; 

















Var person = { 
name : "Nicholas", 
age : 29 


ObjectTypeExample02.htm 


在 这 个 例子 中 ， 左 边 的 花 括 号 ({ ) 表示 对 象 字 面 量 的 开始 ， 因 为 它 出 现在 了 表达 式 上 下 文 
( expression context ) 中 。ECMAScript 中 的 表达 式 上 下 文 指 的 是 能 够 返回 一 个 值 ( 表达 式 )。 赋 值 操作 
符 表示 后 面 是 一 个 值 ， 所 以 左 花 括号 在 这 里 表示 一 个 表达 式 的 开始 。 同 样 的 花 括号 ， 如 果 出 现在 一 个 
语句 上 下 文 (statement context ) 中 ， 例 如 跟 在 if£ 语句 条 件 的 后 面 ， 则 表示 一 个 语句 块 的 开始 。 

然后 ， 我 们 定义 了 name 属性 ， 之 后 是 一 个 冒号 ， 再 后 面 是 这 个 属性 的 值 。 在 对 象 字面 量 中 ， 使 用 
逗号 来 分 隔 不 同 的 属性 ， 因 此 "Nicholas" 后 面 是 一 个 逗号 。 但 是 ,在 age 属性 的 值 29 的 后 面 不 能 添 
加 逗号 , 因为 age 是 这 个 对 象 的 最 后 一 个 属性 。 在 最 后 一 个 属性 后 面 添加 逗号 ,会 在 IE7 及 更 早 版 本 和 

























































































Opera 中 导致 错误 。 
在 使 用 对 象 字面 量 语 法 时 ， 属 性 名 也 可 以 使 用 字符 串 ， 如 下 面 这 个 例子 所 示 。 
Var person = { 


"name" : "Nicholas", 

"age" : 29, 

5 : true 
这 个 例子 会 创建 一 个 对 象 ， 包含 三 个 属性 : name、age 和 5。 但 这 里 的 数值 属性 名 会 自动 转换 为 字 
符 串 。 

另外 ,使 用 对 象 字 面 量 语法 时 ， 如 果 留 空 其 花 括 号 ， 则 可 以 定义 只 包含 默认 属性 和 方法 的 对 象 ， 如 
下 所 示 : 


var person = {}; // 与 new Object() 相 同 
person.name = "Nicholas"; 
person.age = 29; 


这 个 例子 与 本 节 前 面 的 例子 是 等 价 的 ， 只 不 过 看 起 来 似乎 有 点 奇怪 。 关 于 对 象 字 男 
荐 只 在 考虑 对 象 属性 名 的 可 读 性 时 使 用 。 





























量 语法 ， 我 们 推 





























在 通过 对 象 字 面 量 定 义 对 象 时 ， 实 际 上 不 会 调用 Object 构造 函数 ( Firefox 2 及 


更 早 版 本 会 调用 Object 构造 函数 ; 但 Firefox 3 之 后 就 不 会 了 ) 。 





虽然 可 以 使 用 前 面 介绍 的 任何 一 种 方法 来 定义 对 象 , 但 开发 人 员 更 青睐 对 象 字 面 量 语法 ， 因 为 这 种 
语法 要 求 的 代码 量 少 ， 而且 能 够 给 人 封装 数据 的 感觉 。 实 际 上 ， 对象 字面 量 也 是 向 函数 传递 大 量 可 选 参 
数 的 首选 方式 ， 例 如 : 


function displayInfo(args) { 
C9 Var output = ""; 

















IE (typeof args.name == "string")t{ 
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output += "Name: " + args.name + "\n'"，; 
} 
if (typeof args.age == "number") { 

output += "Age: " + args.age + "\n"; 


} 


alert (output); 
} 


displayInfol(t{ 
name: "Nicholas", 
age: 29 

}) 3 


displayInfol(t{ 
name: "Greg" 


} 


ObjectTypeExample04.htm 


在 这 个 例子 中 ,函数 aisplayInfo () 接 受 一 个 名 为 args 的 参数 ,这 个 参数 可 能 带 有 一 个 名 为 name 
或 age 的 属性 , 也 可 能 这 两 个 属性 都 有 或 者 都 没有 。 在 这 个 函数 内 部 , 我 们 通过 typeof 操作 符 来 检测 
每 个 属性 是 否 存 在 , 然后 再 基于 相应 的 属性 来 构建 一 条 要 显示 的 消息 。 然 后 , 我 们 调用 了 两 次 这 个 函数 ， 
每 次 都 使 用 一 个 对 象 字 面 量 来 指定 不 同 的 数据 。 这 两 次 调用 传递 的 参数 虽然 不 同 , 但 函数 都 能 正常 执行 。 

















这 种 传递 参数 的 模式 最 适合 需要 向 函数 传 入 大 量 可 选 参数 的 情形 。 一 般 来 讲 ， 命 
名 参数 虽然 容易 处 理 ， 但 在 有 多 个 可 选 参数 的 情况 下 就 会 显示 不 够 灵活 。 最 好 的 做 法 
是 对 那些 必需 值 使 用 命名 参数 ， 而 使 用 对 象 字 面 量 来 封装 多 个 可 人选 参数 。 







一 般 来 说 ， 访 问 对 象 属性 时 使 用 的 都 是 点 表示 法 ， 这 也 是 很 多 面向 对 象 语言 中 通用 的 语法 。 不 过 ， 
在 JavaScript 也 可 以 使 用 方 括号 表示 法 来 访问 对 象 的 属性 。 在 使 用 方 括号 语法 时 ， 应 该 将 要 访问 的 属性 
以 字符 串 的 形式 放 在 方 括号 中 ， 如 下 面 的 例子 所 示 。 


alert (person["name"]); //"Nicholas" 
alert (person.name); //"Nicholas" 


从 功能 上 看 ,这 两 种 访问 对 象 属性 的 方法 没有 任何 区 别 。 但 方 括号 语法 的 主要 优点 是 可 以 通过 变量 
来 访问 属性 ， 例 如 : 


Var propertyName = "name"; 
alert (person[propertyName]); //"Nicholas" 


如 果 属 性 名 中 包含 会 导致 语法 错误 的 字符 , 或 者 属性 名 使 用 的 是 关键 字 或 保留 字 , 也 可 以 使 用 方 括 
号 表示 法 。 例 如 : 

person["first name"] = "Nicholas"; 
由 于 "first name" 中 包含 一 个 空格 ， 所 以 不 能 使 用 点 表示 法 来 访问 它 。 然 而 ， 属 性 名 中 是 可 以 包 
含 非 字 母 非 数字 的 ， 这 时 候 就 可 以 使 用 方 括号 表示 法 来 访问 它们 。 

通常 ， 除 非 必 须 使 用 变量 来 访问 属性 ， 否 则 我 们 建议 使 用 点 表示 法 。 
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除了 object 之 外 ，Array 类 型 忍 人 是 ECMAScript 中 最 常用 的 类 型 了 。 而 且 ，ECMAScript 中 
的 数组 与 其 他 多 数 语言 中 的 数组 有 着 相当 大 的 区 别 。 虽 然 ECMAScript 数组 与 其 他 语言 中 的 数组 都 是 
数据 的 有 序列 表 ， 但 与 其 他 语言 不 同 的 是 ，ECMAScript 数组 的 每 一 项 可 以 保存 任何 类 型 的 数据 。 也 
就 是 说 , 可 以 用 数组 的 第 一 个 位 置 来 保存 字符 串 , 用 第 二 位 置 来 保存 数值 , 用 第 三 个 位 置 来 保存 对 象 ， 
以 此 类 推 。 而 且 ，ECMAScript 数组 的 大 小 是 可 以 动态 调整 的 ， 即 可 以 随 着 数据 的 添加 自动 增长 以 容 
纳 新 增 数据 。 

创建 数组 的 基本 方式 有 两 种 。 第 一 种 是 使 用 Array 构造 函数 ， 如 下 面 的 代码 所 示 。 

Var colors = new Array(); 

如 果 预 完 知道 数组 要 保存 的 项 目 数量 ,也 可 以 给 构造 函数 传递 该 数量 ,而 该 数量 会 自动 变 成 length 
属性 的 值 。 例 如 ， 下 面 的 代码 将 创建 length 值 为 20 的 数组 。 

var colors = new Array (20); 

也 可 以 向 Array 构造 函数 传递 数组 中 应 该 包含 的 项 ,以 下 代码 创建 了 一 个 包含 3 个 字符 串 值 的 数组 : 

var colors = new Array ("red", "blue", "green"); 

当然 ,给 构造 函数 传递 一 个 值 也 可 以 创建 数组 。 但 这 时 候 问 题 就 复杂 一 点 了 ， 因 为 如 果 传 递 的 是 数 
值 ， 则 会 按照 该 数值 创建 包含 给 定 项 数 的 数组 ; 而 如 果 传 递 的 是 其 他 类 型 的 参数 ， 则 会 创建 包含 那个 值 
的 只 有 一 项 的 数组 。 下 面 就 两 个 例子 : 


var colors = new Array (3); // 创建 一 个 包含 3 项 的 数组 
var names = new Array ("Greg"); // 创建 一 个 包含 1 项 ， 即 字符 囊 "Greg" 的 数组 
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另外 , 在 使 用 Array 构造 函数 时 也 可 以 省 略 new 操作 符 。 如 下 面 的 例子 所 示 ， 省 略 new 操作 符 的 
结果 相同 : 


var colors = Array (3); // 创建 一 个 包含 3 项 的 数组 
var names = Array ("Greg"); // 创建 一 个 包含 1 项 ， 即 字符 囊 "Greg" 的 数组 


创建 数组 的 第 二 种 基本 方式 是 使 用 数组 字面 量 表示 法 。 数 组 字面 量 由 一 对 包含 数组 项 的 方 括号 表 
示 ， 多 个 数组 项 之 间 以 逗号 隔 开 ， 如 下 所 示 : 


























var colors = ["red"，"blue"，"green"]; // 创建 一 个 包含 3 个 字符 囊 的 数组 

var names = []; // 创建 一 个 空 数组 

var values = [1,2,]; // 不 要 这 样 | 这 样 会 创建 一 个 包含 2 或 3 项 的 数组 
var options = [,,,,, j // 不 要 这 样 1 这 样 会 创建 一 个 包含 5 或 6 项 的 数组 
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以 上 代码 的 第 一 行 创建 了 一 个 包含 3 个 字符 串 的 数组 。 第 二 行使 用 一 对 空 方 括号 创建 了 一 个 空 数 组 。 
第 三 行 展示 了 在 数组 字面 量 的 最 后 一 项 添加 逗号 的 结果 : 在 IE 中 ,values 会 成 为 一 个 包含 3 个 项 目 每 
项 的 值 分 别 为 1、2 和 undefined 的 数组 ; 在 其 他 浏览 ，values 会 成 为 一 个 包含 2 项 上 且 值 分 别 为 
1 和 2 的 数组 。 原 因 是 IE8 及 之 前 版 本 中 的 ECMAScript 实现 在 数组 字面 量 方面 存在 bug。 由 于 这 个 bug 
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导致 的 男 一 种 情况 如 最 后 一 行 代码 所 示 , 该 行 代码 可 能 会 创建 包含 5 项 的 数组 (在 IE9+、Firefox、Opera、 
Safari 和 Chrome 中 ), 也 可 能 会 创建 包含 6 项 的 数组 ( 在 IE8 及 更 早 版 本 中 )。 在 像 这 种 省 略 值 的 情况 下 ， 
每 一 项 都 将 获得 undefined 值 ; 这 个 结果 与 调用 Array 构造 函数 时 传递 项 数 在 逻辑 上 是 相同 的 。 但 是 
由 于 丐 的 实现 与 其 他 浏览 器 不 一 臻 ,因此 我 们 强烈 建议 不 要 使 用 这 种 语法 。 











与 对 象 一 样 ， 在 使 用 数组 字面 量 表示 法 时 ， 也 不 会 调用 Array 构造 函数 (Firefox 3 


及 更 早 版 本 除外 ) 。 





在 读 取 和 设置 数组 的 值 时 ， 要 使 用 方 括号 并 提供 相应 值 的 基于 0 的 数字 索引 ， 如 下 所 示 : 








var colors = ["red"，"blue"，"green"]; // 定义 一 个 字符 串 数组 
alert (colors[0]); // 显示 第 一 项 
colors[2] = "black"; // 修改 第 三 项 
colors[3] = "brown"; // 新 增 第 四 项 


方 括号 中 的 索引 表示 要 访问 的 值 。 如 果 索 引 小 于 数组 中 的 项 数 ， 则 返回 对 应 项 的 值 ， 就 像 这 个 例子 
中 的 colors [0] 会 显示 "red" 一 样 。 设置 数组 的 值 也 使 用 相同 的 语法 , 但 会 替换 指定 位 置 的 值 。 如 果 设 
置 某 个 值 的 索引 超过 了 数组 现 有 项 数 ， 如 这 个 例子 中 的 colors [31 所 示 ， 数 组 就 会 自动 增加 到 该 索引 
值 加 1 的 长 度 〈 就 这 个 例子 而 言 ， 索 引 是 3， 因 此 数组 长 度 就 是 4 )。 

数组 的 项 数 保存 在 其 1ength 属性 中 ， 这 个 属性 始终 会 返回 0 或 更 大 的 值 ， 如 下 面 这 个 例子 所 示 : 


























var colors = ["red", "blue'", "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
var names = []; // 创建 一 个 空 数组 

alert (colors.length); //3 

alert (names .Length) //0 





数组 的 length 属性 很 有 特点 一 一 它 不 是 只 读 的 。 因 此 ,通过 设置 这 个 属性 ， 可 以 从 数组 的 末尾 移 
除 项 或 向 数组 中 添加 新 项 。 请 看 下 面 的 例子 : 








var colors = ["red", "blue'", "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
C9 colors.length = 2; 
alert (colors[2]); //undefined 
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这 个 例子 中 的 数组 colors 一 开始 有 3 个 值 。 将 其 1ength 属性 设置 为 2 会 移 除 最 后 一 项 (位置 为 

2 的 那 一 项 ), 结果 再 访问 colors [2] 就 会 显示 undefined 了 。 如 果 将 其 1ength 属性 设置 为 大 于 数组 
项 数 的 值 ， 则 新 增 的 每 一 项 都 会 取得 undefined 值 ， 如 下 所 示 : 























var colors = ["red", "blue'", "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
“9 colors.length = 4; 
alert (colors[3]); //undefined 
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在 此 ,虽然 colors 数组 包含 3 个 项 , 但 把 它 的 lengtn 属性 设置 成 了 4。 这 个 数组 不 存在 位 置 3， 
所 以 访问 这 个 位 置 的 值 就 得 到 了 特殊 值 undefined。 
利用 length 属性 也 可 以 方便 地 在 数组 未 尾 添加 新 项 ， 如 下 所 示 : 























图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


88 第 5 章 引用 类 型 





var colors = ["red"，"blue"，"green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
colors [colors .Length] = "black"; // (在 位 置 3) 添加 一 种 颜色 
colors [colors .Length] = "brovwmnn // (在 位 置 4) 再 添加 一 种 颜色 
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由 于 数组 最 后 一 项 的 索引 始终 是 length-1， 因 此 下 一 个 新 项 的 位 置 就 是 length。 每 当 在 数组 末 
尾 添加 一 项 后 ， 其 length 属性 都 会 自动 更 新 以 反应 这 一 变化 。 换 名 话说， 上 面 例子 第 二 行 中 的 
colors[colors.1length] 为 位 置 3 添加 了 一 个 值 ， 最 后 一 行 的 colors [colors .length] 则 为 位 置 4 
添加 了 一 个 值 。 当 把 一 个 值 放 在 超出 当前 数组 大 小 的 位 置 上 时 ， 数 组 就 会 重新 计算 其 长 度 值 ， 即 长 度 值 
等 于 最 后 一 项 的 索引 加 1， 如 下 面 的 例子 所 示 : 

var colors = ["red", "blue", "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 


colors[99] = "black"; // (在 位 置 99) 添加 一 种 颜色 
alert (colors.length); // 100 
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在 这 个 例子 中 , 我 们 向 colors 数组 的 位 置 99 搬入 了 一 个 值 , 结果 数组 新 长 度 ( length ) 就 是 100 
( 99+1 )。 而 位 置 3 到 位 置 98 实际 上 都 是 不 存在 的 ， 所 以 访问 它们 都 将 返回 undefined。 
















数组 最 多 可 以 包含 4294967 295 个 项 , 这 几乎 已 经 能 够 满足 任何 编程 需求 了 。 如 
果 想 添加 的 项 数 超过 这 个 上 限 值 ， 就 会 发 生 异常 。 而 创建 一 个 初始 大 小 与 这 个 上 限 值 
接近 的 数组 ， 则 可 能 会 导致 运行 时 间 超 长 的 脚本 错误 。 


5.2.1 检测 数组 
自从 ECMAScript3 做 出 规定 以 后 ， 就 出 现 了 确定 某 个 对 象 是 不 是 数组 的 经 典 问题 。 对 于 一 个 网 页 ， 
或 者 一 个 全 局 作用 域 而 言 ， 使 用 instanceof 操作 符 就 能 得 到 满意 的 结果 : 


if (value instanceof Array)t{ 


// 对 数组 执行 某 些 操作 


























} 

instanceof 操作 符 的 问题 在 于 ， 它 假定 只 有 一 个 全 局 执行 环境 。 如 果 网 页 中 包含 多 个 框架 ， 那 实 
际 上 就 存在 两 个 以 上 不 同 的 全 局 执行 环境 ， 从 而 存在 两 个 以 上 不 同 版 本 的 Array 构造 函数 。 如 果 你 从 
一 个 框架 向 男 一 个 框架 传人 一 个 数组 , 那么 传人 的 数组 与 在 第 二 个 框架 中 原生 创建 的 数组 分 别 具 有 各 自 
不 同 的 构造 函数 。 

为 了 解决 这 个 问题 ， ECMAScript 5 新 增 了 Array.isaArray() 方 法 。 这 个 方法 的 目的 是 最 终 确 定 某 
个 值 到 底 是 不 是 数组 ， 而 不 管 它 是 在 哪个 全 局 执行 环境 中 创建 的 。 这 个 方法 的 用 法 如 下 。 


if (Array.isArray (value))t{ 


// 对 数组 执行 某 些 操作 





















































} 


支持 Array .isArray () 方 法 的 浏览 器 有 IE9+、Firefox 4+、Safari 5+、Opera 10.5+ 和 Chrome。 要 
在 尚未 实现 这 个 方法 中 的 浏览 器 中 准确 检测 数组 ， 请 参考 22.1.1 节 。 
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5.2.2 ”转换 方法 


如 前 所 述 ， 所 有 对 象 都 具有 toLocalestring()、toString() 和 valueof () 方 法 。 其 中 ， 调 用 
数组 的 tostring () EA eT DO A 而 
调用 valueof () 返 回 的 还 是 数组 。 实 际 上 ， 为 了 创建 这 个 字符 串 会 调用 数组 每 一 项 的 tostring () 方 
法 。 来 看 下 面 这 个 例子 。 


























var colors = ["red", "blue'", "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
alert (colors .上 toString() )? // red,blue,green 
alert (colors.valueOf ()); // red,blue,green 
alert (colors); // red,blue,green 
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在 这 里 ,我 们 首先 显 式 地 调用 了 tostring () 方 法 ， 以 便 返 回 数组 的 字符 串 表示 ， 每 个 值 的 字符 串 
表示 拼接 成 了 一 个 字符 串 ， 中 间 以 逗号 分 隔 。 接 着 调用 valueof () 方 法 ， 而 最 后 一 行 代码 直接 将 数组 
传递 给 了 alert ()。 由 于 alert() 要 接收 字符 串 参 数 ， 所 以 它 会 在 后 台 调 用 ee 由 此 
会 得 到 与 直接 调用 tostring () 方 法 相同 的 结果 。 

另外 ，toLocalestring () 方 法 经 常 也 会 返回 与 tostring () 和 valueof () 方 法 相同 的 值 ， 但 也 

总 是 如 此 。 当 调用 数组 的 SR () 方 法 时 ， 它 也 会 创建 一 个 数组 值 的 以 逗号 分 隔 的 字符 
中 。 的 不 同 之 处 在 于 , 这 一 次 为 了 取得 每 一 项 的 值 , 调用 的 是 每 一 项 的 toLocale- 
string () 方 法 ， 而 不 是 tostring () 方 法 。 请 看 下 面 这 个 例子 。 

var PerSon1 = { 


toLocaleString : function () { 
return "Nikolaos"; 

















}, 


toString. i function() 攻 
return "Nicholas"; 
} 
2 


Var person2 = { 
toLocaleString : function () { 
return "Grigorios"; 


}, 


toString : function() { 
return "Greg"; 
} 
于 


Var people = [personl, person2]; 

alert (people); //Nicholas,Greg 
alert (people.toString()); //Nicholas,Greg 
alert (people.toLocaleString()); //Nikolaos,Grigorios 
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我 们 在 这 里 定义 了 两 个 对 象 :person1l 和 person2。 而 且 还 分 别 为 每 个 对 象 定义 了 一 个 tostring () 
方法 和 一 个 toLocalestring () 方 法 ， 这 两 个 方法 返回 不 同 的 值 。 然 后 ， 创 建 一 个 包含 前 面 定义 的 两 
个 对 象 的 数组 。 在 将 数组 传递 给 alert () 时 ， 输 出 结果 是 "Nicholas,Greg"， 因 为 调用 了 数组 每 一 项 
的 tostring() 方 法 (同样 ， 这 与 下 一 行 显 式 调用 tostring() 方 法 得 到 的 结果 相同 )。 而 当 调 用 数组 
的 toLocalestring() 方 法 时 ， 输 出 结果 是 "Nikolaos,Grigorios"， 原 因 是 调用 了 数组 每 一 项 的 
toLocaleString() 方 法 。 

数组 继承 的 toLocalestring() 、tostring() 和 valueof () 方 法 ， 在 默认 情况 下 都 会 以 逗号 分 隔 的 字 
符 串 的 形式 返回 数组 项 。 而 如 果 使 用 join () 方 法 ， 则 可 以 使 用 不 同 的 分 隔 符 来 构建 这 个 字符 串 。join () 方 
法 只 接收 一 个 参数 ， 即 用 作 分 隔 符 的 字符 串 ， 然 后 返回 包含 所 有 数组 项 的 字符 串 。 请 看 下 面 的 例子 : 









































Var colors = ["red", "green", "blue"]; 
alert (colors.join(",")); //red,green,blue 
alert (colors.join("||")); //red||green| |blue 
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在 这 里 ， 我 们 使 用 join () 方 法 重 现 了 tostring() 方 法 的 输出 。 在 传递 逗号 的 情况 下 ， 得 到 了 以 
逗号 分 隔 的 数组 值 。 而 在 最 后 一 行 代码 中 ， 我 们 传递 了 双 竖 线 符号 ， 结 果 就 得 到 了 字符 串 "red | | 
green | |blue"。 如 果 不 给 join() 方 法 传人 任何 值 ， 或 者 给 它 传人 undefined， 则 使 用 逗号 作为 分 隔 
符 。IE7 及 更 早 版 本 会 错误 的 使 用 字符 串 "undefined" 作 为 分 隔 符 。 























如 果 数 组 中 的 某 一 项 的 值 是 null 或 者 undefined， 那 么 该 值 在 join()、 


toLocaleString() 、toString() 和 valueof () 方 法 返回 的 结果 中 以 空 字符 串 表 示 。 





5.2.3 ” 栈 方 法 


ECMAScript 数组 也 提供 了 一 种 让 数组 的 行为 类 似 于 其 他 数据 结构 的 方法 。 具 体 说 来 ， 数 组 可 以 表 
现 得 就 像 栈 一 样 ， 后 者 是 一 种 可 以 限制 插入 和 删除 项 的 数据 结构 。 栈 是 一 种 LIFO ( Last-In-First-Out， 
后 进 先 出 ) 的 数据 结构 ， 也 就 是 最 新 添加 的 项 最 早 被 移 除 。 而 栈 中 项 的 插入 ( 叫做 推 入 ) 和 移 除 ( 叫做 
弹出 )， 只 发 生 在 一 个 位 置 一 一 栈 的 顶部 。ECMAScript 为 数组 专门 提供 了 push() 和 pop() 方 法 ， 以 便 
实现 类 似 栈 的 行为 。 

push() 方 法 可 以 接收 任意 数量 的 参数 ， 把 它们 逐个 添加 到 数组 末尾 ， 并 返回 修改 后 数组 的 长 度 。 而 
pop () 方 法 则 从 数组 未 尾 移 除 最 后 一 项 ， 减 少数 组 的 1ength 值 ， 然 后 返回 移 除 的 项 。 请 看 下 面 的 例子 : 























var colors = new Array(); // 创建 一 个 数组 
var count = colors.push("red", "green"); // 推 入 两 项 
alert (count) //2 

count = colors.push("black"); // 推 入 另 一 项 
alert (count); 人 | 

var item = colors.pop(); // 取得 最 后 一 项 
alert (item); //"black" 

alert (colors.length); /2 
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以 上 代码 中 的 数组 可 以 看 成 是 栈 (代码 本 身 没有 任何 区 别 ， 而 push () 和 pop () 都 是 数组 默认 的 方 
法 ), 首先 , 我 们 使 用 push () 将 两 个 字符 串 推 人 数组 的 末尾 , 并 将 返回 的 结果 保存 在 变量 count 中 ( 值 
为 2 )。 然 后 ， 再 推 和 一 个 值 ， 而 结果 仍然 保存 在 count 中 。 因 为 此 时 数组 中 包含 3 项 ， 所 以 push () 
返回 3。 在 调用 pop () 时 ， 它 会 返回 数组 的 最 后 一 项 ， 即 字符 串 "black"。 此 后 ， 数 组 中 仅 剩 两 项 。 

可 以 将 栈 方法 与 其 他 数组 方法 连用 ， 像 下 面 这 个 例子 一 样 。 















































var colors = ["red", "blue"]; 

时 colors.push("brown" ) ; // 添加 另 一 项 
colors[3] = "black"; // 添加 一 项 
alert (colors.length); // 4 
var item = colors.pop(); // 取得 最 后 一 项 
alert (item); //"black" 
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在 此 ， 我 们 首先 用 两 个 值 来 初始 化 一 个 数组 。 然 后 ， 使 用 push () 添 加 第 三 个 值 ， 再 通过 直接 在 位 
置 3 上 赋值 来 添加 第 四 个 值 。 而 在 调用 pop () 时 ,该 方法 返回 了 字符 串 "black" ， 即 最 后 一 个 添加 到 数 
组 的 值 。 


5.2.4 ”队列 方法 


栈 数据 结构 的 访问 规则 是 LIFO( 后 进 先 出 ), 而 队列 数据 结构 的 访问 规则 是 FIFO( First-In-First-Out， 
先进 先 出 ), 队列 在 列表 的 末端 添加 项 , 从 列表 的 前 端 移 除 项 。 由 于 push () 是 向 数组 末端 添加 项 的 方法 ， 
因此 要 模拟 队列 只 需 一 个 从 数组 前 端 取得 项 的 方法 。 实现 这 一 操作 的 数组 方法 就 是 shift (), 它 能 够 移 
除数 组 中 的 第 一 个 项 并 返回 该 项 ， 同 时 将 数组 长 度 减 1。 结 合 使 用 shift () 和 push() 方 法 ， 可 以 像 使 
用 队列 一 样 使 用 数组 。 















































var colors = new Array(); / /创建 一 个 数组 
var count = colors.push("red", "green"); // 推 入 两 项 
alert (count); /7 人 2 

count = colors.push("black"); // 推 入 另 一 项 
alert (count); *3 

var item = colors.shift(); // 取 得 第 一 项 
alert (item); //"red" 


alert (colors.length); //2 
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这 个 例子 首先 使 用 push () 方 法 创建 了 一 个 包含 3 种 颜色 名 称 的 数组 。 代 码 中 加 粗 的 那 一 行使 用 
shift() 方 法 从 数组 中 取得 了 第 一 项 ， 即 "red"。 在 移 除 第 一 项 之 后 ，"green" 就 变 成 了 第 一 项 ， 而 
"black" 则 变 成 了 第 二 项 ， 数 组 也 只 包含 两 项 了 。 

ECMAScript 还 为 数组 提供 了 一 个 unshift() 方 法 .顾名思义 ,unshift() 与 shift() 的 用 途 相反 
它 能 在 数组 前 端 添 加 任意 个 项 并 返回 新 数组 的 长 度 。 因 此 ， 同 时 使 用 unshift() 和 pop() 方 法 ， 可 以 
从 相反 的 方向 来 模拟 队列 ， 即 在 数组 的 前 端 添 加 项 ， 从 数组 末端 移 除 项 ， 如 下 面 的 例子 所 示 。 




















var colors = new Array(); / /创建 一 个 数组 
Var count = colors.unshift("red", "green"); // 推 入 两 项 
alert (count); /72 
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天 
count = colors.unshift ("black"); // 推 入 另 一 项 
alert (count); A/3 
var item = colors.pop(); // 取 得 最 后 一 项 


alert (Item) //"green" 
alert (colors.length); //2 


ArrayTypeExamplel2.htm 
这 个 例子 创建 了 一 个 数组 并 使 用 unshift () 方 法 先后 推 信 了 3 个 值 。 首先 是 "red" 和 "green", 然 


后 是 "black"， 数 组 中 各 项 的 顺序 为 "black"、 、"green"。 在 调用 pop () 方 法 时 ， 移 除 并 返回 
的 是 最 后 一 项 ， 即 "green"。 








T red” 





IE7 及 更 早 版 本 对 JavaScript 的 实现 中 存在 一 个 偏差 ， 其 unshift() 方 法 总 是 返 


回 undefined 而 不 是 数组 的 新 长 度 。IE8 在 非 兼容 模式 下 会 返回 正确 的 长 度 值 。 





5.2.5 重 排 序 方 法 


数组 中 已 经 存在 两 个 可 以 直接 用 来 重 排序 的 方法 : *everse() 和 sort() 。 有 读者 可 能 猜 到 了 ， 
reverse () 方 法 会 反 转 数组 项 的 顺序 。 请 看 下 面 这 个 例子 。 





var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert (values); VAs Pe el 
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这 里 数组 的 初始 值 及 顺序 是 1、2、3、4、5。 而 调用 数组 的 reverse () 方 法 后 ， 其 值 的 顺序 变 成 了 
5、4、3、2、1。 这 个 方法 的 作用 相当 直观 明了 ， 但 不 够 灵活 ， 因 此 才 有 了 sort () 方 法 。 

在 默认 情况 下 ，sort () 方 法 按 升序 排列 数组 项 一 一 即 最 小 的 值 位 于 最 前 面 ， 最 大 的 值 排 在 最 后 面 。 
为 了 实现 排序 ，sort () 方 法 会 调用 每 个 数组 项 的 tostring () 转型 方法 ， 然 后 比较 得 到 的 字符 串 ， 以 
确定 如 何 排序 。 即 使 数组 中 的 每 一 项 都 是 数值 ，sort () 方 法 比较 的 也 是 字符 串 ， 如 下 所 示 。 

Var values = [0, 


values.sort (); 
alert (values); 





























1 Gy 0 LS]: 


yO L1015.;5 
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可 见 , 即使 例子 中 值 的 顺序 没有 问题 , 但 sort () 方 法 也 会 根据 测试 字符 串 的 结果 改变 原来 的 顺序 。 
因为 数值 5 虽然 小 于 10, 但 在 进行 字符 串 比 较 时 , "10" 则 位 于 "5" 的 前 面 , 于 是 数组 的 顺序 就 被 修改 了 。 
不 用 说 ， 这 种 排序 方式 在 很 多 情况 下 都 不 是 最 佳 方案 。 因 此 sort () 方 法 可 以 接收 一 个 比较 函数 作为 参 
数 ， 以 便 我 们 指定 哪个 值 位 于 哪个 值 的 前 面 。 




















比较 函数 接收 两 个 参数 ， 如 果 第 一 个 参数 应 该 位 于 第 二 个 之 前 则 返 
回 0， 如 果 第 一 个 参数 应 该 位 于 第 二 个 之 后 则 返 

















则 返 





回 一 个 负数 ,如 果 两 个 参数 相等 





回 一 个 正 数 。 以 下 就 是 一 个 简单 的 比较 函数 : 
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function compare(valuel, value2) { 
中 if (valuel < value2) { 
return -1; 
} else if (valuel > value2) { 
return 1; 
} else { 
return 0; 


} 
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这 个 比较 函数 可 以 适用 于 大 多 数 数据 类 型 ， 只 要 将 其 作为 参数 传递 给 sort () 方 法 即 可 ， 如 下 面 这 
个 例子 所 示 。 


var values = [0, 1, 5, 10, 15]; 
values.sort (compare); 
alert (values); 7 DLL 5 L015 


在 将 比较 函数 传递 到 sort () 方 法 之 后 ， 数 值 仍然 保持 了 正确 的 升序 。 当 然 ， 也 可 以 通过 比较 函数 [= 
产生 降序 排序 的 结果 ， 只 要 交换 比较 函数 返回 的 值 即 可 。 


function compare(valuel, value2) { 
IE (valuel < value2) { 
return 1; 
} else if (valuel > value2) { 
return -1; 





} else { 
return 0; 
} 
} 
var values = [0, 1, 5, 10, 15]; 
values.sort (compare); 
alert (values); // 15,10,5,1,0 
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在 这 个 修改 后 的 例子 中 ， a 数 在 第 一 个 值 应 该 位 于 第 二 个 之 后 的 情况 下 返回 1， 而 在 第 一 个 值 
应 该 在 第 二 个 之 前 的 情况 下 返回 -1。 交换 返回 值 的 意思 是 让 更 大 的 值 排 位 更 靠 前 , 也 就 是 对 数组 按照 降 
序 排序 。 当 然 ， Was 顺序 ， 使 用 reverse () 方 法 要 更 快 一 















reverse() 和 sort () 方 法 的 返回 值 是 经 过 排序 之 后 的 数组 。 








对 于 数值 类 型 或 者 其 valueof () 方 法 会 返回 数值 类 型 的 对 象 类 型 ， 可 以 使 用 一 个 更 简单 的 比较 函 
数 。 这 个 函数 只 要 用 第 二 个 值 减 第 一 个 值 即 可 。 
function compare(valuel, value2)f{ 


return value2 - valuel; 


} 
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由 于 比较 函数 通过 返回 一 个 小 于 零 、 等 于 零 或 大 于 零 的 值 来 影响 排序 结果 ,因此 减法 操作 就 可 以 适 
当地 处 理 所 有 这 些 情 况 。 


5.2.6 ”操作 方法 


ECMAScript 为 操作 已 经 包含 在 数组 中 的 项 提供 了 很 多 方法 。 其 中 ，concat () 方 法 可 以 基于 当前 数 
组 中 的 所 有 项 创建 一 个 新 数组 。 具 体 来 说 ， 这 个 方法 会 先 创建 当前 数组 一 个 副本 ， 然 后 将 接收 到 的 参数 
添加 到 这 个 副本 的 末尾 ， 最 后 返回 新 构建 的 数组 。 在 没有 给 concat () 方 法 传递 参数 的 情况 下 ， 它 只 是 
复制 当前 数组 并 返回 副本 。 如 果 传 递 给 concat () 方 法 的 是 一 或 多 个 数组 ， 则 该 方法 会 将 这 些 数组 中 的 
每 一 项 都 添加 到 结果 数组 中 。 如 果 传 递 的 值 不 是 数组 ， 这 些 值 就 会 被 简单 地 添加 到 结果 数组 的 末尾 。 下 
面 来 看 一 个 例子 。 



























































var colors = ["red", "green", "blue"]; 

Var COLoOrs2 = CoOlors.concat ("yellow", [blackn "brown"]}s 
alert (colors); //red,green,blue 

alert (colors2); //red,green,blue,yellow,black, brown 
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以 上 代码 开始 定义 了 一 个 包含 3 个 值 的 数组 colors。 然 后 ， 基 于 colors 调用 了 concat () 方 法 ， 
并 传人 字符 串 "yellow" 和 一 个 包含 "black" 和 "brown" 的 数组 。 最 终 ， 结 果 数 组 colors2 中 包含 了 
"red"、"green"、"blue"、"yellow"、"black" 和 "brown"。 至 于 原来 的 数组 colors， 其 值 仍 然 
保持 不 变 。 

下 一 个 方法 是 slice () , 它 能 够 基于 当前 数组 中 的 一 或 多 个 项 创建 一 个 新 数组 。slice () 方 法 可 以 
接受 一 或 两 个 参数 ， 即 要 返回 项 的 起 始 和 结束 位 置 。 在 只 有 一 个 参数 的 情况 下 ，slice() 方 法 返回 从 该 
参数 指定 位 置 开 始 到 当前 数组 末尾 的 所 有 项 。 如 果 有 两 个 参数 ,该 方法 返回 起 始 和 结束 位 置 之 间 的 项 一 
一 但 不 包括 结束 位 置 的 项 。 注 意 ，slice() 方 法 不 会 影响 原始 数组 。 请 看 下 面 的 例子 。 

var colors = ["red", "green", "blue", "yellow", "purple"]; 


Var COLOrSs2 colors.slice(1); 
Var COLOrS3 colors.slice(1,4); 


























alert (colors2); //green,blue,yellow,purple 
alert (colors3); //green,blue,yellow 
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在 这 个 例子 中 , 开始 定义 的 数组 colors 包含 5 项。 调用 slice() 并 传人 1 会 得 到 一 个 包含 4 项 的 

新 数组 ; 因为 是 从 位 置 1 开始 复制 ， 所 以 会 包含 "green "而 不 会 包含 "redq"。 这 个 新 数组 colors2 中 
包含 的 是 "green"、"blue"、"yellow" 和 "purple"。 接 着 , 我们 再 次 调用 slice() 并 传人 了 1 和 4， 
表示 复制 从 位 置 1 开始 ， 到 位 置 3 结束 。 结 果 数 组 colors3 中 包含 了 "green"、"blue" 和 "yellow"。 





























如 果 slice() 方 法 的 参数 中 有 一 个 负数 , 则 用 数组 长 度 加 上 该 数 来 确定 相应 的 位 
置 。 例如， 在 一 个 包含 5 项 的 数组 上 调用 slice(-2,-1) 与 调用 slice(3,4) 得 到 的 
结果 相同 。 如 果 结 束 位 置 小 于 起 始 位 置 ， 则 返回 空 数组 。 
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下 面 我 们 来 介绍 splice () 方 法 ， 这 个 方法 疏 伯 要 算是 最 强大 的 数组 方法 了 ， 它 有 很 多 种 用 法 。 
splice() 的 主要 用 途 是 向 数组 的 中 部 插入 项 ， 但 使 用 这 种 方法 的 方式 则 有 如 下 3 种 。 

口 删除 : 可 以 删除 任意 数量 的 项 ， 只 需 指 定 2 个 参数 : 要 删除 的 第 一 项 的 位 置 和 要 删除 的 项 数 。 

例如 ，splice(0,2) 会 删除 数组 中 的 前 两 项 。 

口 插入 : 可 以 向 指定 位 置 插入 任意 数量 的 项 ， 只 需 提供 3 个 参数 : 起 始 位 置 、0 (要 删除 的 项 数 ) 
和 要 插入 的 项 。 如 果 要 插入 多 个 项 ， 可 以 再 传人 第 四 、 第 五 ， 以 至 任意 多 个 项 。 例 如 ， 
splice(2,0,"red", "green") 会 从 当前 数组 的 位 置 2 开始 插入 字符 串 "red" 和 "green"。 

口 替换 : 可 以 向 指定 位 置 插入 任意 数量 的 项 ， 且 同时 删除 任意 数量 的 项 ， 只 需 指定 3 个 参数 : 起 
始 位 置 、 要 删除 的 项 数 和 要 插入 的 任意 数量 的 项 。 插 入 的 项 数 不 必 与 删除 的 项 数 相等 。 例 如 ， 
splice (2,1,"red","green") 会 删除 当前 数组 位 置 2 的 项 ， 然 后 再 从 位 置 2 开始 插入 字符 串 
"red" 和 "green"。 
splice() 方 法 始终 都 会 返回 一 个 数组 ， 该 数组 中 包含 从 原始 数组 中 删除 的 项 〈 如果 没 有 删除 任何 
项 ， 则 返回 一 个 空 数 组 )。 下 面 的 代码 展示 了 上 述 3 种 使 用 splice () 方 法 的 方式 。 































































































var colors = ["red", "green", "blue"]; 

var removed = colors.splice(0,1); // 删除 第 一 项 

alert (colors); // green,blue 

alert (removed); // red， 返回 的 数组 中 只 包含 一 项 

removed = colors.splice(1, 0, "yellow", "orange"); // 从 位 置 1 开始 插入 两 项 
alert (colors); // green,yellow,orange,blue 

alert (removed); // 返回 的 是 一 个 空 数组 

removed = colors.splice(1, 1, "red", "purple"); // 插入 两 项 ， 删 除 一 项 
alert (colors); // green,red,purple,orange,blue 

alert (removed); // yellow,， 返回 的 数组 中 只 包含 一 项 
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上 面 的 例子 首先 定义 了 一 个 包含 3 项 的 数组 colors 。 第 一 次 调用 splice () 方 法 只 是 删除 了 这 个 数组 的 
第 一 项 ， 之 后 colors 还 包含 "green" 和 "blue" 两 项 。 第 二 次 调用 splice () 方 法 时 在 位 置 1 插入 了 两 项 ， 
结果 colors 中 包含 "green" 、"yellow" 、"orange" 和 "blue"。 这 一 次 操作 没有 删除 项 ， 因 此 返回 了 一 个 
空 数 组 。 最 后 一 次 调用 splice() 方 法 删除 了 位 置 1 处 的 一 项 ， 然 后 又 插入 了 "regd" 和 "purple"。 在 完成 以 
上 操作 之 后 ， 数 组 colors 中 包含 的 是 "green"、"red"、"purple"、"orange" 和 "blue"。 


5.2.7 ”位 置 方法 

ECMAScript 5 为 数组 实例 添加 了 两 个 位 置 方法 : ingdexof () 和 lastIndexof () 。 这 两 个 方法 都 接收 
两 个 参数 : 要 查找 的 项 和 ( 可 选 的 ) 表示 查找 起 点 位 置 的 索引 。 其 中 ，ingexof () 方 法 从 数组 的 开头 (位 
置 0 ) 开始 向 后 查找 ，lastIndexof () 方 法 则 从 数组 的 末尾 开始 向 前 查找 。 

这 两 个 方法 都 返回 要 查找 的 项 在 数组 中 的 位 置 , 或 者 在 没 找到 的 情况 下 返回 -1。 在 比较 第 一 个 参数 
与 数组 中 的 每 一 项 时 , 会 使 用 全 等 操作 符 ; 也 就 是 说 , 要 求 查 找 的 项 必须 严格 相等 ( 就 像 使 用 一 -= 一样 )。 















































以 下 是 几 个 例子 。 
var riumbers [27357 和 7 55747357271]57 
alert (numbers.indexOf (4) ) ; 人 
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alert (numbers.lastIndexOf (4) ) ; //5 
alert (numbers.indexOf (4, 4)); //5 
alert (numbers.lastIndexOf (4, 4)); //3 


Var person 
var people 


{ name: "Nicholas" }; 
[{ name: "Nicholas" }]; 


Var morePeople = [person]; 
alert (people.indexOf (person)); //-1 
alert (morePeople.indexOf (person)); //0 
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使 用 indexof () 和 lastIndexof () 方 法 查找 特定 项 在 数组 中 的 位 置 非常 简单 , 支持 它们 的 浏览 器 包 
括 IE9+、Firefox 2+、Safari 3+、Opera 9.5+ 和 Chrome。 


5.2.8 和 迭代 方法 


ECMAScript 5 为 数组 定义 了 5 个 迭代 方法 。 每 个 方法 都 接收 两 个 参数 : 要 在 每 一 项 上 运行 的 函数 和 
( 可 选 的 ) 运行 该 函数 的 作用 域 对 象 一 一 影响 this 的 值 。 传 人 这 些 方法 中 的 函数 会 接收 三 个 参数 : 数 
组 项 的 值 、 该 项 在 数组 中 的 位 置 和 数组 对 象 本 身 。 根 据 使 用 的 方法 不 同 ， 这 个 函数 执行 后 的 返回 值 可 能 
会 也 可 能 不 会 影响 方法 的 返回 值 。 以 下 是 这 5 个 欠 代 方法 的 作用 。 
口 every () : 对 数组 中 的 每 一 项 运行 给 定 函数 ， 如 果 该 函数 对 每 一 项 都 返回 true， 则 返回 true。 
口 filter (): 对 数组 中 的 每 一 项 运行 给 定 函 数 ， 返 回 该 函数 会 返回 true 的 项 组 成 的 数组 。 
口 forEach (): 对 数组 中 的 每 一 项 运行 给 定 函 数 。 这 个 方法 没有 返回 值 。 
口 map () : 对 数组 中 的 每 一 项 运行 给 定 函 数 ， 返 回 每 次 函数 调用 的 结果 组 成 的 数组 。 
口 some () : 对 数组 中 的 每 一 项 运行 给 定 函 数 ， 如 果 该 函数 对 任 一 项 返回 true， 则 返回 true。 

以 上 方法 都 不 会 修改 数组 中 的 包含 的 值 。 

在 这 些 方法 中 ,最 相似 的 是 every () 和 some () ,它们 都 用 于 查询 数组 中 的 项 是 否 满足 某 个 条 件 。 
对 every () 来 说 ,传人 的 函数 必须 对 每 一 项 都 返回 true， 这 个 方法 才 返 回 true; 否则 ， 它 就 返回 
false。 而 some () 方 法 则 是 只 要 传人 的 函数 对 数组 中 的 某 一 项 返回 true， 就 会 返回 true。 请 看 以 下 
例子 。 


个 var numbers = [1,2,3,4,5,4,3,2,1]; 








































































































Var everyResult = numbers.every (function(item, index, array)t 
return (item > 2); 

J 

alert (everyResult); //false 

Var someResult = numbers.some (function(item, index, array)t{ 
return (item > 2); 


3 


alert (someResult); //true 
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以 上 代码 调用 了 every() 和 some () ,传人 的 函数 只 要 给 ee 就 会 返回 true。 对 于 every () ， 
它 返回 的 是 false， 因 为 只 有 部 分 数组 项 符合 条 件 。 对 于 some () ， 结 果 就 是 true， 因 为 至 少 有 一 项 
是 大 于 2 的 。 

下 面 再 看 一 看 filter () 函数 ， 它 利用 指定 的 函数 确定 是 否 在 返回 的 数组 中 包含 某 一 项 。 例 如 ,要 
返回 一 个 所 有 数值 都 大 于 2 的 数组 ， 可 以 使 用 以 下 代码 。 


四 var numbers = [1,2,3,4,5,4,3,2,1]; 











Var filterResult = numbers.filter(function(item, index, array){ 
return (item > 2); 


> 


alert (filterResult); //[3,4,5,4,3] 
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这 里 ， 通 过 调用 filter () 方 法 创建 并 返回 了 包含 3、4、5、4、3 的 数组 ， 因 为 传人 的 函数 对 它们 
每 一 项 都 返回 true。 这 个 方法 对 查询 符合 某 些 条件 的 所 有 数组 项 非常 有 用 。 5 
map () 也 返回 一 个 数组 ， 而 这 个 数组 的 每 一 项 都 是 在 原始 数组 中 的 对 应 项 上 运行 传人 函数 的 结果 。 
例如 ， 可 以 给 数组 中 的 每 一 项 乘 以 2， 然 后 返回 这 些 乘积 组 成 的 数组 ， 如 下 所 示 。 


var numbers = [1,2,3,4,5,4,3,2,1]; 





Var mapResult = numbers.map (function(item, index, array)t{ 
return item * 2; 


yj 


alert (mapResult); //[2,4,6,8,10,8,6,4,2] 
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以 上 代码 返回 的 数组 中 包含 给 每 个 数 乘 以 2 之 后 的 结果 。 这 个 方法 适合 创建 包含 的 项 与 男 一 个 数组 
一 一 对 应 的 数组 。 
最 后 一 个 方法 是 forEach ()， 它 只 是 对 数组 中 的 每 一 项 运行 传人 的 函数 。 这 个 方法 没有 返回 值 ， 
本 质 上 与 使 用 for 循环 迭代 数组 一 样 。 来 看 一 个 例子 。 


var numbers = [1,2,3,4,5,4,3,2,1]; 











numbers.forEach (function(item, index, array)t{ 
/ /执行 某 些 操作 
}); 
这 些 数组 方法 通过 执行 不 同 的 操作 ,可 以 大 大 方便 处 理 数组 的 任务 。 支 持 这 些 迭 代 方 法 的 浏览 器 有 
IE9+、Firefox 2+、Safari 3+、Opera 9.5+ 和 和 Chrome。 


5.2.9 ”归并 方法 


ECMAScript 5 还 新 增 了 两 个 归并 数组 的 方法 : reduce () 和 reduceRight ()。 这 两 个 方法 都 会 迭 
代数 组 的 所 有 项 ， 然 后 构建 一 个 最 终 返回 的 值 。 其 中 ，reduce () 方 法 从 数组 的 第 一 项 开始 ， 逐 个 遍历 
到 最 后 。 而 reduceRight () 则 从 数组 的 最 后 一 项 开始 ， 向 前 遍历 到 第 一 项 。 

这 两 个 方法 都 接收 两 个 参数 : 一 个 在 每 一 项 上 调用 的 函数 和 ( 可 选 的 ) 作为 归并 基础 的 初始 值 。 传 
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给 requce() 和 reduceRight () 的 函数 接收 4 个 参数 : 前 一 个 值 、 当 前 值 、 项 的 索引 和 数组 对 象 。 这 
个 函数 返回 的 任何 值 都 会 作为 第 一 个 参数 自动 传 给 下 一 项 。 第 一 次 迭代 发 生 在 数组 的 第 二 项 上 ,因此 第 
一 个 参数 是 数组 的 第 一 项 ， 第 二 个 参数 就 是 数组 的 第 二 项 。 
使 用 <edquce () 方 法 可 以 执行 求 数组 中 所 有 值 之 和 的 操作 ， 比 如 : 
SU var Values = [1,2,3,4,5]; 


var sum = values.reduce(function(prev, cur, index, array)t{ 
return prev + cur; 

用 

alert (sum); //15 
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第 一 次 执行 回调 函数 ，prev 是 1，cur 是 2。 第 二 次 ,prev 是 3 (1 加 2 的 结果 ),，cur 是 3 (数组 
的 第 三 项 )。 这 个 过 程 会 持续 到 把 数组 中 的 每 一 项 都 访问 一 遍 ， 最 后 返回 结果 。 

reduceRight () 的 作用 类 似 ， 只 不 过 方向 相反 而 已 。 来 看 下 面 这 个 例子 。 

Var Values = [1,2,3,4,5]; 

Var sum = Values.reduceRight (function(prev, cur, index, array)t{ 

return prev + cur; 

I 

alert (sum); //15 

在 这 个 例子 中 ,第 一 次 执行 回调 函数 ，prev 是 5，cur 是 4。 当然 ,最 终结 果 相 同 ， 因 为 执行 的 者 
是 简单 相 加 的 操作 。 

使 用 reduce() 还 是 reducerRight () ， 主 要 取决 于 要 从 哪 头 开始 遍历 数组 。 除 此 之 外 ， 它 们 完全 
相同 。 

支持 这 两 个 归并 函数 的 浏览 器 有 IE9+、Firefox 3+、Safari 4+、Opera 10.5 和 Chrome。 

















5.3 Date 类 型 

















ECMAScript 中 的 Date 类 型 是 在 早期 Java 中 的 java.util.Date 类 基础 上 构建 的 。 为 此 ，Date 
类 型 使 用 自 UTC ( Coordinated Universal Time ， 国 际 协调 时 间 ) 1970 年 1 月 1 日 午夜 ( 零 时 ) 开始 经 过 
的 毫秒 数 来 保存 日 期 。 在 使 用 这 种 数据 存储 格式 的 条 件 下 ，pate 类 型 保存 的 日 期 能 够 精确 到 1970 年 1 
月 1 日 之 前 或 之 后 的 285 616 年 。 

要 创建 一 个 日 期 对 象 ， 使 用 new 操作 符 和 Date 构造 函数 即 可 ， 如 下 所 示 。 


CD Var now = new Date(); 
DateTypeExample01.htm 


在 调用 Date 构造 函数 而 不 传递 参数 的 情况 下 ， 新 创建 的 对 象 自动 获得 当前 日 期 和 时 间 。 如 果 想 根 
据 特 定 的 日 斯 和 时 间 创 建 日 期 对 象 ， 必 须 传人 表示 该 日 期 的 毫秒 数 ( 即 从 UTC 时 间 1970 年 1 月 1 日 午 
夜 起 至 该 日 期 止 经 过 的 毫秒 数 )。 为 了 简化 这 一 计算 过 程 ，ECMAScript 提供 了 两 个 方法 : Date.parse() 
和 Date.UTC()。 
其 中 ，Date .parse() 方 法 接收 一 个 表示 日 期 的 字符 串 参 数 ， 然 后 尝试 根据 这 个 字符 串 返 回 相 应 日 
期 的 毫秒 数 。ECMA-262 没有 定义 Date.parse () 应 该 支持 哪 种 日 期 格式 ， 因 此 这 个 方法 的 行为 因 实现 
而 异 ， 而 且 通 常 是 因 地 区 而 异 。 将 地 区 设置 为 美国 的 浏览 器 通常 都 接受 下 列 日 期 格式 : 






















































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


2 


5.3 ”Date 类 型 99 





口 “月 /日 /年 "， 如 6/13/2004; 

口 “英文 月 名 日 ,年 "， 如 January 12,2004; 

口 “英文 星期 几 英文 月 名 日 年 时 :分 : 秒 时 区 ”， 如 Tue May 25 2004 00:00:00 GMT-0700。 

口 ISO 8601 扩展 格式 YYYY-MM-DDTHH:mm:ss.sssZ ( 例如 2004-05-25T00:00:00 )。 只 有 兼容 
ECMAScript 5 的 实现 支持 这 种 格式 。 

例如 ， 要 为 2004 年 5 月 25 日 创建 一 个 日 期 对 象 ， 可 以 使 用 下 面 的 代码 : 


Var someDate = new Date(Date.parse("May 25, 2004")); 
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如 果 传 人 Date .parse() 方 法 的 字符 串 不 能 表示 日 期 ,那么 oe NaN。 实 际 上 ， 如 果 直 接 将 表 
示 日 期 的 字符 串 传 递 给 Date 构造 函数 ， 也 会 在 后 台 调 用 Date .parse()。 换 句 话 说 ,下面 的 代码 与 前 
面 的 例子 是 等 价 的 : 

Var someDate = new Date("May 25，2004") 


这 行 代码 将 会 得 到 与 前 面相 同 的 日 期 对 象 。 
























































日 期 对 象 及 其 在 不 同 浏览 器 中 的 实现 有 许多 奇怪 的 行为 。 其 中 有 一 种 倾向 是 将 超 
出 范围 的 值 蔡 换 成 当前 的 值 ， 以 便 生 成 输出 。 人 例如， 在 解析 "January 32，2007" 
时 ， 有 的 浏览 器 会 将 其 解释 为 "February 1，2007"。 而 Opera 则 倾向 于 插入 当前 月 
份 的 当前 日 期 ， 返回 "January 当前 日 期 ，2007"。 也 就 是 说 ， 如 果 在 2007 年 9 月 
21 日 运行 前 面 的 代码 ， 将 会 得 到 "January 21，2007" (都 是 21 日 ) 。 


















Date.UTC() 方 法 同样 也 返回 表示 日 期 的 毫秒 数 ， 但 它 与 Date .parse() 在 构建 值 时 使 用 不 同 的 信 
息 。Date.UTC() 的 参数 分 别 是 年 份 、 基 于 0 的 月 份 (一 月 是 0, 二 月 是 1， 以 此 类 推 )、 月 中 的 哪 一 天 
(1 到 31)、 小 时 数 (0 到 23 )、 分 钟 、 秒 以 及 毫秒 数 。 在 这 些 参数 中 ， 只 有 前 两 个 参数 ( 年 和 月 ) 是 必 
需 的 。 如 果 没 有 提供 月 中 的 天 数 ， 则 假设 天 数 为 1; 如 果 省 略 其 他 参数 ， 则 统统 假设 为 0。 以 下 是 两 个 
使 用 Date.UTc() 方 法 的 例子 : 


// GMT 时 间 2000 年 1 月 1 日 午夜 零 时 
Var y2k = new Date(Date.UTC(2000，0) ) 























// GMT 时 间 2005 年 5 月 5 日 下 午 5:55:55 
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55)); 


DateTypeUTCExample01.htm 


这 个 例子 创建 了 两 个 日 期 对 象 。 第 一 个 对 象 表示 GMT 时 间 2000 年 1 月 1 日 午夜 零 时 , 传人 的 值 一 
个 是 表示 年 份 的 2000， 一 个 是 表示 月 份 的 0 ( 即 一 月 份 )。 因 为 其 他 参数 是 自动 填充 的 ( 即 月 中 的 天 数 
为 1， 其 他 所 有 参数 均 为 0 )， 所 以 结果 就 是 该 月 第 一 天 的 午夜 零 时 。 第 二 个 对 象 表示 GMT 时 间 2005 
年 5 月 5 日 下 午 5:55:55， 即 使 日 斯 和 时 间 中 只 包含 5， 也 需要 传 入 不 一 样 的 参数 : 月 份 必须 是 4 ( 因为 
月 份 是 基于 0 的 )、 小 时 必须 设置 为 17 ( 因为 小 时 以 0 到 23 表示 )， 剩 下 的 参数 就 很 直观 了 。 

如 同 模仿 pate.parse() 一 样 ，Date 构造 函数 也 会 模仿 Date.Urc() ， 但 有 一 点 明显 不 同 : 日 期 
和 时 间 都 基于 本 地 时 区 而 非 GMT 来 创建 。 不 过 ，pDate 构造 函数 接收 的 参数 仍然 与 Date .uvUTc () 相同 。 
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因此 ， 如 果 第 一 个 参数 是 数值 ，Date 构造 函数 就 会 假设 该 值 是 日 期 中 的 年 份 ， 而 第 二 个 参数 是 月 份 ， 
以 此 类 推 。 据 此 ， 可 以 将 前 面 的 例子 重 写 如 下 。 


// 本 地 时 间 2000 年 1 月 1 日 午夜 索 时 
Var y2k = new Date(2000, 0); 





// 本 地 时 间 2005 年 5 月 5 日 下 午 5:55:55 
var allFives = new Date(2005, 4, 5, 17, 55, 55); 


DateTypeConstructorExample01.htm 


以 上 代码 创建 了 与 前 面 例子 中 相同 的 两 个 日 期 对 象 , 只 不 过 这 次 的 日 期 都 是 基于 系统 设置 的 本 地 时 
区 创建 的 。 

ECMAScript5 添加 了 Data.now() 方 法 , 返回 表示 调用 这 个 方法 时 的 日 斯 和 时 间 的 毫秒 数 。 这 个 方 
法 简化 了 使 用 Data 对 象 分 析 代 码 的 工作 。 例 如 : 


// 取 得 开始 时 间 
Var start = Date.now(); 

















// 调 用 函数 
doSomething (); 


// 取 得 停止 时 间 
Var stop = Date.now() ， 
result = stop - start; 


支持 Data.now() 方 法 的 浏览 需 包 括 IE9+、Firefox 3+、Safari 3+、Opera 10.5 和 Chrome。 在 不 支 
持 它 的 浏览 ， 使 用 + 操作 符 把 Data 对 象 转换 成 字符 串 ， 也 可 以 达到 同样 的 目的 。 


// 取 得 开始 时 间 
var start = +new Date(); 























// 调 用 函数 

doSomething(); 

// 取 得 停止 时 间 

Var stop = +new Date(), 
result = stop - start; 


5.3.1 继承 的 方法 


与 其 他 引用 类 型 一 样 , Date 类 型 也 重 写 了 toLocalestring() toString() 和 valueof () 方 法 ; 
但 这 些 方法 返回 的 值 与 其 他 类 型 中 的 方法 不 同 。Date 类 型 的 toLocalestring () 方 法 会 按照 与 浏览 
设置 的 地 区 相 适 应 的 格式 返回 日 期 和 时 间 。 这 大 致意 味 着 时 间 格 式 中 会 包含 AM 或 PM， 但 不 会 包含 时 
区 信息 ( 当然， 具体 的 格式 会 因 浏览 器 而 异 )。 而 tostring () 方 法 则 通常 返回 带 有 时 区 信息 的 日 期 和 
时 间 ， 其 中 时 间 一 般 以 军用 时 间 ( 即 小 时 的 范围 是 0 到 23 ) 表示 。 下 面 给 出 了 在 不 同 浏览 器 中 调用 
toLocaleString() 和 toString() 方 法 , 输出 PST(Pacific Standard Time, 太平 洋 标 准时 间 ) 时 间 2007 
年 2 月 1 日 午夜 零 时 的 结果 。 

Internet Explorer 8 


toLocaleString() 一 Thursday, February 01, 2007 12:00:00 AM 
toString() 一 Thu Feb 1 00:00:00 PST 2007 
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Firefox 3.5 

toLocaleString() 一 Thursday, February 01, 2007 12:00:00 AM 

coString() 一 Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 

Safari 4 

toLocaleString() 一 Thursday, February 01, 2007 00:00:00 

coString() 一 Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 

Chrome 4 

toLocaleString() 一 Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 

coString() 一 Thu Feb 01 2007 00:00:00 GMT-0800 (Pacific Standard Time) 

Opera 10 

toLocaleSstring() — 2/1/2007 12:00:00 AM 

tostring() 一 Thu, 01 Feb 2007 00:00:00 GMT-0800 

显然 ， 这 两 个 方法 在 不 同 的 浏览 器 中 返回 的 日 期 和 时 间 格 式 可 谓 大 相 径 庭 。 事 实 上 ， 
toLocalestring() 和 tostring() 的 这 一 差别 仅 在 调试 代码 时 比较 有 用 , 而 在 显示 日 期 和 时 间 时 没有 


什么 价值 。 
至 于 Date 类 型 的 valueof () 方 法 ， 则 根本 不 返回 字符 串 ， 而 是 返回 日 期 的 毫秒 表示 。 因 此 ， 可 以 
方便 使 用 比较 操作 符 〈 小 于 或 大 于 ) 来 比较 日 期 值 。 请 看 下 面 的 例子 。 


Var datel 
Var date2 











new Date(2007, 0, 1); /rir"January 1 2007™" 
new Date(2007, 1, 1); //"February 1, 2007" 


alert (datel < date2); //true 
alert(datel > date2); //false 


DateTypeValueOfExample01.htm 


从 逻辑 上 讲 ，2007 年 1 月 1 日 要 早 于 2007 年 2 月 1 日 ， 此 时 如 果 我 们 说 前 者 小 于 后 者 比较 符合 常 
理 。 而 表示 2007 年 1 月 1 日 的 毫秒 值 小 于 表示 2007 年 2 月 1 日 的 毫秒 值 ， 因 此 在 首先 使 用 小 于 操作 符 
比较 日 期 时 ， 返 回 的 结果 是 true。 这 样 ， 就 为 我 们 比较 日 期 提供 了 极 大 方便 。 


5.3.2 日 期 格式 化 方法 


Date 类 型 还 有 一 些 专门 用 于 将 日 期 格式 化 为 字符 串 的 方法 ， 这 些 方法 如 下 。 
口 toDateStzring () 一 一 以 特定 于 实现 的 格式 显示 星期 几 、 月 、 日 和 年 ; 
口 toTimeString () 一 一 以 特定 于 实现 的 格式 显示 时 、 分 、 秒 和 时 区 ; 
口 toLocaleDateString() 一 一 以 特定 于 地 区 的 格式 显示 星期 几 、 月 、 日 和 年 ; 
口 toLocaleTimeString() 一 一 以 特定 于 实现 的 格式 显示 时 、 分 、 秒 ; 
口 toUTCString () 一 一 以 特定 于 实现 的 格式 完整 的 UTC 日 期 。 
与 toLocaleString() 和 toSstring () 方 法 一 样 ， 以 上 这 些 字符 串 格 式 方 法 的 输出 也 是 因 浏览 需 
而 异 的 ， 因 此 没有 哪 一 个 方法 能 够 用 来 在 用 户 界 面 中 显示 一 致 的 日 期 信息 。 










































除了 前 面 介 绍 的 方法 之 外 ， 还 有 一 个 名 叫 toGMTString () 的 方法 ， 这 是 一 个 与 
toUTCString () 等 价 的 方法 ， 其 存在 目的 在 于 确保 向 后 兼容 。 不 过 ，ECMAScript 推 
荐 现在 编写 的 代码 一 律 使 用 toUTCString () 方 法 。 
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5.3.3 日 期 /时 间 组 件 方 法 

到 目前 为 止 ， 剩 下 还 未 介绍 的 Date 类 型 的 方法 ( 如 下 表 所 示 )， 都 是 直接 取得 和 设置 日 期 值 中 特 
定 部 分 的 方法 了 。 需要 注意 的 是 , UTC 日 期 指 的 是 在 没有 时 区 偏差 的 情况 下 ( 将 日 期 转换 为 GMT 时 间 ) 
的 日 期 值 。 























































































































































































































































































































方 法 说 明 
getTime () 返回 表示 日 期 的 毫秒 数 ; 与 valueof () 方 法 返回 的 值 相同 
setTime (毫秒 ) 以 毫秒 数 设置 日 期 ， 会 改变 整个 日 期 
getFullYear () 取得 4 位 数 的 年 份 ( 如 2007 而 非 仅 07 ) 
getUTCFull1Year () 返回 UTC 日 期 的 4 位 数 年 份 
setFullYear (年 ) 设置 日 期 的 年 份 。 传 入 的 年 份 值 必须 是 4 位 数字 ( 如 2007 而 非 仅 07 ) 
setUTCFullYear (年 ) 设置 UTC 日 期 的 年 份 。 传 人 的 年 份 值 必须 是 4 位 数字 ( 如 2007 而 非 仅 07 ) 
getMonth () 返回 日 期 中 的 月 份 ， 其 中 0 表示 一 月 ，11 表 示 十 二 月 
getUTCMontn () 返回 UTC 日 期 中 的 月 份 ， 其 中 0 表示 一 月 ，11 表 示 十 二 月 
setMonth (月 ) 设置 日 期 的 月 份 。 传 人 的 月 份 值 必须 大 于 0， 超 过 11 则 增加 年 份 
setUTCMonth (月 ) 设置 UTC 日 期 的 月 份 。 传 人 的 月 份 值 必须 大 于 0， 超 过 11 则 增加 年 份 
getDate() 返回 日 期 月 份 中 的 天 数 (1 到 31 ) 
getUTCDate () 返回 UTC 日 期 月 份 中 的 天 数 ( 1 到 31 ) 
setDate (日 ) 设置 日 期 月 份 中 的 天 数 。 如 果 传 人 的 值 超过 了 该 月 中 应 有 的 天 数 ， 则 增加 月 份 
setUTCDate (日 ) 设置 UTC 日 期 月 份 中 的 天 数 。 如 果 传 人 的 值 超过 了 该 月 中 应 有 的 天 数 , 则 增加 月 份 
getDay () 返回 日 期 中 星期 的 星期 几 ( 其 中 0 表示 星期 日 ，6 表 示 星 期 六 ) 
getUTCDay () 返回 UTC 日 期 中 星期 的 星期 几 ( 其 中 0 表示 星期 日 ，6 表 示 星 期 六 ) 
getHours () 返回 日 期 中 的 小 时 数 ( 0 到 23 ) 
getUTCHours () 返回 UTC 日 期 中 的 小 时 数 (0 到 23 ) 
setHours (时 ) 设置 日 期 中 的 小 时 数 。 传 入 的 值 超过 了 23 则 增加 月 份 中 的 天 数 
setUTCHours (时 ) 设置 UTC 日 期 中 的 小 时 数 。 传 入 的 值 超 过 了 23 则 增加 月 份 中 的 天 数 
getMinutes () 返回 日 期 中 的 分 钟 数 ( 0 到 59 ) 
getUTCMinutes () 返回 UTC 日 期 中 的 分 钟 数 ( 0 到 59 ) 
setMinutes (分 ) 设置 日 期 中 的 分 钟 数 。 传 人 的 值 超 过 59 则 增加 小 时 数 
setUTCMinutes (分 ) 设置 UTC 日 期 中 的 分 钟 数 。 传 人 的 值 超过 59 则 增加 小 时 数 
getSeconds() 返回 日 期 中 的 秒 数 ( 0 到 59 ) 
getUTCSeconds () 返回 UTC 日 期 中 的 秒 数 ( 0 到 59 ) 
setSeconds ( 秒 ) 设置 日 期 中 的 秒 数 。 传 人 的 值 超过 了 59 会 增加 分 钟 数 
setUTCSeconds ( 秒 ) 设置 UTC 日 期 中 的 秒 数 。 传 人 的 值 超 过 了 59 会 增加 分 钟 数 
getMilliseconds () 返回 日 期 中 的 毫秒 数 
getUTCMilliseconds () 返回 UTC 日 期 中 的 毫秒 数 
setMilliseconds (毫秒 ) 设置 日 期 中 的 毫秒 数 
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( 续 ) 
方 ” ”法 说 明 
setUTCMilliseconds (毫秒 ) 设置 UTC 日 期 中 的 毫秒 数 
getTimezoneoffset () 返回 本 地 时 间 与 UTC 时 间 相 差 的 分 钟 数 。 例 如 ， 美 国 东部 标准 时 间 返 回 300。 在 某 




















地 进入 夏令 时 的 情况 下 ， 这 个 值 会 有 所 变化 





5.4 RegExp 类 型 








ECMAScript 通过 RegExp 类 型 来 支持 正则 表达 式 。 使 用 下 面 类 似 Perl 的 语法 ， 就 可 以 创建 一 个 正 
则 表达 式 。 

Var expression = / pattern / flags ; 
其 中 的 模式 ( pattern ) 部 分 可 以 是 任何 简单 或 复杂 的 正则 表达 式 ， 可 以 包含 字符 类 、 限 定 符 、 分 组 、 
向 前 查找 以 及 反 向 引用 。 每 个 正则 表达 式 都 可 带 有 一 或 多 个 标志 ( flags )， 用 以 标明 正则 表达 式 的 行为 。 
正则 表达 式 的 匹配 模式 支持 下 列 3 个 标志 。 
口 g: 表示 全 局 ( global ) 模式 ， 即 模式 将 被 应 用 于 所 有 字符 串 ， 而 非 在 发 现 第 一 个 匹配 项 时 立即 
停止 ; 
口 i: 表示 不 区 分 大 小 写 ( case-insensitive ) 模式 ， 即 在 确定 匹配 项 时 忽略 模式 与 字符 串 的 大 小 写 ; 
口 m: 表示 多 行 (multiline ) 模式 ， 即 在 到 达 一 行文 本 末尾 时 还 会 继续 查找 下 一 行 中 是 否 存在 与 模 

式 匹 配 的 项 。 

因此 , 一 个 正则 表达 式 就 是 一 个 模式 与 上 述 3 个 标志 的 组 合体 。 不 同 组 合 产生 不 同 结果 ， 如 下 面 的 
例子 所 示 。 
















































































/* 
* 匹配 字符 事 中 所 有 "at" 的 实例 
ey 


Var patternl = /at/g; 


/大 
* 匹配 第 一 个 "pat" 或 "cat"， 不 区 分 大 小 写 


Var pattern2 = /[bclat/i; 


活 
* 匹配 所 有 以 "at" 结 尾 的 3 个 字符 的 组 合 ， 不 区 分 大 小 写 
Var pattern3 = /.at/gi; 
与 其 他 语言 中 的 正则 表达 式 类 似 , 模式 中 使 用 的 所 有 元 字符 都 必须 转 义 ,正则 表达 式 中 的 元 字符 包括 : 
CB 人 | 


这 些 元 字符 在 正则 表达 式 中 都 有 一 或 多 种 特殊 用 途 ， 因 此 如 果 想 要 匹配 字符 串 中 包含 的 这 些 字符 ， 
就 必须 对 它们 进行 转 义 。 下 面 给 出 儿 个 例子 。 























/* 
* 匹配 第 一 个 "pat" 或 "cat"， 不 区 分 大 小 写 
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Var Pattetrn1l = /[bclat/i; 


/* 

* 匹配 第 一 个 " [pc]at"， 不 区 分 大 小 写 
wd 

Var pattern2 = /\[bc\]at/i; 


/* 

* 匹配 所 有 以 "at" 结 尾 的 3 个 字符 的 组 合 ， 不 区 分 大 小 写 
守 

Var pattern3 = /.at/gi; 


/* 

* 匹配 所 有 ".at"， 不 区 分 大 小 写 
火 
/ 

var pattern4 = /\.at/gi; 





在 上 面 的 例子 中 ,pattern1l 匹配 第 一 个 "bat "或 "cat" ,不 区 分 大 小 写 。 而 要 想 直 接 匹 配 " [bc]at" 
的 话 ， 就 需要 像 定 义 pattern2 一 样 ， 对 其 中 的 两 个 方 括号 进行 转 义 。 对 于 pattern3 来 说 , 句点 表示 
位 于 "at" 之 前 的 任意 一 个 可 以 构成 匹配 项 的 字符 。 但 如 果 想 匹配 " .at"， 则 必须 对 句点 本 身 进行 转 义 ， 














如 pattern4 所 示 。 








前 面 举 的 这 些 例 子 都 是 以 字面 量 形式 来 定义 的 正则 表达 式 。 另 一 种 创建 正则 表达 式 的 方式 是 使 用 























RegExp 构造 函数 ， 它 接收 两 个 参数 : 一 个 是 要 匹配 的 字符 串 模式 ， 另 一 个 是 可 选 的 标志 字符 串 。 可 以 








使 用 字面 量 定义 的 任何 表达 式 ， 都 可 以 使 用 构造 函数 来 定义 ， 如 下 面 的 例子 所 示 。 











/* 
* 匹配 第 一 个 "bat" 或 "cat"， 不 区 分 大 小 写 
4 


Var patternl = /[bclat/i; 


/* 
* 与 patternl 相同 ， 只 不 过 是 使 用 构造 函数 创建 的 
大 
/ 
Var pattern2 = new RegExp("[bc]jat", "i"); 


在 此 ，patternl 和 pattern2 是 两 个 完全 等 价 的 正则 表达 式 。 要 注意 的 是 ,传递 给 RegExp 构造 
函数 的 两 个 参数 都 是 字符 串 ( 不 能 把 正则 表达 式 字 面 量 传递 给 RegExp 构造 函数 )。 由 于 RegExp 构造 
函数 的 模式 参数 是 字符 串 ， 所 以 在 某 些 情 况 下 要 对 字符 进行 双重 转 义 。 所 有 元 字符 都 必须 双重 转 义 , 那 
些 已 经 转 义 过 的 字符 也 是 如 此 , 例如 \n (字符 \ 在 字符 串 中 通常 被 转 义 为 \， 而 在 正则 表达 式 字 符 串 中 就 
































会 变 成 )。 下 表 给 出 了 一 些 模式 ， 左 边 是 这 些 模式 的 字面 量 形 式 ， 右 边 是 使 用 Reg 











相同 模式 时 使 用 的 字符 串 。 





Exp 构造 疯 数 定义 





字面 量 模式 等 价 的 字符 串 
/\[bc\Jat/ "\\[bc\\Jat" 
/\.at/ T\ Na 
/name\/age/ "name\\/age" 
/\d.\d{1,2}/ EN 人 后 
/\w\\hello\\123/ "\\w\\\\hello\\\\123" 

















使 用 正则 表达 式 字 面 量 和 使 用 RegExp 构造 函数 创建 的 正则 表达 式 不 一 样 。 在 ECMAScript 3 中 ， 
正则 表达 式 字 面 量 始终 会 共享 同一 个 RegExp 实例 ,而 使 用 构造 函数 创建 的 每 一 个 新 RegExp 实例 都 是 
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一 个 新 实例 。 来 看 下 面 的 例子 。 


var re = null, 
时 











for (i=0; 414 < 10; i++){ 
re = /cat/g; 
re.test("catastrophe"); 


for {i=0; 414 < 10; i++){ 
re = new RegExp("cat", "g"); 
re.test("catastrophe"); 





在 第 一 个 循环 中 ， 即 使 是 循环 体 中 指定 的 ,但 实际 上 只 为 /cat /创建 了 一 个 RegExp 实例 。 由 于 实 
例 属性 (下 一 节 介 绍 实例 属性 ) 不 会 重 置 ， 所 以 在 循环 中 再 次 调用 test () 方 法 会 失败 。 这 是 因为 第 一 
次 调用 test () 找 到 了 "cat", 但 第 二 次 调用 是 从 索引 为 3 的 字符 (上 一 次 匹配 的 末尾 ) 开始 的 ， 所 以 
就 找 不 到 它 了 。 由 于 会 测试 到 字符 串 末 尾 ， 所 以 下 一 次 再 调用 test () 就 又 从 开头 开始 了 。 

第 二 个 循环 使 用 RegExp 构造 函数 在 每 次 循环 中 创建 正则 表达 式 。 因 为 每 次 迭代 都 会 创建 一 个 新 的 
RegExp 实例 ， 所 以 每 次 调用 test () 都 会 返回 true。 

ECMAScript 5 明确 规定 , 使 用 正则 表达 式 字面 量 必 须 像 直接 调用 RegExp 构造 函数 一 样 , 每 次 都 创 
建新 的 RegExp 实例 。IE9+ 、Firefox 4+ 和 Chrome 都 据 此 做 出 了 修改 。 













































































5.4.1 RegExp 实 例 属性 


RegExp 的 每 个 实例 都 具有 下 列 属性 ， 通 过 这 些 属性 可 以 取得 有 关 模 式 的 各 种 信息 。 

口 global: 布尔 值 ， 表 示 是 否 设 置 了 g 标志 。 

口 ignoreCase: 布尔 值 ， 表 示 是 否 设置 了 i 标志 。 

口 lastIndex: 整数 ， 表 示 开 始 搜索 下 一 个 匹配 项 的 字符 位 置 ， 从 0 算 起 。 

口 multiline: 布尔 值 ， 表 示 是 否 设 置 了 m 标志 。 

口 source: 正则 表达 式 的 字符 串 表示 ， 按 照 字 面 量 形式 而 非 传 人 构造 函数 中 的 字符 串 模 式 返 回 。 
通过 这 些 属性 可 以 获知 一 个 正则 表达 式 的 各 方面 信息 , 但 却 没 有 多 大 用 处 ,因为 这 些 信息 全 都 包含 

在 模式 声明 中 。 例 如 : 


个 Var Dattern1l = /\[bc\lat/i; 












































alert (patternl .global); //false 
alert (patternl1 .ignoreCase); //true 
alert (patternl .multiline); //false 
alert (patternl.lastIindex); //0 

alert( Pattern1.source) : A/™X Lelia 
Var pattern2 = new RegExp("\\[bc\\]at", "i"); 
alert (pattern2.global); //false 
alert (pattern2.ignoreCase); //true 
alert (pattern2.multiline); //false 
alert (pattern2.lastIindex); //0 

alert (pattern2.source); /Nie\lat” 














RegExplInstancePropertiesExample01.htm 
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我 们 注意 到 ， 尽 管 第 一 个 模式 使 用 的 是 字面 量 ， 第 二 个 模式 使 用 了 RegExp 构造 函数 ， 但 它们 的 
source 属性 是 相同 的 。 可 见 ，source 属性 保存 的 是 规范 形式 的 字符 串 ， 即 字面 量 形式 所 用 的 字符 串 。 



































5.4.2 RegExp 实 例 方 法 


RegExp 对 象 的 主要 方法 是 exec () ， 该 方法 是 专门 为 捕获 组 而 设计 的 。exec () 接受 一 个 参数 ， 即 
要 应 用 模式 的 字符 串 , 然后 返回 包含 第 一 个 匹配 项 信息 的 数组 ; 或 者 在 没有 匹配 项 的 情况 下 返回 nul1。 
返回 的 数组 虽然 是 Array 的 实例 ， 但 包含 两 个 额外 的 属性 : index 和 input。 其 中 ，index 表示 匹配 
项 在 字符 串 中 的 位 置 ， 而 input 表示 应 用 正则 表达 式 的 字符 串 。 在 数组 中 ， 第 一 项 是 与 整个 模式 匹配 
的 字符 串 ， 其 他 项 是 与 模式 中 的 捕获 组 匹配 的 字符 串 ( 如果 模式 中 没有 捕获 组 ， 则 该 数组 只 包含 一 项 )。 
请 看 下 面 的 例子 。 


var text = "mom and dad and baby"; 
时 ) Var pattern = /mom( and dad( and baby)?)?/gi; 



























































Var matches = pattern.exec (text); 





alert (matches.index); // 0 

alert (matches.input); // "mom and dad and baby" 
alert (matches[0]); // "mom and dad and baby" 
alert (matches[1]); // " and dad and baby" 
alert (matches{[2]); // " and baby" 


RegExpExecExample01.htm 


这 个 例子 中 的 模式 包含 两 个 捕获 组 ,最 内 部 的 捕获 组 匹配 "ang baby" ,而 包含 它 的 捕获 组 匹配 "and 
dad" 或 者 "and dad and bapy"。 当 把 字符 串 传 人 exec () 方 法 中 之 后 ,发现 了 一 个 匹配 项 。 因 为 整个 
字符 串 本 身 与 模式 匹配 , 所 以 返回 的 数组 matchs 的 index 属性 值 为 0。 数组 中 的 第 一 项 是 匹配 的 整个 
字符 串 ， 第 二 项 包含 与 第 一 个 捕获 组 匹配 的 内 容 ， 第 三 项 包含 与 第 二 个 捕获 组 匹配 的 内 容 。 

对 于 exec () 方 法 而 言 ， 即 使 在 模式 中 设置 了 全 局 标志 (g )， 它 每 次 也 只 会 返回 一 个 匹配 项 。 在 不 
设置 全 局 标志 的 情况 下 ， 在 同一 个 字符 串 上 多 次 调用 exec () 将 始终 返回 第 一 个 匹配 项 的 信息 。 而 在 设 
置 全 局 标志 的 情况 下 ， 每 次 调用 exec () 则 都 会 在 字符 串 中 继续 查找 新 匹配 项 ， 如 下 面 的 例子 所 示 。 
















































































var text = "cat, bat, sat, fat"; 
Var pattern1L = /.at/; 


Var matches = Pattern1l1 .exec (text); 


alert (matches.index); //0 
alert (matches[0]); //cat 
alert (patternl.lastIndex); VA 


matches = patternl] .exec (text); 





alert (matches.index); //0 
alert (matches[0]); //cat 
alert (patternl.lastIndex); //0 


Var pattern2 = /.at/g; 


Var matches = pattern2.exec (text); 





alert (matches.index); //0 
alert (matches[0]); /Yeat 
alert (pattern2.lastIndex); //3 
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matches = Dattern2 .exec (text); 


alert (matches.index); VA 
alert (matches[0]); //bat 
alert (Pattern2 .1astIndqex) ; //8 


RegExpExecExample02.htm 








这 个 例子 中 的 第 一 个 模式 patternl 不 是 全 局 模式 ， 因 此 每 次 调用 exec () 返 回 的 都 是 第 一 个 匹配 
项 ("cat" )。 而 第 二 个 模式 pattern2 是 全 局 模式 ,因此 每 次 调用 exec () 都 会 返回 字符 串 中 的 下 一 个 
匹配 项 ， 直 至 搜索 到 字符 串 末 尾 为 止 。 此 外 ， 还 应 该 注意 模式 的 lastIngdex 属性 的 变化 情况 。 在 全 局 
匹配 模式 下 ，lastIngdex 的 值 在 每 次 调用 exec () 后 都 会 增加 ， 而 在 非 全 局 模式 下 则 始终 保持 不 变 。 














本 的 JavaScript 实现 在 lastIndex 属性 上 存在 偏差 ， 即 使 在 非 全 局 模式 下 ， 


lastIndex 属性 每 次 也 会 变化 。 








正则 表达 式 的 第 二 个 方法 是 test () ， 它 接受 一 个 字符 串 参数 。 在 模式 与 该 参数 匹配 的 情况 下 返回 
true; 否则 ,返回 false。 在 只 想 知 道 目标 字符 串 与 某 个 模式 是 否 匹 配 ， 但 不 需要 知道 其 文本 内 容 的 
情况 下 ， 使 用 这 个 方法 非常 方便 。 因 此 ，test () 方 法 经 常 被 用 在 if 语句 中 ， 如 下 面 的 例子 所 示 。 


Var text = "000-00-0000"; 
Var pattern = /\d{3}-\d{2}-\d{4}/; 














if (pattern.test(text))t{ 
alert("The pattern was matched."); 
} 


在 这 个 例子 中 , 我 们 使 用 正则 表达 式 来 测试 了 一 个 数字 序列 。 如 果 输 入 的 文本 与 模式 匹配 ， 则 显示 
一 条 消息 。 这 种 用 法 经 常 出 现在 验证 用 户 输入 的 情况 下 ， 因 为 我 们 只 想 知 道 输入 是 不 是 有 效 ， 至 于 它 为 
什么 无 效 就 无 关 紧 要 了 。 

RegExp 实例 继承 的 toLocalestring() 和 tostring() 方 法 都 会 返回 正则 表达 式 的 字面 量 ， 与 创 
建 正则 表达 式 的 方式 无 关 。 例 如 : 

Var pattern = new RegExp("\\[bc\\]at", "gi"); 


alert (pattern.toString()); // /\[bc\Jat/gi 
alert (pattern.toLocaleString()); // /\[bc\lat/gi 





























RegExpToStringExample01.htm 





即使 上 例 中 的 模式 是 通过 调用 RegExp 构造 函数 创建 的 , 但 toLocalestring() 和 toString() 
方法 仍然 会 像 它 是 以 字面 量 形式 创建 的 一 样 显示 其 字符 串 表 示 。 


(D 正则 表达 式 的 valueof () 方 法 返回 正则 表达 式 本 身 。 ] 


5.4.3 ”RegExp 构 造 函 数 属性 
RegExp 构造 函数 包含 一 些 属性 ( 这 些 属性 在 其 他 语言 中 被 看 成 是 静态 属性 








。 这 些 属性 适用 于 作用 





Wa 
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域 中 的 所 有 正则 表达 式 , 并 且 基 于 所 执行 的 最 近 一 次 正则 表达 式 操作 而 变化 。 关 于 这 些 属性 的 男 一 个 独 
特 之 处 ， 就 是 可 以 通过 两 种 方式 访问 它们 。 换 句 话说， 这些 属性 分 别 有 一 个 长 属性 名 和 一 个 短 属 性 名 
( Opera 是 例外 ， 它 不 支持 短 属性 名 )。 下 表 列 出 了 RegExp 构造 函数 的 属性 。 






























































长 属性 名 短 属性 名 说 明 
input $ 最 近 一 次 要 匹配 的 字符 串 。Opera 未 实现 此 属性 
lastMatch $e 最 近 一 次 的 匹配 项 。Opera 未 实现 此 属性 
lastParen $+ 最 近 一 次 匹配 的 捕获 组 。Opera 未 实现 此 属性 
leftContext $. input 字 符 串 中 lastMatch 之 前 的 文本 
multiline 3 布尔 值 ， 表 示 是 否 所 有 表达 式 都 使 用 多 行 模式 。IE 和 Opera 未 实现 此 属性 
rightContext $! Input 字 符 串 中 lastMatch 之 后 的 文本 
使 用 这 些 属性 可 以 从 exec () 或 test () 执行 的 操作 中 提取 出 更 具体 的 信息 。 请 看 下 面 的 例子 。 




















Var text = "this has been a short summer"; 
CY) var pattern = /(.)hort/g; 


/* 
* 注意 : Opera 不 支持 input、lastMatch、lastParen 和 multiline 属性 





* Internet Explorer 不 支持 multiline 属性 
Wey 
if (pattern.test (七 ext) ) { 
alert (RegExp . Input) ; // this has been a short summer 
alert (RegExp.leftContext); // this has been a 
alert (RegExp.rightContext); // summer 
alert (RegExp.lastMatch); /7 Short 
alert (RegExp.lastParen); // S 
alert (RegExp.multiline); // false 


RegExpConstructorPropertiesExample01.htm 


以 上 代码 创建 了 一 个 模式 ， 匹配 任何 一 个 字符 后 跟 hort， 而 且 把 第 一 个 字符 放 在 了 一 个 捕获 组 中 。 
RegExp 构造 函数 的 各 个 属性 返回 了 下 列 值 : 
口 input 属性 返回 了 原始 字符 串 ; 
口 leftcontext 属性 返回 了 单词 short 之 前 的 字符 串 ， 而 rightcontext 属性 则 返回 了 short 
之 后 的 字符 串 ; 
口 lastMatch 属性 返回 最 近 一 次 与 整个 正则 表达 式 匹配 的 字符 串 ， 即 short; 
口 1astParen 属性 返回 最 近 一 次 匹配 的 捕获 组 ， 即 例子 中 的 s。 

如 前 所 述 ， 例 子 使 用 的 长 属性 名 都 可 以 用 相应 的 短 属性 名 来 代替 。 只 不 过 , 由 于 这 些 短 属性 名 大 都 
不 是 有 效 的 ECMAScript 标识 符 ， 因 此 必须 通过 方 括号 语法 来 访问 它们 ， 如 下 所 示 。 


下 Var text = "this has been a Short summer"; 































































































Var pattern = /(.)hort/g; 


/* 
* 注意 : Opera 不 支持 input、lastMatch、lastParen 和 multiline 属性 
* Internet Explorer 不 支持 multiline 属性 
wy 
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if (Pattern.test (七 exXt) ) { 


alert (RegExp.$_ ); // this has been a short summer 
alert (RegExp["$ "]); // this has been a 

alert (RegExp["$'"]); // summer 

alert (RegExp["s$&"]); // short 

alert (RegExp["$+"] ); /l/s 

alert (RegExp["$*"]); // false 


RegExpConstructorPropertiesExample02.htm 
除了 上 面 介绍 的 几 个 属性 之 外 , 还 有 多 达 9 个 用 于 存储 捕 绪 组 的 构造 浮 煞 属 性 。 访 问 这 些 属 性 的 语 




















法 是 RegExp.$1、RegExp.$2…RegExp.$9, 分 别 用 于 存储 第 一 、 第 二 …… 第 九 个 匹配 的 捕获 组 。 在 
调用 exec () 或 test() 方 法 时 ， 这些 属性 会 被 自动 填充 。 然 后 ， 我 们 就 可 以 像 下 面 这 样 来 使 用 它们 。 
var text = "this has been a short summer"; 
“) Var pattern = /(..)or(.)/g; 
if (pattern.test(text))t{ 
alert (RegExp.$1); //sh 
alert (RegExp .$2); Vhs, 








RegExpConstructorPropertiesExample03.htm 


这 里 创建 了 一 个 包含 两 个 捕获 组 的 模式 ， 并 用 该 模式 测试 了 一 个 字符 串 。 即 使 test () 方 法 只 返回 
一 个 布尔 值 ， 但 RegExp 构造 函数 的 属性 $1 和 $2 也 会 被 匹配 相应 捕获 组 的 字符 串 自 动 填充 。 


5.4.4 ”模式 的 局 限 性 


尽管 ECMAScript 中 的 正则 表达 式 功能 还 是 比较 完备 的 ， 但 仍然 缺少 某 些 语言 ( 特别 是 Perl ) 所 支 
持 的 高 级 正则 表达 式 特性 。 下 面 列 出 了 ECMAScript 正则 表达 式 不 支持 的 特性 (要 了 解 更 多 相关 信息 ， 
请 访问 www.regular-expressions.info )。 
口 匹配 字符 串 开始 和 结尾 的 \A 和 \z 销 * 
口 向 后 查找 (lookbehind ) ” 
口 并 集 和 交集 类 
口 原子 组 ( atomic grouping ) 
口 Unicode 支持 ( 单个 字符 除外 ， 如 \uFFFF ) 
命名 的 捕获 组 ” 
口 s (single， 单 行 ) 和 x (free-spacing， 无 间隔 ) 匹配 模式 
口 条 件 匹 配 
口 正则 表达 式 注 释 
即使 存在 这 些 限制 ，ECMAScript 正则 表达 式 仍然 是 非常 强大 的 ， 能 够 帮 我 们 完成 绝 大 多 数 模 式 匹 
配 任 务 。 












































但 支持 以 搬入 符号 (^) 和 美元 符号 ($ ) 来 匹配 字符 串 的 开始 和 结尾 。 
@) 但 完全 支持 向 前 查找 (lookahead )。 
@) 但 支持 编号 的 捕获 组 。 
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5.5 Function 类 型 


说 起 来 ECMAScript 中 什么 最 有 意思 ， 我 想 那 莫 过 于 函数 了 一 一 而 有 意思 的 根源 ， 则 在 于 函数 实际 
上 是 对 象 。 每 个 函数 都 是 Function 类 型 的 实例 ， 而 且 都 与 其 他 引用 类 型 一 样 具 有 属性 和 方法 。 由 于 郴 
数 是 对 象 ， 因 此 函数 名 实际 上 也 是 一 个 指向 函数 对 象 的 指针 ， 不 会 与 某 个 函数 绑 定 。 函 数 通 常 是 使 用 本 
数 声明 语法 定义 的 ， 如 下 面 的 例子 所 示 。 


function sum (numl, num2) { 
return numl + num2; 


} 
这 与 下 面 使 用 函数 表达 式 定 义 函 数 的 方式 几乎 相差 无 儿 。 


Var sum = function(numl, num2){ 
return numl + num2; 






































}; 

以 上 代码 定义 了 变量 sum 并 将 其 初始 化 为 一 个 函数 。 有 读者 可 能 会 注意 到 ，function 关键 字 后 面 
没有 函数 名 。 这 是 因为 在 使 用 函数 表达 式 定 义 函 数 时 , 没有 必要 使 用 函数 名 一 一 通过 变量 sum 即 可 以 引 
用 函数 。 另 外 ， 还 要 注意 函数 末尾 有 一 个 分 号 ， 就 像 声 明 其 他 变量 时 一 样 。 

最 后 一 种 定义 函数 的 方式 是 使 用 Function 构造 函数 ,Function 构造 函数 可 以 接收 任意 数量 的 参数 ， 
但 最 后 一 个 参数 始终 都 被 看 成 是 函数 体 ， 而 前 面 的 参数 则 枚 举 出 了 新 函数 的 参数 。 来 看 下 面 的 例子 : 

var sum = new Function("numl", "num2"， "return numl + num2"); // 不 推荐 

从 技术 角度 讲 ， 这 是 一 个 函数 表达 式 。 但 是 ， 我 们 不 推荐 读者 使 用 这 种 方法 定义 函数 ， 因 为 这 种 语 
法 会 导致 解析 两 次 代码 ( 第 一 次 是 解析 常规 ECMAScript 代码 , 第 二 次 是 解析 传人 构造 函数 中 的 字符 串 )， 
从 而 影响 性 能 。 不 过 ， 这 种 语法 对 于 理解 “函数 是 对 象 ， 函 数 名 是 指针 ”的 概念 倒是 非常 直观 的 。 

由 于 函数 名 仪 仅 是 指向 函数 的 指针 ， 因 此 函数 名 与 包含 对 象 指针 的 其 他 变量 没有 什么 不 同 。 换 句 话 
说 ,一 个 函数 可 能 会 有 多 个 名 字 ， 如 下 面 的 例子 所 示 。 


function sum(numl, num2){ 
return numl + num2; 



















































































} 
alert (sum(10,10)); //20 


var anotherSum = sum; 
alert (anothersum(10,10)); //20 


sum = null; 
alert (anothersum(10,10)); //20 





FunctionTypeExample01.htm 


以 上 代码 首先 定义 了 一 个 名 为 sum() 的 函数 , 用 于 求 两 个 值 的 和 。 然后 , 又 声明 了 变量 anotherSum， 
并 将 其 设置 为 与 sum 相等 ( 将 sum 的 值 赋 给 anothersum )。 注 意 ,使 用 不 带 圆 括号 的 函数 名 是 访问 也 
数 指针 ， 而 非 调 用 函数 。 此 时 ，anothersum 和 sum 就 都 指向 了 同一 个 函数 ， 因 此 anothersum() 也 
可 以 被 调用 并 返回 结果 。 即 使 将 sum 设置 为 null1， 让 它 与 函数 “断绝 关系 ”， 但 仍然 可 以 正常 调用 


amnotherSum() 。 















































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


5.5 Function 类 型 111 





5.5.1 没有 重 载 (深入 理解 ) 
将 函数 名 想象 为 指针 ， 也 有 助 于 理解 为 什么 ECMAScript 中 没有 函数 重 载 的 概念 。 以 下 是 曾 在 第 3 
章 使 用 过 的 例子 。 


function addSomeNumber (num){ 
return num + 100; 





} 


function addSomeNumber (num) { 
return num + 200; 


} 


Var result = addSomeNumber (100); //300 
显然 ,这 个 例子 中 声明 了 两 个 同名 函数 ， 而 结果 则 是 后 面 的 函数 覆盖 了 前 面 的 函数 。 以 上 代码 实际 
上 与 下 面 的 代码 没有 什么 区 别 。 


var addSomeNumber = function (num){ 
return num + 100; 
































上 


addSomeNumber = function (num) { 
return num + 200; 


var result = addSomeNumber (100); //300 

通过 观察 重 写 之 后 的 代码 , 很 容易 看 清楚 到 底 是 怎么 回 事 儿 
了 引用 第 一 个 函数 的 变量 adadsomeNumber。 
5.5.2 ”函数 声明 与 函数 表达 式 

本 节 到 目前 为 止 , 我 们 一 直 没 有 对 函数 声明 和 函数 表达 式 加 以 区 别 。 而 实际 上 ,解析 器 在 向 执行 环 
境 中 加 载 数 据 时 ,对 函数 声明 和 函数 表达 式 并 非 一 视 同仁 。 解 析 器 会 率先 读 取 函 数 声 明 ， 并 使 其 在 执行 
任何 代码 之 前 可 用 ( 可 以 访问 ); 至 于 函数 表达 式 ， 则 必须 等 到 解析 器 执行 到 它 所 在 的 代码 行 ， 才 会 真 
正 被 解释 执行 。 请 看 下 面 的 例子 。 

alert (sum(10,10)); 

CD function sum(numl, num2){ 


return numl + num2; 














在 创建 第 二 个 函数 时 ,实际 上 覆盖 























} 


FunctionDeclarationExample01.htm 

以 上 代码 完全 可 以 正常 运行 。 因 为 在 代码 开始 执行 之 前 ,解析 器 就 已 经 通过 一 个 名 为 函数 声明 提升 

( function declaration hoisting ) 的 过 程 ， 读 取 并 将 函数 声明 添加 到 执行 环境 中 。 对 代码 求 值 时 ，JavaScript 

引擎 在 第 一 遍 会 声明 函数 并 将 它们 放 到 源 代 码 树 的 顶部 。 所 以 ,即使 声明 函数 的 代码 在 调用 它 的 代码 后 

面 ，JavaScript 引擎 也 能 把 函数 声明 提升 到 顶部 。 如 果 像 下 面 例子 所 示 的 ， 把 上 面 的 函数 声明 改 为 等 价 
的 函数 表达 式 ， 就 会 在 执行 期 间 导 致 错误 。 
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alert (sum(10,10)); 
var sum = function(numl, num2){ 
return numl + num2; 
7 
FunctionInitializationExample01.htm 


以 上 代码 之 所 以 会 在 运行 期 间 产生 错误 , 原因 在 于 函数 位 于 一 个 初始 化 语句 中 ,而 不 是 一 个 函数 声 
明 。 换 句 话说 ,在 执行 到 函数 所 在 的 语句 之 前 ,变量 sum 中 不 会 保存 有 对 函数 的 引用 ; 而 且 , 由 于 第 一 
行 代码 就 会 导致 Re identifier”( 意外 标识 符 ) 错误 ,实际 上 也 不 会 执行 到 下 一 行 。 
除了 什么 时 候 可 以 通过 变量 访问 函数 这 一 点 区 别 之 外 ， 函 数 声 明 与 函数 表达 式 的 语法 其 实 是 等 价 的 。 








0 时 使 用 函数 声明 和 函数 表达 式 ， 例 如 var sum = function sum(){}。 


不 过 ， 这 种 语法 在 Safari 中 会 导致 错误 。 





5.5.3 ”作为 值 的 函数 

因为 ECMAScript 中 的 函数 名 本 身 就 是 变量 ， 所 以 函数 也 可 以 作为 值 来 使 用 。 也 就 是 说 ， 不 仅 可 以 
像 传递 参数 一 样 把 一 个 函数 传递 给 另 一 个 函数 ,而 且 可 以 将 一 个 函数 作为 男 一 个 函数 的 结果 返回 。 来 看 
一 看 下 面 的 函数 。 


function cal1SomeFunction(someFunction，someArgument ){ 
return someFunction(someArgument); 

















} 
这 个 函数 接受 两 个 参数 ,第 一 个 参数 应 该 是 一 个 函数 ,第 二 个 参数 应 该 是 要 传递 给 该 函数 的 一 个 值 。 
然后 ， 就 可 以 像 下 面 的 例子 一 样 传递 函数 了 。 


function addq10 (num){ 
return num + 10; 











} 


Var resultl1 = callSomeFunction(add10, 10); 
alert (result1); //20 


function getGreeting (name){ 
return "Hello, " + name; 


} 
Var result2 = callSomeFunction(getGreeting, "Nicholas"); 
alert (result2); //"Hello, Nicholas" 
FunctionAsAnAreumentExample01.htm 


这 里 的 callsomeFunction () 函数 是 通用 的 ， 即 无 论 第 一 个 参数 中 传递 进来 的 是 什么 函数 ， 它 都 
会 返回 执行 第 一 个 参数 后 的 结果 。 还 记得 吧 ， 要 访问 函数 的 指针 而 不 执行 函数 的 话 ， 必 须 去 掉 函 数 名 后 
面 的 那 对 圆 括 号 。 因 此 上 面 例子 中 传递 给 callsomeFunction() 的 是 add10 和 getGreeting， 而 不 
是 执行 它们 之 后 的 结 
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当然 ， 可 以 从 一 个 函数 中 返回 男 一 个 函数 ， 而 且 这 也 是 极为 有 用 的 一 种 技术 。 例 如 ,假设 有 一 个 
对 象 数组 , 我 们 想 要 根据 某 个 对 象 属性 对 数组 进行 排序 。 而 传递 给 数组 sort () 方 法 的 比较 函数 要 接收 
两 个 参数 ， 即 要 比较 的 值 。 可 是 ,我 们 需要 一 种 方式 来 指明 按照 哪个 属性 来 排序 。 要 解决 这 个 问题 ， 
可 以 定义 一 个 函数 ， 它 接收 一 个 属性 名 ， 然 后 根据 这 个 属性 名 来 创建 一 个 比较 函数 ， 下 面 就 是 这 个 函 
数 的 定义 。 


下 function createComparisonFunction(propertyName) { 























return function(object1, object2)f{ 
var Valuel = objectl [propertyNamel]; 
Var Value2 = object2[propertyNamel]; 


if (valuel < Value2) 1{ 
return -1; 

} else if (valuel > Value2)1{ 
return 1; 

} else { 


return 0; 
} 
ys 


FunctionReturningFunctionExample01.htm 

这 个 函数 定义 看 起 来 有 点 复杂 , 但 实际 上 无 非 就 是 在 一 个 函数 中 垦 套 了 男 一 个 函数 ,而 且 内 部 函数 
前 面 加 了 一 个 return 操作 符 。 在 内 部 函数 接收 到 propertyName 参数 后 ， 它 会 使 用 方 括号 表示 法 来 
取得 给 定 属性 的 值 。 取 得 了 想 要 的 属性 值 之 后 ,定义 比较 函数 就 非常 简单 了 。 上 面 这 个 函数 可 以 像 在 下 























面 例子 中 这 样 使 用 。 
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; 


data.sort (createComparisonFunction("name")); 
alert(data[l0] .name); //Nicholas 


data.sort (createComparisonFunction("age")); 
alert(data[0] .name); //Zachary 


这 里 ， 我 们 创建 了 一 个 包含 两 个 对 象 的 数组 data。 其 中 ， 每 个 对 象 都 包含 一 个 name 属性 和 一 个 
age 属性 。 在 默认 情况 下 ，sort () 方 法 会 调用 每 个 对 象 的 toString () 方 法 以 确定 它们 的 次 序 ; 但 得 
到 的 结果 往往 并 不 符合 人 类 的 思维 习惯 。 因 此 ， 我 们 调用 createCcomparisonFunction("name") 方 
法 创建 了 一 个 比较 函数 , 以 便 按 照 每 个 对 象 的 name 属性 值 进行 排序 。 而 结果 排 在 前 面 的 第 一 项 是 name 
为 "Nicholas"，age 是 29 的 对 象 。 然 后, 我们 又 使 用 了 createcomparisonFunction("age") 返 回 
的 比较 函数 ， 这 次 是 按照 对 象 的 age 属性 排序 。 得 到 的 结果 是 name 值 为 "zachary"，age 值 是 28 的 
对 象 排 在 了 第 一 位 。 


5.5.4 ”函数 内 部 属性 


在 函数 内 部 ， 有 两 个 特殊 的 对 象 : arguments 和 this。 其 中 ，arguments 在 第 3 章 兽 经 介绍 过 ， 
它 是 一 个 类 数组 对 象 ， 包 含 着 传人 函数 中 的 所 有 参数 。 虽 然 arguments 的 主要 用 途 是 保存 函数 参数 ， 
但 这 个 对 象 还 有 一 个 名 叫 callee 的 属性 , 该 属性 是 一 个 指针 , 指向 拥有 这 个 arguments 对 象 的 函数 。 
请 看 下 面 这 个 非常 经 典 的 阶乘 函数 。 
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function factorial (num){ 
if (num <=1) { 
return 1; 
} else { 


return num * factorial (num-1) 


} 
} 


定义 阶乘 函数 一 般 都 要 用 到 递归 算法 ; 如 上 首 




















i 的 代码 所 示 ， 在 函数 有 和 名字， 而 且 名 字 以 后 也 不 会 变 


的 情况 下 ， 这 样 定义 没有 问题 。 但 问题 是 这 个 函数 的 执行 与 函数 名 factorial 紧 紧 耦合 在 了 一 起 。 为 
这样 使 用 arguments .callee。 


了 消除 这 种 紧密 耦合 的 现象 ， 可 以 像 下 


function factorial (num) { 
i (num <=1) { 
return 1; 
} else { 














return num * arguments.callee (num-1) 


} 


在 这 个 重 写 后 的 factorial () 函数 的 函数 体内 ， 没 有 再 引用 函数 名 factorial。 这 样 ， 无 论 引 用 


FunctionDypeAreumentsExample01.htm 


函数 时 使 用 的 是 什么 名 字 ， 都 可 以 保证 正常 完成 递归 调用 。 例 如 : 


Var trueFactorial = factorial; 


factorial = function()f{ 
return 0; 


alert (trueFactorial (5)); 
alert (factorial (5)); 





/7120 
BA, 





在 此 ， 变 量 trueFactorial 获得 了 factorial 的 值 ， 实 际 上 是 在 另 一 个 位 置 上 保存 了 一 个 函数 





的 指针 。 然 后 ,我 们 又 将 一 个 简单 地 返 
那样 不 使 用 arguments .callee， 调 用 trueFactorial () 就 会 返 











回 0 的 函数 赋值 给 factorial 变量 。 如 果 像 原来 的 factorial () 
回 0。 可 是 ， 在 解除 了 函数 体内 的 代 


码 与 函数 名 的 耦合 状态 之 后 ，trueFactorial () 仍 然 能 够 正常 地 计算 阶乘 ; 至 于 factorial() ， 它 现 


在 只 是 一 个 返回 0 的 函数 。 


函数 内 部 的 另 一 个 特殊 对 象 是 this， 其 行为 与 Java 和 C# 中 的 this 大 致 类 似 。 换 名 话说 ，this 


引用 的 是 函数 据 以 执行 的 环境 对 象 








this 对 象 引用 的 就 是 window )。 来 看 下 面 的 例子 。 





window.color = "red"; 
var CO = { color: "blue" 


function sayColor(){ 
alert (this.color); 

} 

sayColor (); //"red" 


oO.sayColor = sayColor; 
oOo.sayColor (); //"blue" 





或 者 也 可 以 说 是 this 值 ( 当 在 网 页 的 全 局 作用 域 中 调用 函数 时 ， 


FunctionTYypeThisExample01.htm 
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上 面 这 个 函数 saycolor () 是 在 全 局 作用 域 中 定义 的 , 它 引 用 了 this 对 象 。 由 于 在 调用 冰 数 之 前 ， 
this 的 值 并 不 确定 ， 因 此 this 可 能 会 在 代码 执行 过 程 中 引用 不 同 的 对 象 。 当 在 全 局 作用 域 中 调用 
sayColor() 时 ，this 引用 的 是 全 局 对 象 window; 换 名 话说， 对 this.color 求 值 会 转换 成 对 
window.color 求 值 ， 于 是 结果 就 返回 了 "reg"。 而 当 把 这 个 函数 赋 给 对 象 。 并 调用 o. saycolor () 
时 , this 引用 的 是 对 象 o, 因此 对 this .color 求 值 会 转换 成 对 o. color 求 值 ,结果 就 返回 了 "blue"。 















请 读者 一 定 要 牢记 ， 函 数 的 名 字 仅 仅 是 一 个 包含 指针 的 变量 而 已 。 因 此 ， 即 使 是 
在 不 同 的 环境 中 执行 , 全 局 的 sayColor () 函数 与 o.sayColor () 指向 的 仍然 是 同一 
个 函数 。 








ECMAScript 5 也 规范 化 了 另 一 个 函数 对 象 的 属性 : caller。 除 了 Opera 的 早期 版 本 不 支持 ， 其 他 
浏览 器 都 支持 这 个 ECMAScript 3 并 没有 定义 的 属性 。 这 个 属性 中 保存 着 调用 当前 函数 的 函数 的 引用 ， 
如 果 是 在 全 局 作用 域 中 调用 当前 函数 ， 它 的 值 为 nul1l。 例如: 











function outer()t{ 
inner () ; 


} 


function inner()t{ 
alert (inner.caller); 


} 


outer(); 


FunctionTypeAregumentsCallerExample01.htm 


以 上 代码 会 导致 警告 框 中 显示 outer () 函数 的 源 代 码 。 因 为 outer () 调 用 了 inter() ， 所 以 
inner.caller 就 指向 outer() 。 为 了 实现 更 松散 的 耦合 ， 也 可 以 通过 arguments .callee.caller 
来 访问 相同 的 信息 。 

function outer()t{ 

inner () ; 




















} 


function inner()f{ 
alert (arguments.callee.caller); 


} 
outer(); 
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了 下、Firefox 、Chrome 和 Safari 的 所 有 版 本 以 及 Opera 9.6 都 支持 caller 属性 。 

当 函 数 在 严格 模式 下 运行 时 ， 访 问 arguments .callee 会 导致 错误 。ECMAScript 5 还 定义 了 
arguments .caller 属性 ， 但 在 严格 模式 下 访问 它 也 会 导致 错误 ， 而 在 非 严格 模式 下 这 个 属性 始终 是 
undefined。 定 义 这 个 属性 是 为 了 分 清 arguments .caller 和 函数 的 caller 属性 。 以 上 变化 都 是 为 
了 加 强 这 门 语言 的 安全 性 ， 这 样 第 三 方 代码 就 不 能 在 相同 的 环境 里 帘 视 其 他 代码 了 。 

严格 模式 还 有 一 个 限制 : 不 能 为 函数 的 caller 属性 赋值 ， 否 则 会 导致 错误 。 
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5.5.5 
前 面 曾 

属性 : 

子 所 示 。 


func 





} 


func 


} 


funct 


以 上 代码 定义 了 3 个 函数 , 但 每 个 函数 接收 的 命名 参数 个 数 不 同 。 首 先 ，sayName () 函 
类 似 地 ，sum () 函数 定义 了 两 个 参数 ， 结 果 其 length 属性 中 
其 length 值 为 0。 
中 ， 最 耐 人 寻 


个 参数 ， 因 此 其 length 属性 的 值 为 1。 
保存 的 值 为 2。 而 sayHi () 没 有 命 


每 个 











是 在 其 中 运行 


alert (sum.length); 


函数 属性 和 方法 




















曾经 提 到 过 ，ECMAScript 





tion sayName (name){ 
alert (name); 


tion sum(numl, num2)f{ 
return numl + num2; 


Ion sayHi()t{ 
alert ("hi"); 


VA 
£2 
//0 


(sayName .length); 





(sayHi .length); 

















函数 者 





国 数 的 作用 域 ， 另 一 





arguments 对 象 。 例 如 : 


func 








tion sum(numl, num2)f{ 
return numl + num2; 
tion callSuml (numl, num2){ 
return sum.apply (this, arguments); 
tion callSum2 (numl, num2)f{ 
return sum.apply (this, [numl, num2]); 
t(callsuml (10,10)); //20 
t (callSsum2(10,10)); //20 
图 灵 社 区 


名 人 参数， 所 以 其 

在 ECMAScript 核心 所 定义 的 全 部 属性 
ECMAScript 中 的 引用 类 型 而 言 ， 
toString() 和 valueof 

















! 的 函数 是 对 象 ， 因 此 函数 也 有 属 怕 
length 和 prototype。 其 中 ，length 属性 表示 函数 希望 接收 的 命名 参数 的 个 数 ， 如 下 面 的 例 





E 和 方法 。 每 个 函数 都 包含 两 个 


FunctionDypeLengthPropertyExample01.htm 











是 不 可 枚 举 的 ， 因 此 使 用 for-in 无 法 发 现 。 
包含 两 个 非 继承 而 来 的 方法 : apply() 和 call ()。 这 两 个 方法 的 用 途 都 是 在 特定 的 作 
用 域 中 调用 函数 ,实际 上 等 于 设置 孔 数 体内 this 对 象 的 值 。 首 先 ，apply () 方 法 接收 两 个 参数 : 一 

个 是 参数 数组 。 其 中 ， 第 二 个 参数 可 以 是 Array 的 实例 ， 也 可 以 是 


函数 定义 了 一 








味 的 就 要 数 prototype 属性 了 。 对 于 
prototype 是 保存 它们 所 有 实例 方法 的 真正 所 在 。 换 名 话说 ， 
) 等 方法 实际 上 都 保存 在 prototype 名 下 ， 只 不 过 是 通过 各 自 对 象 的 实例 访 
问 罢 了 。 在 创建 自 定义 引用 类 型 以 及 实现 继承 时 ，prototype 属性 的 作用 是 极为 重要 的 (第 6 章 将 详 

介绍 )。 在 ECMAScript 5 中 ，prototype 属 改 


诸如 








// 传 入 arguments 对 象 


// 传 入 数组 


FunctionTypeApplyMethodExample01.htm 
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在 上 面 这 个 例子 中 ，callsuml () 在 执行 sum() 函数 时 传人 了 this 作为 this 值 (因为 是 在 全 局 
作用 域 中 调用 的 ， 所 以 传人 的 就 是 window 对 象 ) 和 arguments 对 象 。 而 callsum2 同样 也 调用 了 
sum() 函数 ,但 它 传 人 的 则 是 this 和 一 个 参数 数组 。 这 两 个 函数 都 会 正常 执行 并 返回 正确 的 结 


















在 严格 模式 下 ， 未 指定 环境 对 象 而 调用 函数 ， 则 this 值 不 会 转型 为 window。 
除非 明确 把 函数 添加 到 某 个 对 象 或 者 调用 apply() 或 call()， 否则 this 值 将 是 


undefined。 






call() 方 法 与 apply() 方 法 的 作用 相同 ， 它 们 的 区 别 仅 在 于 接收 参数 的 方式 不 同 。 对 于 call () 
方法 而 言 ， 第 一 个 参数 是 this 值 没 有 变化 ， 变 化 的 是 其 余 参数 都 直接 传递 给 函数 。 换 句 话 说， 在 使 用 
call () 方 法 时 ， 传 递 给 函数 的 参数 必须 逐个 列举 出 来 ， 如 下 面 的 例子 所 示 。 


function sum(num1，mnum2 ) { 
return numl + num2; 




















} 





function callSum(numl, num2){ 
return sum.call(this, numl, num2); 


} 





alert (callsum(10,10)); //20 
FunctionTypeCallMethodExample01.htm 


在 使 用 call () 方 法 的 情况 下 ，callsum() 必须 明确 地 传人 每 一 个 参数 。 结 果 与 使 用 apply() 没 有 
什么 不 同 。 至 于 是 使 用 apply() 还 是 call() ， 完 全 取决 于 你 采取 哪 种 给 函数 传递 参数 的 方式 最 方便 。 
如 果 你 打算 直接 传人 arguments 对 象 , 或 者 包含 函数 中 先 接收 到 的 也 是 一 个 数组 ,那么 使 用 apply () 
肯定 更 方便 ; 和 否则， 选择 cal1 () 可 能 更 合适 。( 在 不 给 函数 传递 参数 的 情况 下 ,使 用 哪个 方法 都 无 所 


谓 。) 














事实 上 ， 传 递 参数 并 非 apply () 和 call() 真 正 的 用 武之 地 ; 它们 真正 强大 的 地 方 是 能 够 扩充 函数 
赖 以 运行 的 作用 域 。 下 面 来 看 一 个 例子 。 


window.color = "red"; 
Var DO = { color: "blue" }; 








function sayColor(){ 
alert (this.color); 


} 


sayColor (); //red 
sayColor.call(this); //red 
sayColor.call (window); //red 
sayColor.call(o); //blue 


FunctionTYypeCallExample01.htm 


这 个 例子 是 在 前 面 说明 this 对 象 的 示例 基础 上 修改 而 成 的 。 这 一 次 ，saycolor () 也 是 作为 全 局 
函数 定义 的 , 而 且 当 在 全 局 作用 域 中 调用 它 时 , 它 确实 会 显示 "red" 一 一 因为 对 this.color 的 求 值 会 
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转换 成 对 window .color 的 求 值 。 而 saycolor .call(this) 和 sayColor.call (window) ， 则 是 两 
种 显 式 地 在 全 局 作用 域 中 调用 函数 的 方式 ,结果 当然 都 会 显示 "red" 。 但 是 , 当 运 行 sayColor .call (o) 
时 , 函数 的 执行 环境 就 不 一 样 了 , 因为 此 时 函数 体内 的 this 对 象 指向 了 o, 于 是 结果 显示 的 是 "blue"。 

使 用 call() (或 apply() ) 来 扩充 作用 域 的 最 大 好 处 ， 就 是 对 象 不 需要 与 方法 有 任何 耦合 关系 。 
在 前 面 例子 的 第 一 个 版 本 中 ,我 们 是 先 将 saycolor () 函数 放 到 了 对 象 o 中 , 然后 再 通过 o 来 调用 它 的 ; 
而 在 这 里 重 写 的 例子 中 ， 就 不 需要 先前 那个 多 余 的 步骤 了 。 

ECMAScript 5 还 定义 了 一 个 方法 : bind() 。 这 个 方法 会 创建 一 个 函数 的 实例 ， 其 this 值 会 被 绑 
定 到 传 给 bina () 函数 的 值 。 例 如 : 


window.color = "red"; 
Var oO = { color: "blue" }; 



































function sayColor()f{ 
alert (this.color); 
} 
var objectSayColor = sayColor.bind(o); 
objectSayColor(); //blue 


FunctionDypeBindMethodExample01.htm 


在 这 里 ，sayColor () 调 用 bina() 并 传人 对 象 o, 创建 了 objectsaycolor () 函数 。object- 
SayColor () 国 数 的 this 值 等 于 o， 因 此 即使 是 在 全 局 作用 域 中 调用 这 个 函数 ， 也 会 看 到 "blue"。 这 
种 技巧 的 优点 请 参考 第 22 章 。 

支持 bind() 方 法 的 浏览 器 有 IE9+ 、Firefox 4+、Safari 5.1+、Opera 12+ 和 Chrome。 

每 个 函数 继承 的 toLocalestring() 和 tostring() 方 法 始终 都 返回 函数 的 代码 。 返 回 代 码 的 格 
式 则 因 浏 览 器 而 异 一 一 有 的 返回 的 代码 与 源 代 码 中 的 函数 代码 一 样 ， 而 有 的 则 返回 函数 代码 的 内 部 表 
示 ， 即 由 解析 器 删除 了 注释 并 对 某 些 代码 作 了 改动 后 的 代码 。 由 于 存在 这 些 差异 ， 我 们 无 法 根据 这 两 个 
方法 返回 的 结果 来 实现 任何 重要 功能 ; 不 过 ， 这 些 信息 在 调试 代码 时 倒是 很 有 用 。 另 外 一 个 继承 的 
valueof () 方 法 同样 也 只 返回 函数 代码 。 


5.6 基本 包装 类 型 


为 了 便于 操作 基本 类 型 值 ，ECMAScript 还 提供 了 3 个 特殊 的 引用 类 型 : Boolean、Number 和 
string。 这 些 类 型 与 本 章 介 绍 的 其 他 引用 类 型 相似 , 但 同时 也 具有 与 各 自 的 基本 类 型 相应 的 特殊 行为 。 
实际 上 , 每 当 读 取 一 个 基本 类 型 值 的 时 候 , 后 台 就 会 创建 一 个 对 应 的 基本 包装 类 型 的 对 象 ， 从 而 让 我 们 
能 够 调用 一 些 方法 来 操作 这 些 数据 。 来 看 下 面 的 例子 。 


Var sl = "some text"; 
Var s2 = sl.substring(2); 


这 个 例子 中 的 变量 sl 包含 一 个 字符 串 ， 字 符 串 当然 是 基本 类 型 值 。 而 下 一 行 调用 了 si 的 
substring() 方 法 ,并 将 返回 的 结果 保存 在 了 s2 中 。 我们 知道 ， 基 本 类 型 值 不 是 对 象 ， 因 而 从 逻辑 上 
讲 它们 不 应 该 有 方法 ( 尽管 如 我 们 所 愿 ， 它 们 确实 有 方法 )。 其 实 ， 为 了 让 我 们 实现 这 种 直观 的 操作 ， 
后 台 已 经 自动 完成 了 一 系列 的 处 理 。 当 第 二 行 代码 访问 sl 时 ,访问 过 程 处 于 一 种 读 取 模式 ， 也 就 是 要 
从 内 存 中 读 取 这 个 字符 串 的 值 。 而 在 读 取 模 式 中 访问 字符 串 时 ， 后 台 都 会 自动 完成 下 列 处 理 。 
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(1) 创建 string 类 型 的 一 个 实例 ; 

(2) 在 实例 上 调用 指定 的 方法 ; 

(3) 销毁 这 个 实例 。 

可 以 将 以 上 三 个 步骤 想象 成 是 执行 了 下 列 ECMAScript 代码 。 
Var sl = new String("some text"); 


Var s2 = sl.substring(2); 
sl1 = null; 


经 过 此 番 处 理 ,基本 的 字符 串 值 就 变 得 跟 对 象 一 样 了 。 而 且 ,上面 这 三 个 步骤 也 分 别 适 用 于 Boolean 











和 Number 类 型 对 应 的 布尔 值 和 数字 值 。 





引用 类 型 与 基本 包装 类 型 的 主要 区 别 就 是 对 象 的 生存 期 。 使 用 new 操作 符 创 建 的 引用 类 型 的 实例 ， 








在 执行 流离 开 当 前 作用 域 之 前 都 一 直 保存 在 内 存 中 。 而 自动 创建 的 基本 包装 类 型 的 对 象 , 则 只 存在 于 一 
行 代码 的 执行 瞬间 ， 然 后 立即 被 销毁 。 这 意味 着 我 们 不 能 在 运行 时 为 基本 类 型 值 添加 属性 和 方法 。 来 看 
下 面 的 例子 : 





Var sl = "Some text"; 
S1.color = "red"; 
alert (sl.color); //undefined 


在 此 ， 第 二 行 代码 试图 为 字符 串 sl 添加 一 个 color 属性 。 但 是 ， 当 第 三 行 代码 再 次 访问 sl 时 ， 




















color 属性 不 见 了 。 问题 的 原因 就 是 第 二 行 创建 的 string 对 象 在 执行 第 三 行 代码 时 已 经 被 销毁 了 。 








其 
第 三 行 代 码 又 创建 自己 的 string 对象， 而 该 对 象 没 有 color 属性 。 

















当然 ， 可 以 显 式 地 调用 Boolean、Number 和 string 来 创建 基本 包装 类 型 的 对 象 。 不 过 ， 应 该 在 














绝对 必要 的 情况 下 再 这 样 做 ， 因 为 这 种 做 法 很 容易 让 人 分 不 清 自己 是 在 处 理 基 本 类 型 还 是 引用 类 型 的 


值 。 














对 基本 包装 类 型 的 实例 调用 typeof 会 返回 "object"， 而且 所 有 基本 包装 类 型 的 对 象 都 会 被 转换 


为 布尔 值 trueo 


例 ， 


object 构造 函数 也 会 像 工 三 方法 一 样 ， 根 据 传 入 值 的 类 型 返回 相应 基本 包装 类 型 的 实例 。 例 如 : 


Var obj = new Object("some text"); 
alert (obj instanceof String); //true 








把 字符 串 传 给 obj ect 构造 函数 ， 就 会 创建 string 的 实例 ; 而 传人 数值 参数 会 得 到 Number 的 实 
传人 布尔 值 参数 就 会 得 到 Boolean 的 实例 。 
要 注意 的 是 ,使 用 new 调用 基本 包装 类 型 的 构造 函数 ， 与 直接 调用 同名 的 转型 函数 是 不 一 样 的 。 








例如 : 


例 。 


Var Value = "25"; 
var number = Number(value);  // 转 型 函数 
alert (typeof number); //"number" 


var obj = new Number (value); // 构 造 函 数 
alert (typeof obj); /YToBJectr 





在 这 个 例子 中 ， 变 量 number 中 保存 的 是 基本 类 型 的 值 25， 而 变量 obj 中 保存 的 是 Number 的 实 
要 了 解 有 关 转 型 函数 的 更 多 信息 ， 请 参考 第 3 章 。 
尽管 我 们 不 建议 显 式 地 创建 基本 包装 类 型 的 对 象 ， 但 它们 操作 基本 类 型 值 的 能 力 还 是 相当 重要 的 。 









































而 每 个 基本 包装 类 型 都 提供 了 操作 相应 值 的 便捷 方法 。 
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5.6.1 Boolean 类 型 


Boolean 类 型 是 与 布尔 值 对 应 的 引用 类 型 。 要 便于 
构造 函数 并 传人 true 或 false 值 。 


Var booleanObject = new Boolean(true); 


Boolean 类 型 的 实例 重 写 了 valueof () 方 法 ,返回 基本 类 型 值 true 或 false; 重 写 了 了 toString () 
方法 ， 返 回 字 符 串 "true" 和 "false"。 可 是 ，Boolean 对 象 在 ECMAScript 中 的 用 处 不 大 ， 因 为 它 经 
常会 造成 人 们 的 误解 。 其 中 最 常见 的 问题 就 是 在 布尔 表达 式 中 使 用 Boolean 对 象 ， 例 如 : 
CB var falseObject = new Boolean(false); 


var result = falseObject && true; 
alert (result); //true 














[i 


Boolean 对 象 ， 可 以 像 下 面 这 样 调用 Boolean 














Var falseValue = false; 
result = falseValue && true; 
alert(result); //false 


BooleanTypeExample01.htm 


在 这 个 例子 中 ,我 们 使 用 false 值 创 建 了 一 个 Boolean 对 象 ,然后 ,将 这 个 对 象 与 基本 类 型 值 true 
构成 了 导 辑 与 表达 式 。 在 布尔 运算 中 ，false && true 等 于 false。 可 是 ,示例 中 的 这 行 代码 是 对 
falseObject 而 不 是 对 它 的 值 ( false ) 进行 求 值 。 前 面 讨论 过 ， 布 尔 表 达 式 中 的 所 有 对 象 都 会 被 转 
换 为 trzue， 因 此 falseobJject 对 象 在 布尔 表达 式 中 代表 的 是 true。 结 果 ，true && true 当然 就 等 
true J sa 

基本 类 型 与 引用 类 型 的 布尔 值 还 有 两 个 区 别 。 首 先 ，typeof 操作 符 对 基本 类 型 返回 "boolean"， 
而 对 引用 类 型 返回 "object"。 其 次 ,由 于 Boolean 对 象 是 Boolean 类 型 的 实例 ,所 以 使 用 instanceof 
操作 符 测试 Boolean 对 象 会 返回 true， 而 测试 基本 类 型 的 布尔 值 则 返回 false。 例 如 : 















































alert (typeof falseObject); //object 

alert (typeof falseValue); //boolean 

alert (falseObject instanceof Boolean); //true 
alert (falseValue instanceof Boolean); //false 





理解 基本 类 型 的 布尔 值 与 Boolean 对 象 之 间 的 区 别 非常 重要 一 一 当然 ， 我 们 的 建议 是 永远 不 要 使 
用 Boolean 对 象 。 














5.6.2” ”Number 类 型 


Number 是 与 数字 值 对 应 的 引用 类 型 。 要 创建 Number 对 象 ， 可 以 在 调用 Number 构造 函数 时 向 其 
中 传递 相应 的 数值 。 下 面 是 一 个 例子 。 


思 var numberObject = new Number (10) : 




















NumberTypeExample01.htm 





与 Boolean 类 型 一 样 ，Number 类 型 也 重 写 了 valueof () 、toLocalestring() 和 toSstring() 
方法 。 重 写 后 的 valueof () 方 法 返回 对 象 表示 的 基本 类 型 的 数值 ， 另 外 两 个 方法 则 返回 字符 串 形 式 的 
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数值 。 我 们 在 第 3 章 还 介绍 过 ， 可 以 为 tostring() 方 法 传递 一 个 表示 基数 的 参数 ， 告 诉 它 返回 几 进 制 
数值 的 字符 串 形 式 ， 如 下 面 的 例子 所 示 。 


Var num = 10; 
alert (num.toString()); /LO 





alert (num.toString (2)); //"1010 
alert (num.toString(8)); // "12™ 
alert (num.toString(10)); pA OB 
alert (num.toString(16)); //"a" 


NumberTypeExample01.htm 
除了 继承 的 方法 之 外 ，Number 类 型 还 提供 了 一 些 用 于 将 数值 格式 化 为 字符 串 的 方法 。 
其 中 ，toFixed() 方 法 会 按照 指定 的 小 数位 返回 数值 的 字符 串 表 示 ， 例 如 : 


Var num = 10; 
alert (num.toFixed(2)); //"10.00" 
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这 里 给 toFixed() 方 法 传人 了 数值 2， 意思 是 显示 几 位 小 数 。 于 是 ,这 个 方法 返回 了 "10.00", 即 
以 0 填补 了 必要 的 小 数位 。 如 果 数 值 本 身 包含 的 小 数位 比 指定 的 还 多 , 那么 接近 指定 的 最 大 小 数位 的 值 
就 会 伟人 ， 如 下 面 的 例子 所 示 。 


Var num = 10.005; 
alert (num.toFixed (2)); //"10.01" 


能 够 自动 舍 入 的 特性 ， 使 得 toFixed() 方 法 很 适合 处 理 货币 值 。 但 需要 注意 的 是 ， 不 同 浏览 器 给 
这 个 方法 设 定 的 舍 入 规则 可 能 会 有 所 不 同 。 在 给 torixed() 传 人 0 的 情况 下 , IE8 及 之 前 版 本 不 能 正确 
伟人 范围 在 {(-0.94.,-0.5],[0.50.94)} 之 间 的 值 。 对 于 这 个 范围 内 的 值 ， 正 会 返回 0， 而 不 是 -1 或 1; 其 他 
浏览 器 都 能 返回 正确 的 值 。IE9 修复 了 这 个 问题 。 
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围 ， 有 些 浏览 器 也 可 能 支持 更 多 位 数 。 

















另外 可 用 于 格式 化 数值 的 方法 是 toExponential () ， 该 方法 返回 以 指数 表示 法 (也 称 e 表 示 法 ) 
表示 的 数值 的 字符 串 形式 。 与 toFixed() 一 样 ，toExponential () 也 接收 一 个 参数 ， 而 且 该 参数 同样 
也 是 指定 输出 结果 中 的 小 数位 数 。 看 下 面 的 例子 。 

var num = 10; 

alert (num.toExponential(1)); //"1.0e+1" 

以 上 代码 输出 了 "1. 0e+1"; 不 过 ， 这 么 小 的 数值 一 般 不 必 使 用 。 表示 法 。 如 果 你 想得到 表示 某 个 
数值 的 最 合适 的 格式 ， 就 应 该 使 用 topPrecision() 方 法 。 

对 于 一 个 数值 来 说 ，toPrecision() 方 法 可 能 会 返回 固定 大 小 (fixed ) 格式 ， 也 可 能 返回 指数 
(exponential ) 格式 ; 具体 规则 是 看 哪 种 格式 最 合适 。 这 个 方法 接收 一 个 参数 ， 即 表示 数值 的 所 有 数字 的 
位 数 ( 不 包括 指数 部 分 )。 请 看 下 面 的 例子 。 
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Var num = 99; 


alert (num.toPrecision(1)); //"1le+2" 
alert (num.toPrecision(2)); //"99" 
alert (num.toPrecision(3)); //"99.0" 


NumberTypeExample01.htm 
以 上 代码 首先 完成 的 任务 是 以 一 位 数 来 表示 99， 结 果 是 "1e+2"， 即 100。 因 为 一 位 数 无 法 准确 地 














表示 99， 因 此 toPrecision () 就 将 它 向 上 伟人 为 100， 这 样 就 可 以 使 用 一 位 数 来 表示 它 了 。 而 接 下 来 的 


月 





实际 上 ,toPrecision ( 


上 两 位 数 表 示 99， 当 然 还 是 "99"。 最 后 ,在 想 以 三 位 数 表示 99 时 ，toPrecision() 方 法 返回 了 "99.0"。 
) 会 根据 要 处 理 的 数值 决定 到 底 是 调用 toFixed() 还 是 调用 toExponential ()。 











而 这 三 个 方法 都 可 以 通过 向 上 或 向 下 舍 人 ， 做 到 以 最 准确 的 形式 来 表示 带 有 正确 小 数位 的 值 。 














toPrecision() 方 法 可 以 表现 1 到 21 位 小 数 。 某 些 浏览 器 支持 的 范围 更 大 ， 但 


这 是 典型 实现 的 范围 。 





与 Boolean 对 象 类 似 , Number 对 象 也 以 后 台 方 式 为 数值 提供 了 重要 的 功能 。 但 与 此 同时 , 我 们 仍 














然 不 建议 直接 实例 化 Numbet 类 型 ， 而 原因 与 显 式 创建 Boolean I 具体 来 讲 ， 就 是 在 使 用 


t 








ypeof 和 instanceof 操作 符 测试 基本 类 型 数值 与 引用 类 型 数值 时 ， 得 到 的 结果 完全 不 同 ， 如 下 面 的 
例子 所 示 。 
var numberObject = new Number (10); 
Var numberValue = 10; 
alert (typeof numberObject); //"object" 
alert (typeof numberValue); //"number" 
alert (numberObject instanceof Number); //true 
alert (numberValue instanceof Number); //false 


贝 


在 使 用 typeof 操作 符 测 试 基 本 类 型 数值 时 ， 始 终 会 返回 "number" ， 而 在 测试 Number 对 象 时 ， 
1 会 返回 "object"。 类 似 地 ，Number 对 象 是 Number 类 型 的 实例 ， 而 基本 类 型 的 数值 则 不 是 。 








5.6.3 String 类 型 





String 类 型 是 字符 串 的 对 象 包 装 类 型 ， 可 以 像 下 面 这 样 使 用 string 构造 函数 来 创建 。 


var stringObject = new String("hello world"); 








StringTypeExample01.htm 
string 对 象 的 方法 也 可 以 在 所 有 基本 的 字符 串 值 中 访问 到 ,其 中 ,继承 的 valueof () 、toLocale- 











string() 和 toSstring() 方 法 ， 都 返回 对 象 所 表示 的 基本 字符 串 值 。 























string 类 型 的 每 个 实例 都 有 一 个 length 属性 ， 表 示 字 符 串 中 包含 多 个 字符 。 来 看 下 面 的 例子 。 


var stringValue = "hello world"; 
alert (stringVvalue.length); //"11" 


这 个 例子 输出 了 字符 串 "hello world" 中 的 字符 数量 ， 即 "11"。 应 该 注意 的 是 ， 即 使 字符 串 中 包 








含 双 字 节 字符 (不 是 占 一 个 字 节 的 ASCI 字符 )， 每 个 字符 也 仍然 算 一 个 字符 。 




















String 类 型 提供 了 很 多 方法 ， 用 于 辅助 完成 对 ECMAScript 中 字符 串 的 解析 和 操作 。 
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1. 字符 方法 

两 个 用 于 访问 字符 串 中 特定 字符 的 方法 是 : charaAt () 和 charcodeat () 。 这 两 个 方法 都 接收 一 个 
参数 ， 即 基于 0 的 字符 位 置 。 其 中 ，charat () 方 法 以 单字 符 字 符 串 的 形式 返回 给 定位 置 的 那个 字符 
(ECMAScript 中 没有 字符 类 型 )。 例 如 : 


var stringValue = "hello world"; 
alert (StringValue .charRAt (1)); //"e" 


字符 串 "hello world" 位 置 1 处 的 字符 是 "e" ， 因 此 调用 charat (1) 就 返回 了 "e"。 如 果 你 想得到 
的 不 是 字符 而 是 字符 编码 ， 那 么 就 要 像 下 面 这 样 使 用 charcodeat () 了 。 


var stringValue = "hello world"; 
alert (stringVvalue.charCodeAt (1)); // 输 出 "101" 


这 个 例子 输出 的 是 "101" ， 也 就 是 小 写字 母 "e" 的 字符 编码 。 
ECMAScript5 还 定义 了 另 一 个 访问 个 别 字符 的 方法 。 在 支持 此 方法 的 浏览 器 中 , 可 以 使 用 方 括号 加 数 
字 索 引 来 访问 字符 串 中 的 特定 字符 ， 如 下 面 的 例子 所 示 。 


var stringValue = "hello world"; 
alert (stringvalue[1]); //"e" 


使 用 方 括号 表示 法 访问 个 别 字符 的 语法 得 到 了 IE8 及 Firefox 、Safari 、Chrome 和 Opera 所 有 版 本 的 
支持 。 如 果 是 在 IE7 及 更 早 版 本 中 使 用 这 种 语法 ,会 返回 undefined 值 (尽管 根本 不 是 特殊 的 
undefined 值 )。 

2. 字符 串 操 作 方 法 

下 面 介绍 与 操作 字符 串 有 关 的 几 个 方法 。 第 一 个 就 是 concat () , 用 于 将 一 或 多 个 字符 串 拼接 起 来 ， 
返回 拼接 得 到 的 新 字符 串 。 先 来 看 一 个 例子 。 

Var stringValue = "hello " 

Var result = stringValue.concat ("world"); 

alert (result); //"hello world" 

alert (stringValue); //"hello" 

在 这 个 例子 中 ， 通 过 stringValue 调用 concat () 方 法 返回 的 结果 是 "hello world" 一 一 但 
stringValue 的 值 则 保持 不 变 。 实际 上 ，concat () 方 法 可 以 接受 任意 多 个 参数 ,也 就 是 说 可 以 通过 它 
拼接 任意 多 个 字符 串 。 再 看 一 个 例子 : 


var stringValue = "hello " 
Var result = stringValue.concat ("world", "!"); 


































































































alert (result); //"hello world!" 
alert (stringValue); //"hello" 


这 个 例子 将 "worlda" 和 "!" 拼 接 到 了 "hello" 的 末尾 。 虽 然 concat () 是 专门 用 来 拼接 字符 串 的 方 
法 ,但 实践 中 使 用 更 多 的 还 是 加 号 操作 符 (+ ) 而 且 , 使 用 加 号 操作 符 在 大 多 数 情况 下 都 比 使 用 concat () 
方法 要 简便 易 行 ( 特别 是 在 拼接 多 个 字符 串 的 情况 下 )。 

ECMAScript 还 提供 了 三 个 基于 子 字符 串 创 建新 字符 串 的 方法 : slice() 、substr() 和 substring()。 
这 三 个 方法 都 会 返回 被 操作 字符 串 的 一 个 子 字符 串 ， 而 且 也 都 接受 一 或 两 个 参数 。 第 一 个 参数 指定 子 字 
符 串 的 开始 位 置 ， 第 二 个 参数 〈 在 指定 的 情况 下 ) 表示 子 字符 串 到 哪里 结束 。 具 体 来 说 ，slice() 和 
substring() 的 第 二 个 参数 指定 的 是 子 字符 串 最 后 一 个 字符 后 面 的 位 置 。 而 supstr () 的 第 二 个 参数 指 
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定 的 则 是 返回 的 字符 个 数 。 如 果 没 有 给 这 些 方法 传递 第 二 个 参数 ， 则 将 字符 串 的 长 度 作为 结束 位 置 。 与 
concat () 方 法 一 样 ，slice() 、substr() 和 substring() 也 不 会 修改 字符 串 本 身 的 值 一 一 它们 只 是 
返回 一 个 基本 类 型 的 字符 串 值 ， 对 原始 字符 串 没有 任何 影响 。 请 看 下 面 的 例子 。 











var stringValue = "hello world"; 

alert (stringVvalue.slice(3)); //"lo world" 
alert (stringValue.substring(3)); //"lo world" 
alert (StringValue .Substzr(3) ) ， //"lo world" 
alert (stringVvalue.slice(3, 7)); //"lo w" 
alert(stringVvalue.substring(3,7)); //"1lo w" 
alert (stringVvalue.substr(3, 7)); //"lo worl" 


StringTypeManipulationMethodsExample01.htm 





这 个 例子 比较 了 以 相同 方式 调用 slice()、substr() 和 substring() 得 到 的 结果 ， 而 且 多 数 情 
况 下 的 结果 是 相同 的 。 在 只 指定 一 个 参数 3 的 情况 下 ， 这 三 个 方法 都 返回 "lo world"， 因 为 "hello" 
中 的 第 二 个 "1" 处 于 位 置 3。 而 在 指定 两 个 参数 3 和 7 的 情况 下 ，slice() 和 substring () 返 回 "low" 
("worlgd" 中 的 "o" 处 于 位 置 7， 因 此 结果 中 不 包含 "o" ), 但 substr () 返 回 "1o wor1"， 因 为 它 的 第 二 
个 参数 指定 的 是 要 返回 的 字符 个 数 。 

在 传递 给 这 些 方法 的 参数 是 负 值 的 情况 下 ,它们 的 行为 就 不 尽 相 同 了 。 其 中 ，slice () 方 法 会 将 传 
入 的 负 值 与 字符 串 的 长 度 相 加 ，substr () 方 法 将 负 的 第 一 个 参数 加 上 字符 串 的 长 度 ， 而 将 负 的 第 二 个 
参数 转换 为 0。 最 后 ，substring () 方 法 会 把 所 有 负 值 参数 都 转换 为 0。 下面 来 看 例子 。 









































Var stringValue = "hello world"; 

alert (stringVvalue.slice(-3)); //"rld" 
alert(stringVvalue.substring(-3)); //"hello world" 
alert (stringVvalue.substr(-3)); //"rld" 

alert (stringVvalue.slice(3, -4)); //"lo w" 

alert (stringValue.substring(3, -4)); //"hel" 

alert (stringValue.substr(3, -4)); //"" ( 空 字 符 串 ) 
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这 个 例子 清晰 地 展示 了 上 述 三 个 方法 之 间 的 不 同行 为 。 在 给 slice () 和 substr () 传 递 一 个 负 值 
参数 时 ， 它 们 的 行为 相同 。 这 是 因为 -3 会 被 转换 为 8 (字符 串 长 度 加 参数 11+(-3)=8 )， 实 际 上 相当 
于 调用 了 slice(8) 和 substr(8)。 但 substring() 方 法 则 返回 了 全 部 字符 串 ， 因 为 它 将 -3 转换 
成 了 0。 








了 下 的 JavaScript 实现 在 处 理 向 substz () 方 法 传递 负 值 的 情况 时 存在 问题 ， 它 会 


返回 原始 的 字符 串 。IE9 修复 了 这 个 问题 。 





当 第 二 个 参数 是 负 值 时 ， 这 三 个 方法 的 行为 各 不 相同 。slice() 方 法 会 把 第 二 个 参数 转换 为 7， 这 
就 相当 于 调用 了 slice (3,7)， 因 此 返回 "lo w"。substring() 方 法 会 把 第 二 个 参数 转换 为 0， 使 调 
用 变 成 了 substring(3,0) ， 而 由 于 这 个 方法 会 将 较 小 的 数 作为 开始 位 置 ， 将 较 大 的 数 作为 结束 位 置 ， 
因此 最 终 相当 于 调用 了 substring (0,3)。substr () 也 会 将 第 二 个 参数 转换 为 0， 这 也 就 意味 着 返回 
包含 零 个 字符 的 字符 串 ， 也 就 是 一 个 空 字 符 串 。 
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3. 字符 串 位 置 方法 

有 两 个 可 以 从 字符 串 中 查找 子 字符 串 的 方法 : indexof () 和 lastIndexof () 。 这 两 个 方法 都 是 从 
一 个 字符 串 中 搜索 给 定 的 子 字符 串 ， 然 后 返 子 字符 串 的 位 置 〈《 如 果 没 有 找到 该 子 字符 串 ， 则 返回 -1 )。 
这 两 个 方法 的 区 别 在 于 : inaexof () 方 法 从 字符 串 的 开头 向 后 搜索 子 字符 串 ， 而 lastIndexof () 方 法 
是 从 字符 串 的 末尾 向 前 搜索 子 字符 串 。 还 是 来 看 一 个 例子 吧 。 




















Var stringValue = "hello world"; 
alert (stringVvalue.indexOf ("o")); //4 
alert (stringVvalue.lastIndexOf ("o")); //7 
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子 字符 串 "o" 第 一 次 出 现 的 位 置 是 4， 即 "hello" 中 的 "o"; 最 后 一 次 出 现 的 位 置 是 7， 即 "worla" 中 的 
"mo"。 如 果 "o' 在 这 个 字符 串 中 仅 出 现 了 一 次 ， 那 么 indaexof () 和 lastIndexof () 会 返回 相同 的 位 置 值 。 

这 两 个 方法 都 可 以 接收 可 选 的 第 二 个 参数 ， 表 示 从 字符 串 中 的 哪个 位 置 开 始 搜索 。 换 名 话说 ， 
indexof () 会 从 该 参数 指定 的 位 置 向 后 搜索 ， 忽 略 该 位 置 之 前 的 所 有 字符 ; 而 lastIndexof () 则 会 从 
旨 定 的 位 置 向 前 搜索 ， 忽 略 该 位 置 之 后 的 所 有 字符 。 看 下 面 的 例子 。 






































Var stringValue = "hello world"; 
alert (stringVvalue.indexOf("o", 6)); /1/7 
alert (stringVvalue.lastIndexOf ("o", 6)); //4 





在 将 第 二 个 参数 6 传递 给 这 两 个 方法 之 后 ， 得 到 了 与 前 面 例子 相反 的 结果 。 这 一 次 ， 由 于 
indexof () 是 从 位 置 6( 字 母 "w" ) 开 始 向 后 搜索 , 结果 在 位 置 7 找到 了 "o", 因此 它 返回 7。 而 last- 
Index0of () 是 从 位 置 6 开始 向 前 搜索 。 结 果 找 到 了 "hello" 中 的 "o"， 因 此 它 返 回 4。 在 使 用 第 二 个 
参数 的 情况 下 , 可 以 通过 循环 调用 indexof () 或 1astIndexof () 来 找到 所 有 匹配 的 子 字符 串 , 如 下 
面 的 例子 所 示 : 





























人 var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit"; 


Var positions = new Array(); 
var pos = stringValue.indexOf ("e"); 


while(pos > -1)f{ 
positions.push (pos); 
pos = stringValue.indexOof("e", pos + 1); 


} 
alert (positions); A/™3,24,32,.35,52" 
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这 个 例子 通过 不 断 增加 ingexof () 方 法 开始 查找 的 位 置 ， 遍历 了 一 个 长 字符 串 。 在 循环 之 外 ， 首 
先 找到 了 "e"' 在 字符 串 中 的 初始 位 置 ， 而 进入 循环 后 ， 则 每 次 都 给 ingexof () 传递 上 一 次 的 位 置 加 1。 
这 样 ， 就 确保 了 每 次 新 搜索 都 从 上 一 次 找到 的 子 字 符 串 的 后 面 开始 。 每 次 搜索 返回 的 位 置 依次 被 保存 在 
数组 positions 中 ， 以 便 将 来 使 用 。 

4. trim() 方 法 

ECMAScript 5 为 所 有 字符 串 定义 了 trim() 方 法 。 这 个 方法 会 创建 一 个 字符 串 的 副本 ,删除 前 置 及 
后 缀 的 所 有 空格 ,然后 返回 结果 。 例 如 : 
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Var stringValue = " hello world 

Var trimmedSstringValue = stringValue.trim(); 
alert (stringValue); 大 /号 hello world 
alert (trimmedSstringValue); //"hello world" 



































1 于 trim() 返 回 的 是 字符 串 的 副本 , 所 以 原始 字符 串 中 的 前 置 及 后 级 空格 会 保持 不 变 。 支持 这 个 
方法 的 浏览 器 有 IE9+、Firefox 3.5+、Safari 5+、Opera 10.5+ 和 Chrome。 此 外 ，Firefox 3.5+、Safari 5+ 
和 Chrome 8+ 还 支持 非 标准 的 trimLeft () 和 trimRight () 方 法 ,分别 用 于 删除 字符 串 开头 和 末尾 的 
空格 。 

5. 字符 串 大 小 写 转换 方法 

接 下 来 我 们 要 介绍 的 是 一 组 与 大 小 写 转换 有 关 的 方法 。ECMAScript 中 涉及 字符 串 大 小 写 转换 的 方 
法 有 4 个 : toLowerCase()、toLocaleLowerCase()、 toUpperCase() 和 toLocaleUpperCase()。 
其 中 ，toLowerCase() 和 toUpperCase() 是 两 个 经 典 的 方法 ， 借鉴 自 java.lang.String 中 的 同名 
方法 。 而 toLocaleLowerCase() 和 toLocaleUppercase() 方 法 则 是 针对 特定 地 区 的 实现 。 对 有 些 地 
区 来 说 ， 针 对 地 区 的 方法 与 其 通用 方法 得 到 的 结果 相同 ,但 少数 语言 ( 如 土耳其 语 ) 会 为 Unicode 大 小 
写 转换 应 用 特殊 的 规则 ， 这 时 候 就 必须 使 用 针对 地 区 的 方法 来 保证 实现 正确 的 转换 。 以 下 是 几 个 例子 。 





















































Var stringValue = "hello world"; 

alert (stringValue.toLocaleUpperCase()); //"HELLO WORLD" 
alert (stringVvalue.toUpperCase()); //"HELLO WORLD" 
alert (stringValue.toLocaleLowerCase()); //"hello world" 
alert (stringVvalue.toLowerCase()); //"hello world" 
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以 上 代码 调用 的 toLocaleUppercase() 和 toUppercase () 都 返回 了 "HELLO WORLD"， 就 像 调 用 
toLocaleLowerCase() 和 toLowerCase() 都 返回 "hello world" 一 样 。 一 般 来 说 ， 在 不 知道 自己 的 
代码 将 在 哪 种 语言 环境 中 运行 的 情况 下 ， 还 是 使 用 针对 地 区 的 方法 更 稳妥 一 些 。 

6. 字符 串 的 模式 匹配 方法 

string 类 型 定义 了 几 个 用 于 在 字符 串 中 匹配 模式 的 方法 。 第 一 个 方法 就 是 match () ， 在 字符 串 上 
调用 这 个 方法 ， 本 质 上 与 调用 RegExp 的 exec () 方 法 相同 。match () 方 法 只 接受 一 个 参数 ， 要 么 是 一 
个 正则 表达 式 ， 要 么 是 一 个 RegExp 对 象 。 来 看 下 面 的 例子 。 


var text = "cat, bat, sat, fat"; 
Var pattern = /.at/; 
























































// 与 pattern.exec(text) 相 同 
var matches = text.match (pattern); 


alert (matches.index); //0 
alert (matches[0]); 帮 Gati 
alert (pattern.lastIndex); //0 
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本 例 中 的 match () 方 法 返回 了 一 个 数组 ; 如 果 是 调用 RegExp 对 象 的 exec () 方 法 并 传递 本 例 中 的 
字符 串 作 为 参数 ,那么 也 会 得 到 与 此 相同 的 数组 : 数组 的 第 一 项 是 与 整个 模式 匹配 的 字符 串 ， 之 后 的 每 
一 项 ( 如 果 有 ) 保存 着 与 正则 表达 式 中 的 捕获 组 匹配 的 字符 串 
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另 一 个 用 于 查找 模式 的 方法 是 search () 。 这 个 方法 的 唯一 参数 与 match () 方 法 的 参数 相同 : 由 字 
符 串 或 RegExp 对 象 指定 的 一 个 正则 表达 式 。search () 方 法 返回 字符 串 中 第 一 个 匹配 项 的 索引 ; 如 果 没 
有 找到 匹配 项 ， 则 返回 -1。 而 且 ，search () 方 法 始终 是 从 字符 串 开 头 向 后 查找 模式 。 看 下 面 的 例子 。 


Var text = “cat; bat, sat; tat™; 
时 var pos = text.search(/at/); 
alert (pos); /1/1 
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这 个 例子 中 的 search () 方 法 返回 1， 即 "at "在 字符 串 中 第 一 次 出 现 的 位 置 。 

为 了 简化 替换 子 字符 串 的 操作 ，ECMAScript 提供 了 replace() 方 法 。 这 个 方法 接受 两 个 参数 : 第 

一 个 参数 可 以 是 一 个 RegExp 对 象 或 者 一 个 字符 串 ( 这 个 字符 串 不 会 被 转换 成 正则 表达 式 )， 第 二 个 参 

数 可 以 是 一 个 字符 串 或 者 一 个 函数 。 如 果 第 一 个 参数 是 字符 串 , 那么 只 会 蔡 换 第 一 个 子 字符 捉 。 要 想 替 
换 所 有 子 字符 串 ， 唯 一 的 办 法 就 是 提供 一 个 正则 表达 式 ， 而 且 要 指定 全 局 〈(g ) 标志 ， 如 下 所 示 。 



































Var text = "cat, bat, sat, fat"; 
Var result = text.replace("at", "ond"); 
alert (result); //"cond, bat, sat, fat" 





result = text.replace(/at/g, "ond"); 
alert (result); //"cond, bond, sond, fond" 
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在 这 个 例子 中 ， 首 先 传人 replace() 方 法 的 是 字符 串 "at" 和 替换 用 的 字符 串 "ona" 。 符 换 的 结 
是 把 "cat" 变 成 了 "cong", 但 字符 串 中 的 其 他 字符 并 没有 受到 影响 。 然 后 , 通过 将 第 一 个 参数 修改 为 带 
有 全 局 标志 的 正则 表达 式 ， 就 将 全 部 "at "都 替换 成 了 "ond"。 
如 果 第 二 个 参数 是 字符 串 , 那么 还 可 以 使 用 一 些 特殊 的 字符 序列 , 将 正则 表达 式 操 作 得 到 的 值 插入 
到 结果 字符 串 中 。 下 表 列 出 了 ECMAScript 提供 的 这 些 特殊 的 字符 序列 。 

















































































































































































































字符 序列 替换 文本 

$$ $ 

S& 匹配 整个 模式 的 子 字符 串 。 与 RegExp .lastMatch 的 值 相同 

$， 匹配 的 子 字 符 串 之 前 的 子 字符 串 。 与 RegExp . leftcontext 的 值 相 同 

S 匹配 的 子 字符 串 之 后 的 子 字符 串 。 与 RegEgxp .rightcontext 的 值 相 同 

$n 匹配 第 n 个 捕获 组 的 子 字 符 串 ， 其 中 n 等 于 0 ~ 9。 例 如 ，$1 是 匹配 第 一 个 捕获 组 的 子 字符 串 ，$2 是 匹配 第 
二 个 捕获 组 的 子 字符 串 ， 以 此 类 推 。 如 果 正 则 表达 式 中 没有 定义 捕获 组 ， 则 使 用 空 字符 串 

$nn 匹配 第 nan 个 捕获 组 的 子 字符 串 ， 其 中 nn 等 于 01 ~ 99。 例 如 ，s01 是 匹配 第 一 个 捕获 组 的 子 字 符 串 ，s$02 
是 匹配 第 二 个 捕获 组 的 子 字 符 串 ， 以 此 类 推 。 如 果 正 则 表达 式 中 没有 定义 捕获 组 ， 则 使 用 空 字符 串 

















通过 这 些 特殊 的 字符 序列 ， 可 以 使 用 最 近 一 次 匹配 结果 中 的 内 容 ， 如 下 面 的 例子 所 示 。 











Var text = "cat, bat, sat, fat"; 
时) result = text.replace(/(.at)/g, "word ($1)"); 
alert (result); //word (cat), word (bat), word (sat), word (fat) 
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在 此 ， 每 个 以 "at" 结 尾 的 单词 都 被 替换 了 ， 替 换 结果 是 "wora" 后 跟 一 对 辆 括号 
字符 序列 $1 所 替换 的 单词 。 

replace() 方 法 的 第 二 个 参数 也 可 以 是 一 个 函数 。 在 只 有 一 个 匹配 项 ( 即 与 模式 
情况 下 ， 会 向 这 个 函数 传递 3 个 参数 : 模式 的 匹配 项 、 模 式 匹配 项 在 字符 








， 而 圆 括号 中 是 被 


匹配 的 字符 串 ) 的 


中 的 位 置 和 原始 字符 串 。 在 


正则 表达 式 中 定义 了 多 个 ] 





配 项 、 第 二 个 捕获 组 的 匹 本 


捕获 组 的 情况 下 , 传递 给 函数 的 参数 依次 是 模式 的 匹配 项 、 第 一 个 捕获 组 的 匹 
tC 项 ……, 但 最 后 两 个 参数 仍然 分 别 是 模式 的 匹配 项 在 字符 串 中 的 位 置 和 原始 














字符 串 。 这 个 函数 应 该 返 


二 个 参数 可 以 实现 更 加 精细 的 替换 操作 ， 请 看 下 卫 


function htmlEscap 


return text.replacel 


Switch (mat 
case 

re 

case 

re 

case 

re 

case 

re 


ji 
} 


alert (htmlEscapel(" 
//&lt;p class=&quo 


这 里 ， 我 们 为 插入 HTML 代码 定义 了 函数 html: 


回 一 个 字符 串 ， 表 示 应 该 被 奉 换 的 匹配 项 使 用 函数 作为 replace() 方 法 的 第 
j 这 个 例子 。 














el(text){ 
/[ function(match, pos, 


<>"&]/g, originalText){ 


ch){ 


We 


tu ™ 


Wy 


Eurn ™ 


ng 


turn 


Tn 


tur 


<p class=\"greeting\">Hello world!</p>")); 
t;greeting&quot;&gt;Hello world!g&lt;/p&gt; 
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Escape () ， 这 个 函数 能 够 转 义 4 个 字符 : 小 于 号 、 








大 于 号 、 和 号 以 及 双 引 号 。 实 现 这 种 转 义 的 最 简单 方式 ， 就 是 使 用 正则 表达 式 查 找 这 几 个 字符 ， 然 后 定 
义 一 个 能 够 针对 每 个 匹配 的 字符 返回 特定 HTML 实体 的 函数 。 
最 后 一 个 与 模式 匹配 有 关 的 方法 是 split () ,这 个 方法 可 以 基于 指定 的 分 隔 符 将 一 个 字符 串 分 割 成 


多 个 子 字 符 串 ， 并 将 结果 放 在 一 个 数组 中 。 分 隔 符 可 以 是 字符 串 ， 也 可 以 是 一 个 Reg 








Exp 对 象 ( 这 个 方 





法 不 会 将 字符 串 看 成 正则 表达 式 )。 split () 方 法 可 以 接受 可 选 的 第 二 个 参数 ， 用 于 指定 数组 的 大 小 ， 

















以 便 确保 返回 的 数组 不 会 超过 既定 大 小 。 请 看 下 面 的 例子 。 
var colorText = "red,blue,green,yellow"; 
Var colorsl1 = colorText.split(",");} //["red", "blue", "green", "yellow"] 
Var COLOrS2 = COlOrText yeDlit(™, ,2)3 //["red", "blue"] 
Var Colors3 = colorText.split(/[^\,]+/); J a eo ee 


在 这 个 例子 中 ，colo 


一 个 包含 其 中 颜色 名 的 数组 ,月 








以 为 split () 方 法 传递 第 





需要 注意 的 是 , 在 最 后 一 次 调用 split () 返 回 的 数 纪 
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隐 的 颜色 名 字符 串 。 基 于 该 字符 串 调 用 split (",") 会 得 到 
日 于 分 割 字 符 串 的 分 隔 符 是 逗号 。 为 了 将 数组 截 短 ， 让 它 只 包含 两 项 ， 可 
二 个 参数 2。 最 后 ， 通 过 使 用 正则 表达 式 ， 还 可 以 取得 包含 逗号 字符 的 数组 。 
中 ,第 一 项 和 最 后 一 项 是 两 个 空 字符 串 。 之 所 以 会 


rText 是 逗号 分 
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这 样 ， 是 因为 通过 正则 表达 式 指 定 的 分 隔 符 出 现在 了 字符 串 的 开头 〈 即 子 字符 串 "z*ed" ) 和 末尾 ( 即 子 
字符 串 "yellow" )。 

对 split() 中 正则 表达 式 的 支持 因 浏览 器 而 异 。 尽 管 对 于 简单 的 模式 没有 什么 差别 , 但 对 于 未 发 现 
匹配 项 以 及 带 有 捕获 组 的 模式 ， 匹 配 的 行为 就 不 大 相同 了 。 以 下 是 几 种 常见 的 差别 。 
口 IE8 及 之 前 版 本 会 忽略 捕获 组 。ECMA-262 规定 应 该 把 捕获 组 拼接 到 结果 数组 中 。IE9 能 正确 地 
在 结果 中 包含 捕获 组 。 
口 Firefox 3.6 及 之 前 版 本 在 捕获 组 未 找到 匹配 项 时 , 会 在 结果 数组 中 包含 空 字 符 串 ; ECMA-262 规 

定 没 有 匹配 项 的 捕获 组 在 结果 数组 中 应 该 用 undefined 表示 。 

在 正则 表达 式 中 使 用 捕获 组 时 还 有 其 他 微妙 的 差别 。 在 使 用 这 种 正则 表达 式 时 , 一 定 要 在 各 种 浏览 

器 下 多 做 一 些 测试 。 



























要 了 解 关于 split() 方 法 以 及 捕获 组 的 跨 浏 览 器 问题 的 更 多 讨论 ,请 参考 Steven 
Levithan 的 文章 “JavaScript split bugs: Fixed!” ( http://blog.stevenlevithan.com/archives/ 





cross-browser-split ) 。 





7. localeCompare() 方 法 


与 操作 字符 串 有 关 的 最 后 一 个 方法 是 localeCompare () ， 这 个 方法 比较 两 个 字符 串 ， 并 返回 下 列 

















值 中 的 一 个 : 
口 如 果 字 符 串 在 字母 表 中 应 该 排 在 字符 串 参 数 之 前 ， 则 返回 一 个 负数 ( 大 多 数 情况 下 是 -1， 具 体 
的 值 要 视 实现 而 定 ); 


口 如 果 字 符 串 等 于 字符 串 参 数 ， 则 返回 0; 
口 如 果 字 符 串 在 字母 表 中 应 该 排 在 字符 串 参 数 之 后 , 则 返回 一 个 正 数 ( 大 多 数 情况 下 是 1, 具体 的 








值 同样 要 视 实现 而 定 )。 
下 面 是 几 个 例子 。 
var stringValue = "Yellow" 
CY) alert(stringValue.localeCompare ("brick")); PEA 
alert (stringValue.localeCompare ("yellow")); 大 /站 
alert (stringValue.localeCompare("z00")); YY = 于 
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这 个 例子 比较 了 字符 串 "yellow" 和 另外 几 个 值 : "brick"、"yellow" 和 "zoo"。 因 为 "brick" 在 
字母 表 中 排 在 "yellow'" 之 前 ， 所 以 localecompare() 返 回 了 1; 而 "yellow" 等 于 "yellow"， 所 以 
localeCompare() 返 回 了 0; 最 后 ，"zoo" 在 字母 表 中 排 在 "yellow" 后 面 ， 所 以 localeCompare () 
返回 了 -1。 再 强调 一 次 ， 因 为 localecompare() 返 回 的 数值 取决 于 实现 ， 所 以 最 好 是 像 下 面 例子 所 示 
的 这 样 使 用 这 个 方法 。 

function determineOrder (value) { 


Var result = stringValue.localeCompare (value); 
if (result < 0)1{ 

















alert("The string 'yellow' comes before the string '" + Value + "'."); 
} else if (result > 0) { 

alert("The string 'yellow' comes after the string '" + value + "'."); 
} else { 
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alert ("The string 'yellow' is equal to the string '" + value + "'."); 


determineOrder ("brick"); 
determineOrder ("yellow"); 
determineOrder ("zo0"); 
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使 用 这 种 结构 ， 就 可 以 确保 自己 的 代码 在 任何 实现 中 都 可 以 正确 地 运行 了 。 

localeCompare() 方 法 比较 与 众 不 同 的 地 方 ， 就 是 实现 所 支持 的 地 区 ( 国家 和 语言 ) 决定 了 这 个 
方法 的 行为 。 比 如 ， 美 国 以 英语 作为 ECMAScript 实现 的 标准 语言 ， 因 此 localecompare () 就 是 区 分 
大 小 写 的 ,于 是 大 写字 母 在 字母 表 中 排 在 小 写字 母 前 头 就 成 为 了 一 项 决定 性 的 比较 规则 。 不 过 , 在 其 他 
地 区 恕 怕 就 不 是 这 种 情况 了 。 

8. fromCharCode() 方 法 

另外 ，string 构造 函数 本 身 还 有 一 个 静态 方法 : fromCcharcode () 。 这 个 方法 的 任务 是 接收 一 或 
多 个 字符 编码 ， 然 后 将 它们 转换 成 一 个 字符 串 。 从 本 质 上 来 看 ， 这 个 方法 与 实例 方法 charcodeat () 
执行 的 是 相反 的 操作 。 来 看 一 个 例子 : 


 ) alert (String.fromCharCode(104, 101, 108, 108, 111)); //"hello" 
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在 这 里 ， 我 们 给 fromCharcode () 传递 的 是 字符 串 "hello" 中 每 个 字母 的 字符 编码 。 

9. HTML 方法 

早期 的 Web 浏览 器 提供 商 觉察 到 了 使 用 JavaScript 动态 格式 化 HTML 的 需求 。 于 是 , 这 些 提供 商 就 
扩展 了 标准 ， 实 现 了 一 些 专门 用 于 简化 常见 HTML 格式 化 任务 的 方法 。 下 表 列 出 了 这 些 HTML 方法 。 
不 过 ， 需 要 请 读者 注意 的 是 ， 应 该 尽量 不 使 用 这 些 方法 ， 因 为 它们 创建 的 标记 通常 无 法 表达 语义 。 

















方法 输出 结果 
anchor (name) <a name= "name">string</a> 
big() <big>string</big> 
bold() <b>string</b> 
fixed() <tt>string</tt> 
fontcolor (color) <font color="color">string</font> 
fontsize(size) <font size="size">string</font> 
italics() <i>string</i> 
link (url) <a href="url">string</a> 
small () <small>string</small> 
strike() <strike>string</strike> 
sub() <sub>string</sub> 
Sup () <sup>string</sup> 


5.7 单 体内 置 对 象 


ECMA-262 对 内 置 对 象 的 定义 是 :“ 由 ECMAScript 实现 提供 的 、 不 依赖 于 宿主 环境 的 对 象 , 这 些 对 
象 在 ECMAScript 程序 执行 之 前 就 已 经 存在 了 。” 意 思 就 是 说 , 开发 人 员 不 必 显 式 地 实例 化 内 置 对 象 ， 
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为 它们 已 经 实例 化 了 。 前 面 我 们 已 经 介绍 了 大 多 数 内 置 对 象 ， 例 如 object、Array 和 string。 
ECMA-262 还 定义 了 两 个 单 体内 置 对 象 : Global 和 Math。 

















5.7.1 Global 对 象 


Global (全 局 ) 对 象 可 以 说 是 ECMAScript 中 最 特别 的 一 个 对 象 了 ， 因 为 不 管 你 从 什么 角度 上 看 ， 
这 个 对 象 都 是 不 存在 的 。ECMAScript 中 的 Global 对 和 象 在 某 种 意义 上 是 作为 一 个 终极 的 “ 包 底 儿 对 象 ” 
来 定义 的 。 换 句 话 说 ,不 属于 任何 其 他 对 象 的 属性 和 方法 ,最 终 都 是 它 的 属性 和 方法 。 事 实 上 , 没有 全 
局 变量 或 全 局 函数 ; 所 有 在 全 局 作用 域 中 定义 的 属性 和 函数 ， 都 是 Global 对 象 的 属性 。 本 书 前 面 介 绍 
过 的 那些 函数 ,诸如 isNaN() 、isFinite() .parseInt() 以 及 parseFloat() ,实际 上 全 都 是 Global 
对 象 的 方法 。 除 此 之 外 ，Global 对 象 还 包含 其 他 一 些 方法 。 

1. URI 编码 方法 

Global 对 象 的 encodeURI() 和 encodeURIComponent() 方 法 可 以 对 URI (Uniform Resource 
Identifiers， 通 用 资源 标识 符 ) 进行 编码 ， 以 便 发 送 给 浏览 器 。 有 效 的 URI 中 不 能 包含 某 些 字符 ， 例 如 
空格 。 而 这 两 个 URI 编码 方法 就 可 以 对 URI 进行 编码 ,它们 用 特殊 的 UTF-8 编码 替换 所 有 无 效 的 字符 ， 
从 而 让 浏览 器 能 够 接受 和 理解 。 
其 中 , encodeURI () 主 要 用 于 整个 URI( 例如 ,http:/www.wrox.cormyillegal value.htm ), 而 encode- 
URIComponent () 主要 用 于 对 URI 中 的 某 一 段 (例如 前 面 URI 中 的 illegal value.htm) 进行 编码 。 
它们 的 主要 区 别 在 于 ，encodeURI () 不 会 对 本 身 属于 URI 的 特殊 字符 进行 编码 ， 例 如 冒号 、 正 斜 杠 、 
问号 和 并 字号 ; 而 encodeURIComponent () 则 会 对 它 发 现 的 任何 非 标准 字符 进行 编码 。 来 看 下 面 的 例子 。 


Var uri = "http://www.wrox.com/illegal value.htm#start"; 



















































































//"http://ww.wrox.com/illegal%20value.htm#start" 
alert (encodeURI (uri)); 


//"http%$3A%S2F%$2Fwww .wrox.com%2Fillegal%20value.htm%23start" 
alert (encodeURIComponent (uri)); 
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使 用 encogdeURI () 编码 后 的 结果 是 除了 空格 之 外 的 其 他 字符 都 原封 不 动 ， 只 有 空格 被 替换 成 了 
%20。 而 encodeURIComponent () 方 法 则 会 使 用 对 应 的 编码 替换 所 有 非 字母 数字 字符 。 这 也 正 是 可 以 
对 整个 URI 使 用 encodeURI () ,而 只 能 对 附加 在 现 有 URI 后 面 的 字符 串 使 用 encodeURIComponent () 
的 原因 所 在 。 







































一 般 来 说 ， 我 们 使 用 encodeURIComponent() 方 法 的 时 候 要 比 使 用 
encodeURI () 更 多 ， 因 为 在 实践 中 更 常见 的 是 对 查询 字符 串 参 数 而 不 是 对 基础 URI 
进行 编码 。 


与 encodeURI() 和 encodeURIComponent() 方 法 对 应 的 两 个 方法 分 别 是 dqecodeURI() 和 
decodeURIComponent () 。 其 中 , decodeURI () 只 能 对 使 用 encodqeURI() 替换 的 字符 进行 解码 。 例 如 ， 
它 可 将 $20 替换 成 一 个 空格 ， 但 不 会 对 %23 作 任 何 处 理 ， 因 为 s23 表示 井 字 号 (# )， 而 井 字号 不 是 使 用 
encodqeURI() 替换 的 。 同 样 地 , decodeURIComponent () 能 够 解码 使 用 encodeURIComponent () 编码 
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的 所 有 字符 ， 即 它 可 以 解码 任何 特殊 字符 的 编码 。 来 看 下 面 的 例子 : 
Var uri = "http%3A%S2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"; 


//http%$3A%S2F%2Fwww .wrox.com%2Fillegal value.htm%23start 
alert (decodeURI (uri)); 


//http://ww.wrox.com/illegal value.htm#start 


alert (decodeURIComponent (uri)); 


GlobalObjectURIDecodingExample01.htm 


这 里 , 变量 uri 包含 着 一 个 由 encodeURIComponent () 编码 的 字符 串 。 在 第 一 次 调用 decodeURI () 
输出 的 结果 中 ， 只 有 %20 被 蔡 换 成 了 空格 。 而 在 第 二 次 调用 decodeURIComponent () 输 出 的 结果 中 ， 
所 有 特殊 字符 的 编码 都 被 蔡 换 成 了 原来 的 字符 , 得 到 了 一 个 未 经 转 义 的 字符 串 ( 但 这 个 字符 串 并 不 是 一 
个 有 效 的 URI )。 


















































URI 方 法 encodeURI()、encodeURIComponent ()、decodeURI() 和 decode- 
URIComponent () 用 于 替代 已 经 被 ECMA-262 第 3 版 废弃 的 escape() 和 unescape() 
方法 。URI 方 法 能 够 编码 所 有 Unicode 字符 ,而 原来 的 方法 只 能 正确 地 编码 ASCII 字符 。 
因此 在 开发 实践 中 ,特别 是 在 产品 级 的 代码 中 ,一 定 要 使 用 URI 方法 ,不 要 使 用 escape() 
和 unescape() 方 法 。 








2. eval() 方 法 

现在 ,我 们 介绍 最 后 一 个 大 概 也 是 整个 ECMAScript 语 言 中 最 强大 的 一 个 方法 :eval () ,eval () 
方法 就 像 是 一 个 完整 的 ECMAScript 解析 器 , 它 只 接受 一 个 参数 , 即 要 执行 的 ECMAScript( 或 JavaScript ) 
字符 串 。 看 下 面 的 例子 : 

eval ("alert ('hi')"); 

这 行 代码 的 作用 等 价 于 下 面 这 行 代码 : 

alert ("hi"); 

当 解析 器 发 现代 码 中 调用 eval () 方 法 时 , 它 会 将 传 入 的 参数 当 作 实 际 的 ECMAScript 语句 来 解析 ， 
然后 把 执行 结果 插入 到 原 位 置 。 通 过 eval () 执行 的 代码 被 认为 是 包含 该 次 调用 的 执行 环境 的 一 部 分 ， 
因此 被 执行 的 代码 具有 与 该 执行 环境 相同 的 作用 域 链 。 这 意味 着 通过 eval () 执行 的 代码 可 以 引用 在 包 
含 环 境 中 定义 的 变量 ， 举 个 例子 : 


Var msg = "hello world"; 
eval ("alert (msg)"); //"hello world" 


可 见 , 变量 msg 是 在 eval () 调用 的 环境 之 外 定义 的 , 但 其 中 调用 的 alert () 仍 然 能 够 显示 "hello 
world"。 这 是 因为 上 面 第 二 行 代码 最 终 被 蔡 换 成 了 一 行 真正 的 代码 。 同 样 地 ， 我 们 也 可 以 在 eval () 
调用 中 定义 一 个 函数 ， 然 后 再 在 该 调用 的 外 部 代码 中 引用 这 个 函数 : 


eval ("function sayHi() { alert('hi'); }"); 
sayHi (); 


显然 ， 函 数 sayHi () 是 在 eval () 内 部 定义 的 。 但 由 于 对 eval () 的 调用 最 终 会 被 替换 成 定义 函数 
的 实际 代码 ， 因 此 可 以 在 下 一 行 调用 sayHi () 。 对 于 变量 也 一 样 : 
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eval("var msg = 'hello world'; "); 
alert (msg); //"hello world" 


在 eval () 中 创建 的 任何 变量 或 函数 都 不 会 被 提升 ， 因 为 在 解析 代码 的 时 候 ， 它 们 被 包含 在 一 个 字 
符 串 中 ; 它们 只 在 eval () 执行 的 时 候 创建 。 
严格 模式 下 , 在 外 部 访问 不 到 eval () 中 创建 














ba 


4 任何 变量 或 函数 , 因此 前 面 两 个 例子 都 会 导致 错误 。 























同样 ， 在 严格 模式 下 ， 为 eval 赋值 也 会 导致 错误 : 
"use strict"; 
eval = "hi"; //causes error 










能 够 解释 代码 字符 串 的 能 力 非 常 强大 ， 但 也 非常 危险 。 因 此 在 使 用 eval () 时 必 
须 极 为 谨慎 ,特别 是 在 用 它 执行 用 户 输 入 数据 的 情况 下 。 否 则 ,可 能 会 有 恶意 用 户 输 
入 威胁 你 的 站 点 或 应 用 程序 安全 的 代码 ( 即 所 谓 的 代码 注入 ) 。 


3. Global 对 象 的 属性 

Global 对 象 还 包含 一 些 属性 ， 其 中 一 部 分 属性 已 经 在 本 书 前 面 介绍 过 了 。 例 如 ， 特 殊 的 值 
undefined、NaN 以 及 Infinity 都 是 Global 对 象 的 属性 。 此 外 ,所 有 原生 引用 类 型 的 构造 函数 ， 像 
object 和 Function， 也 都 是 Global 对 象 的 属性 。 下 表 列 出 了 Global 对 象 的 所 有 属性 。 




































































属 性 说 明 属 性 说 明 
unqefined 特殊 值 undefined Date 构造 函数 Date 

NaN 特殊 值 NaN RegExp 构造 函数 RegExp 
Infinity 特殊 值 Infinity Error 构造 函数 Error 

Object 构造 函数 object EvalError 构造 函数 EvalError 
Array 构造 函数 Array RangeError 构造 函数 RangeError 
Function 构造 函数 Function ReferenceError 构造 函数 ReferenceError 
Boolean 构造 函数 Boolean SyntaxError 构造 阴 数 SyntaxError 
String 构造 国 数 String TypeError 构造 函数 TypeError 
Number 构造 函数 Number URIErroOr 构造 函数 URIError 
































ECMAScript 5 明确 禁止 给 ungdefined、NaN 和 Infinity 赋值 ， 这 样 做 即使 在 非 严 格 模式 下 也 会 
导致 错误 。 

4. window 对 象 

ECMAScript 虽然 没有 指出 如 何 直接 访问 Global 对 象 , 但 Web 浏览 器 都 是 将 这 个 全 局 对 象 作为 
window 对 象 的 一 部 分 加 以 实现 的 。 因此, 在 全 局 作用 域 中 声明 的 所 有 变量 和 函数 ,就 都 成 为 了 window 
对 象 的 属性 。 来 看 下 面 的 例子 。 


Var color = "red"; 



































function sayColor(){ 
alert (window.color); 


} 


window.sayColor(); //"red" 


GlobalObjectWindowExample01.htm 
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这 里 定义 了 一 个 名 为 color 的 全 局 变量 和 一 个 名 为 saycolor () 的 全 局 函数 ,在 saycolor () 内部， 
我 们 通过 window .color 来 访问 color 变量 ， 以 说 明 全 局 变量 是 window 对 象 的 属性 。 然 后 ， 又 使 用 
window.sayColor () 来 直接 通过 window 对 象 调用 这 个 函数 ， 结 果 显 示 在 了 警告 框 中 。 











JavaScript 中 的 window 对象 除了 扮演 ECMAScript 规 定 的 Global 对 象 的 角色 外 ， 


还 承担 了 很 多 别 的 任务 。 第 8 章 在 讨论 浏览 器 对 象 模型 时 将 详细 介绍 window 对 象 。 





男 一 种 取得 Global 对 象 的 方法 是 使 用 以 下 代码 : 


var global = function(){ 
return this; 


} () ; 

以 上 代码 创建 了 一 个 立即 调用 的 函数 表达 式 ， 返 回 this 的 值 。 如 前 所 述 ， 在 没有 给 函数 明确 指定 
this 值 的 情况 下 (无论 是 通过 将 函数 添加 为 对 象 的 方法 ， 还 是 通过 调用 call() 或 apply() )，this 
值 等 于 Global 对 象 。 而 像 这 样 通过 简单 地 返回 this 来 取得 Global 对象， 在 任何 执行 环境 下 都 是 可 
行 的 。 第 7 章 将 深入 讨论 函数 表达 式 。 


























5.7.2 Math 对 象 


ECMAScript 还 为 保存 数学 公式 和 信息 提供 了 一 个 公共 位 置 ， 即 Math 对 和 象 。 与 我 们 在 JavaScript 直 
接 编写 的 计算 功能 相 比 , Math 对 象 提供 的 计算 功能 执行 起 来 要 快 得 多 。Math 对 象 中 还 提供 了 辅助 完成 
这 些 计算 的 属性 和 方法 。 

1. Math 对 象 的 属性 

Math 对 象 包含 的 属性 大 都 是 数学 计算 中 可 能 会 用 到 的 一 些 特殊 值 。 下 表 列 出 了 这 些 属 性 。 





























































































































属 性 说 明 
Math.E 自然 对 数 的 底数 ， 即 常量 e 的 值 
Math.LN10 10 的 自然 对 数 
Math.LN2 2 的 自然 对 数 
Math .LOG2E 以 2 为 底 e 的 对 数 
Math. LOG1OE 以 10 为 底 e 的 对 数 
Math. PI 的 值 
Math .SQRT1_2 1/2 的 平方 根 ( 即 2 的 平方 根 的 倒数 ) 
Math .SQRT2 2 的 平方 根 














虽然 讨论 这 些 值 的 含义 和 用 途 超 出 了 本 书 范围 ， 但 你 确实 可 以 随时 使 用 它们 。 

2. min() 和 max() 方 法 

Math 对 象 还 包含 许多 方法 ， 用 于 辅助 完成 简单 和 复杂 的 数学 计算 。 

其 中 , min() 和 max() 方 法 用 于 确定 一 组 数值 中 的 最 小 值 和 最 大 值 。 这 两 个 方法 都 可 以 接收 任意 多 
个 数值 参数 ， 如 下 面 的 例子 所 示 。 
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var max = Math.max(3, 54, 32, 16); 
alert (max); //54 


var min = Math.min(3, 54, 32, 16); 
alert (min); //3 


MathObjectMinMaxExample01.htm 


对 于 3、54、32 和 16，Math.max() 返 回 54, 而 Math.min() 返 回 3。 这 两 个 方法 经 常用 于 避免 多 
余 的 循环 和 在 if 语句 中 确定 一 组 数 的 最 大 值 。 
要 找到 数组 中 的 最 大 或 最 小 值 ， 可 以 像 下面 这 样 使 用 apply () 方 法 。 


var values = [1, 2, 3, 4, 5, 6, 7, 8]; 
var max = Math.max.apply (Math, values); 


这 个 技巧 的 关键 是 把 Math 对 象 作为 apply () 的 第 一 个 参数 ， 从 而 正确 地 设置 this 值 。 然 后， 可 
以 将 任何 数组 作为 第 二 个 参数 。 

3. 舍 入 方法 

下 面 来 介绍 将 小 数值 舍 入 为 整数 的 几 个 方法 : Math.ceil()、Math.floor() 和 Math.round()。 
这 三 个 方法 分 别 遵 循 下 列 舍 入 规则 : 
口 Math.ceil () 执 行 向 上 舍 入 ， 即 它 总 是 将 数值 向 上 舍 入 为 最 接近 的 整数 ; 






































口 Math .floor () 执 行 向 下 舍 人 ， 即 它 总 是 将 数值 向 下 舍 入 为 最 接近 的 整数 ; 

口 Math .round() 执 行 标准 舍 人 , 即 它 总 是 将 数值 四 售 五 人 为 最 接近 的 整数 ( 这 也 是 我 们 在 数学 课 
上 学 到 的 舍 入 规则 )。 

下 面 是 使 用 这 些 方 法 的 示例 : 

alert (Math.ceil(25.9)); //26 

alert (Math.ceil(25.5)); //26 

alert (Math.ceil (25.1)); //26 

alert (Math.round (25.9)); /7/26 

alert (Math.round (25.5)); /7/26 

alert (Math.round(25.1)); L725 

alert (Math.floor(25.9)); /725 

alert (Math.floor(25.5)); /2 

lert' (Meath floor(25.1))s /25 











MathObjectRoundingExample01.htm 


对 于 所 有 介 于 25 和 26 (不 包括 26 ) 之 间 的 数值 ，Math .ceil () 始终 返 回 26， 因 为 它 执行 的 是 向 
上 伟人 。Math.zounad () 方 法 只 在 数值 大 于 等 于 25.5 时 返回 26; 否则 返回 25。 最 后 ,，Math .floor () 
对 所 有 介 于 25 和 26 (不 包括 26 ) 之 间 的 数值 都 返回 25。 

4. random() 方 法 

Math.random() 方 法 返回 大 于 等 于 0 小 于 1 的 一 个 随机 数 。 对 于 某 些 站 点 来 说 , 这 个 方法 非常 实用 ， 
因为 可 以 利用 它 来 随机 显示 一 些 名 人 名 言 和 新 闻 事 件 。 套 用 下 面 的 公式 ， 就 可 以 利用 Math.random () 
从 某 个 整数 范围 内 随机 选择 一 个 值 。 


值 = Math.floor(Math.random() * 可 能 值 的 总 数 + 第 一 个 可 能 的 值 ) 
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公式 中 用 到 了 Math.floor () 方 法 ， 这 是 因为 Math.random() 总 返回 一 个 小 数值 。 而 用 这 个 小 数 
值 乘 以 一 个 整数 ， 然 后 再 加 上 一 个 整数 ， 最 终结 果 仍 然 还 是 一 个 小 数 。 举 例 来 说 ， 如 果 你 想 选 择 一 个 1 
到 10 之 间 的 数值 ， 可 以 像 下 面 这 样 编写 代码 ; 


var num = Math.floor(Math.random() * 10 + 1); 











MathObjectRandomExample01.htm 


总 共有 10 个 可 能 的 值 (1 到 10 ), 而 第 一 个 可 能 的 值 是 1。 而 如 果 想 要 选择 一 个 介 于 2 到 10 之 间 的 
就 应 该 将 上 面 的 代码 改 成 这 样 : 


var num = Math.floor(Math.random() * 9 + 2); 








证 
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从 2 数 到 10 要 数 9 个 数 ， 因 此 可 能 值 的 总 数 就 是 9， 而 第 一 个 可 能 的 值 就 是 2。 多 数 情 况 下 ， 其 实 
都 可 以 通过 一 个 函数 来 计算 可 能 值 的 总 数 和 第 一 个 可 能 的 值 ， 例 如 : 


function selectFrom(lowerValue, upperValue) { 
Var choices = upperValue - lowerValue + 1; 
return Math.floor(Math.random() * choices + lowerValue); 





} 


Var num = selectFrom(2, 10); 
alert (num); // 介 于 2 和 410 之 间 (包括 2 和 10) 的 一 个 数值 


MathObjectRandomExample03.htm 


函数 selectFrom () 接 受 两 个 参数 : 应 该 返回 的 最 小 值 和 最 大 值 。 而 用 最 大 值 减 最 小 值 再 加 1 得 到 
了 可 能 值 的 总 数 ， 然 后 它 又 把 这 些 数值 套用 到 了 前 面 的 公式 中 。 这 样 ， 通 过 调用 selectFrom(2,10) 
就 可 以 得 到 一 个 介 于 2 和 10 之 间 (包括 2 和 10) 的 数值 了 。 利 用 这 个 函数 ， 可 以 方便 地 从 数组 中 随机 
取出 一 项 ， 例 如 : 


var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; 
Var color = colors[selectFrom(0, colors.length-1)]; 
alert (color); // 可 能 是 数组 中 包含 的 任何 一 个 字符 串 














MathObjectRandomExample03.htm 


在 这 个 例子 中 ,传递 给 selectFrom() 的 第 二 个 参数 是 数组 的 长 度 减 1， 也 就 是 数组 中 最 后 一 项 的 位 置 。 

5. 其 他 方法 

Math 对 象 中 还 包含 其 他 一 些 与 完成 各 种 简单 或 复杂 计算 有 关 的 方法 ， 但 详细 讨论 其 中 每 一 个 方法 
的 细节 及 适用 情形 超出 了 本 书 的 范围 。 下 面 我 们 就 给 出 一 个 表格 ， 其 中 列 出 了 这 些 没有 介绍 到 的 Math 
对 象 的 方法 。 

































































方 法 说 明 方 。 法 说 明 
Math.abs (num) 返回 pum 的 绝对 值 Math.asin (x) 返回 x 的 反正 弦 值 
Math .exp (num) 返回 Math.E 的 num 次 短 Math.atan (x) 返回 x 的 反正 切 值 
Math. log (num) 返回 num 的 自然 对 数 Math.atan2 (y, x) 返回 y/x 的 反正 切 值 
Math .pow (num, power) 返回 aum 的 power 次 震 Math. cos (x) 返回 x 的 余弦 值 
Math. sqrt (num) 返回 num 的 平方 根 Math.sin (x) 返回 x 的 正弦 值 
Math .acos (x) 返回 x 的 反 余弦 值 Math. tan (x) 返回 x 的 正切 值 
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虽然 ECMA-262 规定 了 这 些 方法 , 但 不 同 实现 可 能 会 对 这 些 方法 采用 不 同 的 算法 。 毕 竞 , 计算 某 个 
值 的 正弦 、 余 弦 和 正切 的 方式 多 种 多 样 。 也 正 因为 如 此 , 这 些 方法 在 不 同 的 实现 中 可 能 会 有 不 同 的 精度 。 





5.8 小 结 


对 象 在 JavaScript 中 被 称 为 引用 类 型 的 值 ， 而 且 有 一 些 内 置 的 引用 类 型 可 以 用 来 创建 特定 的 对 象 ， 

现 简要 总 结 如 下 : 

口 引用 类 型 与 传统 面向 对 象 程序 设计 中 的 类 相似 ， 但 实现 不 同 ; 

口 object 是 一 个 基础 类 型 ， 其 他 所 有 类 型 都 从 object 继承 了 基本 的 行为 ; 

口 Array 类 型 是 一 组 值 的 有 序列 表 ， 同 时 还 提供 了 操作 和 转换 这 些 值 的 功能 

口 Date 类 型 提供 了 有 关 日 期 和 时 间 的 信息 ， 包 括 当前 日 期 和 时 间 以 及 相关 的 计算 功能 

口 RegExp 类 型 是 ECMAScript 支持 正则 表达 式 的 一 个 接口 ， 提 供 了 最 基本 的 和 一 些 高 级 的 正则 表 
达 式 功能 。 

函数 实际 上 是 Function 类 型 的 实例 ， 因 此 函数 也 是 对 象 ; 而 这 一 点 正 是 JavaScript 最 有 特色 的 地 
方 。 由 于 函 数 是 对 象 ， 所 以 函数 也 拥有 方法 ， 可 以 用 来 增强 其 行为 。 

因为 有 了 基本 包装 类 型 ， 所 以 JavaScript 中 的 基本 类 型 值 可 以 被 当 作 对 象 来 访问 。 三 种 基本 包装 类 
型 分 别 是 : Boolean、Number 和 string。 以 下 是 它们 共同 的 特征 : 

口 每 个 包装 类 型 者 映射 到 同名 的 基本 类 型 ， 

口 在 读 取 模式 下 访问 基本 类 型 值 时 ， 就 会 创建 对 应 的 基本 包装 类 型 的 一 个 对 象 ， 从 而 方便 了 数据 
操作 ; 

口 操作 基本 类 型 值 的 语句 一 经 执行 完毕 ， 就 会 立即 销毁 新 创建 的 包装 对 象 。 

在 所 有 代码 执行 之 前 ,作用 域 中 就 已 经 存在 两 个 内 置 对 象 ， Global 和 Math。 在 大 多 数 ECMAScript 
实现 中 都 不 能 直接 访问 Global 对 象 ; 不 过 ，Web 浏览 器 实现 了 承担 该 角色 的 window 对 象 。 全 局 变 
量 和 函数 都 是 Global 对 象 的 属性 。Math 对 象 提 供 了 很 多 属性 和 方法 , 用 于 辅助 完成 复杂 的 数学 计算 
任务 。 

















































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


SO 


第 人 
面向 对 象 的 程序 设计 


本 章 内 容 

口 理解 对 象 属性 
口 理解 并 创建 对 象 
口 理解 继承 



































向 对 象 ( Object-Oriented，0O0O ) 的 语言 有 一 个 标志 ， 那 就 是 它们 都 有 类 的 概念 ， 而 通过 类 可 
以 创建 任意 多 个 具有 相同 属性 和 方法 的 对 象 。 前 面 提 到 过 ，ECMAScript 中 没有 类 的 概念 ， 因 
此 它 的 对 象 也 与 基于 类 的 语言 中 的 对 象 有 所 不 同 。 
ECMA-262 把 对 象 定义 为 :“ 无 序 属性 的 集合 , 其 属性 可 以 包含 基本 值 、 对 象 或 者 函数 。” 严 格 来 讲 ， 
这 就 相当 于 说 对 象 是 一 组 没有 特定 顺序 的 值 。 对象 的 每 个 属性 或 方法 都 有 一 个 名 字 ， 而 每 个 名 字 都 映射 
到 一 个 值 。 正 因为 这 样 ( 以 及 其 他 将 要 讨论 的 原因 ), 我 们 可 以 把 ECMAScript 的 对 象 想象 成 散 列表 : 无 
非 就 是 一 组 名 值 对 ， 其 中 值 可 以 是 数据 或 函数 。 
每 个 对 象 都 是 基于 一 个 引用 类 型 创建 的 ， 这 个 引用 类 型 可 以 是 第 5 章 讨 论 的 原生 类 型 , 也 可 以 是 开 
发 人 员 定 义 的 类 型 。 


6.1 理解 对 象 


上 一 章 曾经 介绍 过 , 创建 自 定义 对 象 的 最 简单 方式 就 是 创建 一 个 object 的 实例 , 然后 再 为 它 添加 
属性 和 方法 ， 如 下 所 示 。 


Var person = new Object() ; 










































































person.name = "Nicholas" 
person.age = 29; 
person.job = "Software Engineer"; 





person.sayName = function()t{ 
alert (this.name); 


5 
CreatingObjectsExample01.htm 
上 面 的 例子 创建 了 一 个 名 为 person 的 对 象 , 并 为 它 添加 了 三 个 属性 (name、age 和 job ) 和 一 个 
方法 ( sayName () )。 其 中 ，sayName () 方 法 用 于 显示 this .name (将 被 解析 为 person.name ) 的 值 。 
早期 的 JavaScript 开发 人 员 经 常 使 用 这 个 模式 创建 新 对 象 。 几 年 后 , 对 象 字 面 量 成 为 创建 这 种 对 象 的 首选 
模式 。 前 面 的 例子 用 对 象 字面 量 语法 可 以 写成 这 样 : 
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Var person = { 
name: "Nicholas", 
age: 29， 





job: "Software Engineer", 


sayName: function()f{ 
alert (this.name); 


} 


}; 
这 个 例子 中 的 person 对 象 与 前 面 例子 中 的 person 对 象 是 一 样 的 ， 都 有 相同 的 属性 和 方法 。 这 些 
属性 在 创建 时 都 带 有 一 些 特征 值 ( characteristic )，JavaScript 通过 这 些 特征 值 来 定义 它们 的 行为 。 


6.1.1 属性 类 型 


ECMA-262 第 5 版 在 定义 只 有 内 部 才 用 的 特性 ( attribute ) 时 ,描述 了 属性 ( property ) 的 各 种 特征 。 
ECMA-262 定义 这 些 特性 是 为 了 实现 JavaScript 引擎 用 的 , 因此 在 JavaScript 中 不 能 直接 访问 它们 。 为 了 
表示 特性 是 内 部 值 ， 该 规范 把 它们 放 在 了 两 对 儿 方 括号 中 ,例如 [ [Enumerable] ] 。 尽 管 ECMA-262 
第 3 版 的 定义 有 些 不 同 , 但 本 书 只 参考 第 5 版 的 描述 。 

ECMAScript 中 有 两 种 属性 : 数据 属性 和 访问 器 属性 。 

1. 数据 属性 

数据 属性 包含 一 个 数据 值 的 位 置 。 在 这 个 位 置 可 以 读 取 和 写 入 值 。 数据 属性 有 4 个 描述 其 行为 的 
特性 。 

口 [[Configurable]]: 表示 能 否 通过 delete 删除 属性 从 而 重新 定义 属性 ， 能 否 修 改 属性 的 特 
性 ， 或 者 能 否 把 属性 修改 为 访问 器 属性 。 像 前 面 例子 中 那样 直接 在 对 象 上 定义 的 属性 ， 它 们 的 

这 个 特性 默认 值 为 true。 
口 [ [Enumerable]]: 表示 能 否 通 过 for-in 循环 返回 属性 。 像 前 面 例子 中 那样 直接 在 对 象 上 定 
义 的 属性 ， 它 们 的 这 个 特性 默认 值 为 true。 
口 [ [writable]]: 表示 能 和 否 修改 属性 的 值 。 像 前 面 例子 中 那样 直接 在 对 象 上 定义 的 属性 , 它们 的 
这 个 特性 默认 值 为 true。 
口 [ [Value]]: 包含 这 个 属性 的 数据 值 。 读 取 属 性 值 的 时 候 ， 从 这 个 位 置 读 ; 写 和 人 属性 值 的 时 候 ， 
把 新 值 保存 在 这 个 位 置 。 这 个 特性 的 默认 值 为 undefined。 

对 于 像 前 面 例子 中 那样 直接 在 对 象 上 定义 的 属性 , 它们 的 [[configurable]]、[ [Enumerable]] 
和 [ [writable] 1 特性 都 被 设置 为 true， 而 [ [Value]] 特 性 被 设置 为 指定 的 值 。 例 如 : 


var person = { 
name: "Nicholas" 
















































































































































































}; 

这 里 创建 了 一 个 名 为 name 的 属性 ， 为 它 指定 的 值 是 "Nicholas"。 也 就 是 说 ，[ [Value] ] 特性 将 
被 设置 为 "Nicholas"， 而 对 这 个 值 的 任何 修改 都 将 反映 在 这 个 位 置 。 

要 修改 属性 默认 的 特性 ， 必 须 使 用 ECMAScript5 的 object .defineProperty () 方 法 。 这 个 方法 
接收 三 个 参数 : 属性 所 在 的 对 象 、 属 性 的 名 字 和 一 个 描述 符 对 象 。 其 中 ， 描 述 符 ( descriptor ) 对 象 的 属 
性 必须 是 : configurable、enumerable、writable 和 value。 设置 其 中 的 一 或 多 个 值 ， 可 以 修改 
对 应 的 特性 值 。 例 如 : 
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Var person 人 于 

Object .defineProperty (person, 
writable: false, 
value: "Nicholas" 


人 


I 


alert (person.name); 
person.name "Greg"; 
alert (person.name); 


这 个 例子 创建 了 一 个 名 为 name 的 属 怕 

















"name", 


//"Nicholas" 


//"Nicholas" 


DataPropertiesExample01.htm 


属性 的 值 是 不 可 修改 











E， 它 的 值 "Nicholas" 是 只 读 的 。 这 个 





的 ， 如 果 尝 试 为 它 指定 新 值 ， 则 在 非 严 格 模 式 下 ,赋值 操作 将 被 忽略 ; 在 严格 模式 下， 赋值 操作 将 会 导 


致 抛 出 错误 。 
类 似 的 规则 也 适用 于 不 可 配置 的 





属性 。 例 如 : 





让 


Var person 4 
Object.defineProperty (person, 
configurable: false, 

value: "Nicholas" 


}7 
alert (person.name); 


delete person.name; 
alert (person.name); 


把 configurable 设置 为 false 


"name", 


{ 


//"Nicholas" 


//"Nicholas" 


DataPropertiesExample02.htm 


， 表 示 不 能 从 对 象 中 删除 属性 。 如 果 对 这 个 属性 调用 aelete, 则 











在 非 严 格 模式 下 什么 也 不 会 发 生 ， 而 在 严格 模式 下 会 导致 错误 。 而 且 , 一 旦 














就 不 能 再 把 它 变 
的 特性 ， 都 会 导致 错误 : 
var person = {}; 

量 ) Object.defineProperty (person, 
configurable: false, 
value: "Nicholas" 

J 
// 抛 出 错误 


Object.defineProperty (person, 
configurable: true, 
value: "Nicholas" 


} 


也 就 是 说 ,可 以 多 次 调用 object .defineProperty () 方 法 修改 同一 个 


特性 设置 为 false 之 后 就 会 有 限制 了 。 





把 属性 定义 为 不 可 配置 的 ， 








回 可 配置 了 。 此 时 ， 再 调用 object .defineProperty () 方 法 修改 除 writable 之 外 


"name", 


{ 


"name", 


{ 


DataPropertiesExample03.htm 











rl 


,但 在 把 configurable 


在 调用 object .defineProperty() 方 法 时 ， 如 果 不 指 定 ，configurable 、enumerable 和 


writaple 特性 的 默认 值 都 是 false。 


方法 提供 的 这 些 高 级 功能 。 不 过 ， 理 解 这 些 概 念 对 理 / 


图 灵 社 区 会 员 





多 数 情 况 下 , 可 能 都 没有 必要 利用 object .defineProperty () 
解 JavaScript 对 象 却 非常 有 用 。 
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瑟 乌 


IE8 是 第 一 个 实现 Object .aefineProperty() 方 法 的 浏览 器 版 本 。 然 而 ， 这 个 
版 本 的 实现 存在 诸多 限制 : 只 能 在 DOM 对 象 上 使 用 这 个 方法 ， 而 且 只 能 创建 访问 器 
属性 。 由 于 实现 不 彻底 ， 建 议 读者 不 要 在 IE8 中 使 用 Object.defineProperty () 
2 







2. 访问 器 属性 

访问 器 属性 不 包含 数据 值 ; 它们 包含 一 对 儿 getter 和 setter 函数 ( 不 过 , 这 两 个 函数 都 不 是 必需 的 )。 
在 读 取 访问 器 属性 时 ， 会 调用 getter 国 数 ， 这 个 函数 负责 返回 有 效 的 值 ; 在 写 和 访问 器 属性 时 ， 会 调用 
setter 函数 并 传人 新 值 ， 这 个 函数 负责 决定 如 何 处 理 数 据 。 访 问 器 属性 有 如 下 4 个 特性 。 
口 [[Configurable]]: 表示 能 否 通过 delete 删除 属性 从 而 重新 定义 属性 ， 能 否 修 改 属性 的 特 
性 ,或 者 能 否 把 属性 修改 为 数据 属性 。 对 于 直接 在 对 象 上 定义 的 属性 ， 这 个 特性 的 默认 值 为 

trueo 

口 [ [Enumerable]]: 表示 能 否 通 过 for-in 循环 返回 属性 。 对 于 直接 在 对 象 上 定义 的 属性 ， 这 
个 特性 的 默认 值 为 true。 
口 [[Get]]: 在 读 取 属性 时 调用 的 函数 。 默 认 值 为 undefineq。 
口 [[set]1]: 在 写 入 属性 时 调用 的 函数 。 默 认 值 为 undefined。 6 
访问 器 属性 不 能 直接 定义 ， 必 须 使 用 object .defineProperty () 来 定义 。 请 看 下 面 的 例子 。 
var book = { 


_year: 2004, 
edition: 1 




























































































}3 


Object.defineProperty (book, "year", { 
get: function()1{ 
return this. year; 
} 


set: function (newvalue) 1 


if (newValue > 2004) { 
this. year = newValue; 
this.edition += newValue - 2004; 


上 
book.year = 2005; 
alert (book.edition); //2 


AccessorPropertiesExample01.htm 


以 上 代码 创建 了 一 个 book 对 象 ， 并 给 它 定义 两 个 默认 的 属性 : _year 和 edition。_year 前 面 
的 下 划 线 是 一 种 常用 的 记号 ， 用 于 表示 只 能 通过 对 象 方法 访问 的 属性 。 而 访问 器 属性 year 则 包含 一 个 
getter 函数 和 一 个 setter 函数 。getter 函数 返回 _year 的 值 , setter 函数 通过 计算 来 确定 正确 的 版 本 。 因此， 
把 year 属性 修改 为 2005 会 导致 year 变 成 2005， 而 edition 变 为 2。 这 是 使 用 访问 器 属性 的 常见 方 
式 ， 即 设置 一 个 属性 的 值 会 导致 其 他 属性 发 生变 化 。 
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不 一 定 非 要 同时 指定 getter 和 setter。 只 指定 getter 意味 着 属性 是 不 能 写 ， 尝 试 写 人 属性 会 被 忽略 。 
在 严格 模式 下 ， 尝 试 写 人 只 指定 了 getter 困 数 的 属性 会 抛 出 错误 。 类 似 地 ， 只 指定 setter 函数 的 属性 也 
不 能 读 ， 否 则 在 非 严 格 模式 下 会 返回 undaefineda， 而 在 严格 模式 下 会 抛 出 错误 。 

支持 ECMAScript 5 的 这 个 方法 的 浏览 器 有 IE9+ (IE8 只 是 部 分 实现 )、Firefox 4+ 、Safari 5+、Opera 
12+ 和 Chrome 。 在 这 个 方法 之 前 ， 要 创建 访问 器 属性 ， 一 般 都 使 用 两 个 非 标 准 的 方法 : 
defineGetter () 和 defineSetter _()。 这 两 个 方法 最 初 是 由 Firefox 引入 的 ， 后 来 Safari 3、 
Chrome 1 和 Opera 9.5 也 给 出 了 相同 的 实现 。 使 用 这 两 个 遗留 的 方法 ,可 以 像 下 面 这 样 重 写 前 面 的 例子 。 

var book = { 


_year: 2004, 
edition: 1 















































下 


// 定 义 访问 器 的 旧 有 方法 

book. defineGetter ("year", function(){ 
return this. year; 

}); 


book. defineSetter ("year", function(newVvalue)t{ 
IE (newValue > 2004) { 
this. year = newValue; 
this.edition += newVvalue - 2004; 
} 
}); 


book.year = 2005; 
alert (book.edition); //2 


AccessorPropertiesExample02.htm 


在 不 支持 Object.defineProperty() 方 法 的 浏览 器 中 不 能 修改 [[configurablel] 和 


[[Enumerable]]。 
6.1.2 ”定义 多 个 属性 

由 于 为 对 象 定 义 多 个 属性 的 可 能 性 很 大 ，ECMAScript 5 又 定义 了 一 个 object.definePro- 
perties () 方 法 。 利 用 这 个 方法 可 以 通过 描述 符 一 次 定义 多 个 属性 。 这 个 方法 接收 两 个 对 象 参数 : 第 一 
个 对 象 是 要 添加 和 修改 其 属性 的 对 象 ， 第 二 个 对 象 的 属性 与 第 一 个 对 象 中 要 添加 或 修改 的 属性 一 一 对 
应 。 例如 : 


var book = {}; 




















Object.defineProperties (book, { 
_year: { 
value: 2004 


year: { 
get: function()t{ 
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return this. year; 
下 


set: function(newValue){ 
if (newValue > 2004) { 
this._ year = newValue; 
this.edition += newValue - 2004; 


MultiplePropertiesExample01.htm 


以 上 代码 在 book 对 象 上 定义 了 两 个 数据 属性 (_year 和 edition ) 和 一 个 访问 器 属性 ( year )。 
最 终 的 对 象 与 上 一 节 中 定义 的 对 象 相同 。 唯 一 的 区 别 是 这 里 的 属性 都 是 在 同一 时 间 创 建 的 。 

支持 Opject .defineProperties() 方 法 的 浏览 器 有 IE9+、Firefox 4+、Safari 5+、Opera 12+ 和 
Chrome。 


6.1.3 ” 读 取 属性 的 特性 


使 用 ECMAScript 5 的 object.getownPropertyDescriptor() 方 法 ,可 以 取得 给 定 属性 的 描述 
符 。 这 个 方法 接收 两 个 参数 : 属性 所 在 的 对 象 和 要 读 取 其 描述 符 的 属性 名 称 。 返 回 值 是 一 个 对 象 ， 如 果 
是 访问 器 属性 ， 这 个 对 象 的 属性 有 configurable、enumerable、get 和 set; 如 果 是 数据 属性 ， 这 
个 对 象 的 属性 有 configurable、enumerable、writable 和 value。 例 如 : 











| 

















本 











CY Var book = {}; 


Object .defineProperties (book, { 
_year: { 
value: 2004 


year: { 
get: function()t{ 
return this. year; 
} 


set: function(newValue){ 
if (newValue > 2004) { 
this._ year = newValue; 
this.edition += newValue - 2004; 


} 
})s 
var descriptor = Object .getOownPropertyDescriptor(book, " year"); 


alert (descriptor.value); //2004 
alert (descriptor.configurable); //false 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


144 第 6 章 面向 对 象 的 程序 设计 





alert (typeof descriptor.get); //"undefined" 


var descriptor = Object .getOwnPropertyDescriptor(book, "year"); 


alert (descriptor.value); //undefined 
alert (descriptor.enumerable); //false 
alert (typeof descriptor.get); //"function" 


GetPropertyDescriptorExample01.htm 


对 于 数据 属性 _year, value 等 于 最 初 的 值 ， configurable 是 false, 而 get 等 于 undefined。 
对 于 访问 器 属性 year，value 等 于 undefined，enumerable 是 false， 而 get 是 一 个 指向 getter 
函数 的 指针 。 

在 JavaScript 中 ,可 以 针对 任何 对 象 一 一 包括 DOM 和 BOM 对 象 ,使 用 object .getownProperty- 
Desczriptor() 方 法 。 支 持 这 个 方法 的 浏览 名 有 IE9+、Firefox 4+、Safari 5S+、Opera 12+ 和 Chrome。 


6.2 创建 对 象 


虽然 object 构造 函数 或 对 象 字 面 量 都 可 以 用 来 创建 单个 对 象 , 但 这 些 方 式 有 个 明显 的 缺点 : 使 用 同 
一 个 接口 创建 很 多 对 象 ， 会 产生 大 量 的 重复 代码 。 为 解决 这 个 问题 ， 人 们 开始 使 用 工厂 模式 的 一 种 变 体 。 


6.2.1 工厂 模式 


工厂 模式 是 软件 工程 领域 一 种 广为人知 的 设计 模式 ， 这 种 模式 抽象 了 创建 具体 对 象 的 过 程 (本 书后 
面 还 将 讨论 其 他 设计 模式 及 其 在 JavaScript 中 的 实现 )。 考 虑 到 在 ECMAScript 中 无 法 创建 类 ， 开 发 人 员 
就 发 明了 一 种 函数 ， 用 函数 来 封装 以 特定 接口 创建 对 象 的 细节 ， 如 下 面 的 例子 所 示 。 


function createPerson (name, age, job)t{ 
量 ) var o = new Object(); 
o.name = name; 
o.age = age; 
OzjoB E JOB; 
oOo.sayName = function(){ 
alert (this.name); 




































































} 
return o; 


} 


Var personl 
var person2 


createPerson("Nicholas", 29, "Software Engineer"); 
createPerson("Greg", 27, "Doctor"); 





FactoryPatternExample01.htm 


函数 createPerson () 能 够 根据 接受 的 参数 来 构建 一 个 包含 所 有 必要 信息 的 Person 对 象 。 可 以 无 
数 次 地 调用 这 个 函数 ， 而 每 次 它 都 会 返回 一 个 包含 三 个 属性 一 个 方法 的 对 象 。 工 厂 模 式 虽 然 解 决 了 创建 
多 个 相似 对 象 的 问题 ， 但 却 没 有 解决 对 象 识别 的 问题 ( 即 怎样 知道 一 个 对 象 的 类 型 )。 随 着 JavaScript 
的 发 展 ， 又 一 个 新 模式 出 现 了 。 


6.2.2 ”构造 函数 模式 
前 几 章 介绍 过 ，ECMAScript 中 的 构造 函数 可 用 来 创建 特定 类 型 的 对 象 。 像 object 和 Array 这 样 
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的 原生 构造 函数 ， 在 运行 时 会 自动 出 现在 执行 环境 中 。 此 外 ， 也 可 以 创建 自 定义 的 构造 函数 ， 从 而 定义 
自 定义 对 象 类 型 的 属性 和 方法 。 例 如 ， 可 以 使 用 构造 函数 模式 将 前 面 的 例子 重 写 如 下 。 


function Person(name, age, job)t{ 
CS this.name = name; 
this.age = age; 
this.JOob: = JoB:; 
this.sayName = function()t{ 
alert (this.name); 

















] 
} 





new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


Var personl 
Var person2 


ConstructorPatternExample01.htm 


在 这 个 例子 中 ，Person () 函数 取代 了 createPerson () 函数 。 我 们 注意 到 ，Person () 中 的 代码 
除了 与 createPerson() 中 相同 的 部 分 外 ， 还 存在 以 下 不 同 之 处 : 
口 没有 显 式 地 创建 对 象 ; 
口 直接 将 属性 和 方法 赋 给 了 this 对 象 ; 
口 return 语句 。 
此 外 ， 还 应 该 注意 到 函数 名 Person 使 用 的 是 大 写字 母 P。 按 照 惯例 ,构造 函 数 始终 都 应 该 以 一 个 
大 写字 母 开 而 非 构 造 函 数 则 应 该 以 一 个 小 写字 母 开 头 。 这 个 做 法 借鉴 自 其 他 OO 语言 ， 主 要 是 为 了 
区 别 于 ECMAScript 中 的 其 他 函数 ， 因 为 构造 函数 本 身 也 是 函数 ， 只 不 过 可 以 用 来 创建 对 象 而 已 。 

要 创建 Person 的 新 实例 ， 必 须 使 用 new 操作 符 。 以 这 种 方式 调用 构造 函数 实际 上 会 经 历 以 下 4 
个 步骤 : 

(1) 创建 一 个 新 对 象 ; 

(2) 将 构造 函数 的 作用 域 赋 给 新 对 象 (因此 this 就 指向 了 这 个 新 对 象 ); 

(3) 执行 构造 函数 中 的 代码 ( 为 这 个 新 对 象 添 加 属性 

(4) 返回 新 对 象 。 

在 前 面 例子 的 最 后 ， personl 和 person2 分 别 保 存 着 Person 的 一 个 不 同 的 实例 。 这 两 个 对 象 都 
有 一 个 constructor (构造 兄 数 ) 属性 ， 该 属性 指向 Person， 如 下 所 示 。 


alert (personl.constructor == Person); //true 
alert (person2.constructor == Person); //true 


对 和 象 的 constructor 属性 最 初 是 用 来 标识 对 象 类 型 的 。 但 是 , 提 到 检测 对 象 类 型 ,还 是 instan- 
ceof 操作 符 要 更 可 靠 一 些 。 我 们 在 这 个 例子 中 创建 的 所 有 对 象 既 是 object 的 实例 , 同时 也 是 Person 
的 实例 ， 这 一 点 通过 ijnstanceof 操作 符 可 以 得 到 验证 。 









































— 
































alert (personl1 instanceof Object); //true 
alert (personl instanceof Person); //true 
alert (person2 instanceof Object); //true 
alert (person2 instanceof Person); //true 


创建 自 定义 的 构造 函数 意味 着 将 来 可 以 将 它 的 实例 标识 为 一 种 特定 的 类 型 ; 而 这 正 是 构造 函数 模式 
胜 过 工厂 模式 的 地 方 。 在 这 个 例子 中 ，personl 和 person2 之 所 以 同时 是 object 的 实例 ， 是 因为 所 
有 对 象 均 继承 自 object (详细 内 容 稍 后 讨论 )。 
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以 这 种 方式 定义 的 构造 函数 是 定义 在 Global 对 象 ( 在 浏览 器 中 是 window 对 象 ) 


中 的 。 第 8 章 将 详细 讨论 浏览 器 对 象 模型 (BOM ) 。 





1. 将 构造 函数 当 作 函数 

构造 函数 与 其 他 函数 的 唯一 区 别 ， 就 在 于 调用 它们 的 方式 不 同 。 不 过 ,构造 函数 毕 竞 也 是 函数 ,不 
存在 定义 构造 函数 的 特殊 语法 。 任何 函 数 ， 只 要 通过 new 操作 符 来 调用 , 那 它 就 可 以 作为 构造 函数 ; 而 
任何 函数 ,如 果 不 通过 new 操作 符 来 调用 , 那 它 跟 普通 函数 也 不 会 有 什么 两 样 。 例 如 ,前 面 例子 中 定义 
的 Person() 函数 可 以 通过 下 列 任何 一 种 方式 来 调用 。 


// 当 作 构造 函数 使 用 





























Var person = new Person("Nicholas", 29, "Software Engineer"); 
person.sayName(); //"Nicholas" 

// 作为 普通 汐 数 调用 

Person("Greg"，27,，"Doctor"); // 添加 到 window 
window.sayName(); //"Greg" 


// 在 另 一 个 对 象 的 作用 域 中 调用 

Var Oo = new Object () : 

Person.calll(o, "Kristen", 25, "Nurse"); 
oOo.sayName (); //"Kristen" 


ConstructorPatternExample02.htm 


这 个 例子 中 的 前 两 行 代码 展示 了 构造 函数 的 典型 用 法 , 即使 用 new 操作 符 来 创建 一 个 新 对 象 。 接 下 
来 的 两 行 代码 展示 了 不 使 用 new 操 作 符 调用 Person () 会 出 现 什么 结果 :属性 和 方法 都 被 添加 给 window 
对 象 了 。 有 读者 可 能 还 记得 ， 当 在 全 局 作用 域 中 调用 一 个 函数 时 ,this 对 象 总 是 指向 Global 对 象 ( 在 
浏览 器 中 就 是 winaow 对 象 )。 因 此 ， 在 调用 完 函 数 之 后 ， 可 以 通过 window 对 象 来 调用 sayName () 方 
法 ,并 且 还 返回 了 "Greg"。 最 后 ， 也 可 以 使 用 call() (或 者 apply() ) 在 某 个 特殊 对 象 的 作用 域 中 
调用 Person () 困 数 .这 里 是 在 对 象 o 的 作用 域 中 调用 的 ,因此 调用 后 o 就 拥有 了 所 有 属性 和 sayName () 
方法 。 

2. 构造 函数 的 问题 

构造 函数 模式 虽然 好 用 , 但 也 并 非 没 有 缺 点 。 使 用 构造 函数 的 主要 问题 ,就 是 每 个 方法 都 要 在 每 个 
实例 上 重新 创建 一 遍 。 在 前 面 的 例子 中 , person1l 和 person2 都 有 一 个 名 为 sayName () 的 方法 , 但 那 
两 个 方法 不 是 同一 个 Function 的 实例 。 不 要 忘 了 一 一 ECMAScript 中 的 函数 是 对 象 ， 因 此 每 定义 一 个 
函数 ， 也 就 是 实例 化 了 一 个 对 象 。 从 逻辑 角度 讲 ， 此 时 的 构造 函数 也 可 以 这 样 定义 。 

function Person(name, age, job)t 

this.name = name; 

this.age = age; 

this.joB = job; 

this .sayName = new Function("alert(this.name)"); // 与 声明 函数 在 远 辑 上 是 等 价 的 


































































































} 

从 这 个 角度 上 来 看 构造 函数 ,更 容易 明白 每 个 Person 实例 都 包含 一 个 不 同 的 Function 实例 (以 
显示 name 属性 ) 的 本 质 。 说 明白 些 ， 以 这 种 方式 创建 函数 ,会 导致 不 同 的 作用 域 链 和 标识 符 解 析 ， 但 
创建 Function 新 实例 的 机 制 仍然 是 相同 的 。 因 此 , 不 同 实例 上 的 同名 函数 是 不 相等 的 ， 以 下 代码 可 以 
证 明 这 一 点 。 
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alert (personl.sayName == person2.sayName); //false 
然而 ,创建 两 个 完成 同样 任务 的 Function 实例 的 确 没有 必要 ; 况且 有 this 对 象 在 ， 根 本 不 用 在 
执行 代码 前 就 把 函数 绑 定 到 特定 对 象 上 面 。 因 此 ,大 可 像 下 面 这 样 ， 通 过 把 函数 定义 转移 到 构造 函数 外 
部 来 解决 这 个 问题 。 
量 ， function Person(name, age, job)t{ 
this.name = name; 
this.age = age; 


thigsjob = JOob; 
this.sayName = sayName; 











} 


function sayName(){ 
alert (this.name); 
} 





new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


Var personl 
Var person2 


ConstructorPatternExample03.htm 


在 这 个 例子 中 ,我 们 把 sayName () 函数 的 定义 转移 到 了 构造 函数 外 部 。 而 在 构造 函数 内 部 ， 我 们 6 
将 sayName 属性 设置 成 等 于 全 局 的 sayName 函数 。 这 样 一 来 ， 由 于 sayName 包含 的 是 一 个 指向 函数 
的 指针 ， 因 此 person1 和 person2 对 象 就 共享 了 在 全 局 作用 域 中 定义 的 同一 个 sayName () 函数 。 这 
样 做 确实 解决 了 两 个 函数 做 同一 件 事 的 问题 ,可 是 新 问题 又 来 了 : 在 全 局 作用 域 中 定义 的 函数 实际 上 只 
能 被 某 个 对 象 调 用 ,这 让 全 局 作用 域 有 点 名 不 副 实 。 而 更 让 人 无 法 接受 的 是 : 如 果 对 象 需要 定义 很 多 方 
法 ,那么 就 要 定义 很 多 个 全 局 函数 ， 于 是 我 们 这 个 自 定义 的 引用 类 型 就 丝毫 没有 封装 性 可 言 了 。 好 在 ， 
这 些 问题 可 以 通过 使 用 原型 模式 来 解决 。 


6.2.3 ”原型 模式 


我 们 创建 的 每 个 函数 都 有 一 个 prototype (原型 ) 属性 ， 这 个 属性 是 一 个 指针 ， 指 向 一 个 对 象 ， 
而 这 个 对 象 的 用 途 是 包含 可 以 由 特定 类 型 的 所 有 实例 共享 的 属性 和 方法 。 如 果 按 照 字 面 意思 来 理解 , 那 
么 prototype 就 是 通过 调用 构造 函数 而 创建 的 那个 对 象 实例 的 原型 对 象 。 使 用 原型 对 象 的 好 处 是 可 以 
让 所 有 对 象 实例 共享 它 所 包含 的 属性 和 方法 。 换 句 话说, 不必 在 构造 函数 中 定义 对 象 实例 的 信息 ， 而 是 
可 以 将 这 些 信息 直接 添加 到 原型 对 象 中 ， 如 下 面 的 例子 所 示 。 


function Person(){ 


: 































































































Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function(){ 
alert (this.name); 


}3 


Var personl = new Person(); 
personl .sayName (); //"Nicholas" 


Var person2 = new Person(); 
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Petson2 .SayName () ; 


alert (Person1l .sayName == Derson2 .SayName) ; 


在 此 , 我 们 将 sayName () 方 法 和 所 有 属 改 
变 成 了 空 函 数 。 即 使 如 此 ， 也 仍然 可 以 通过 调 


//"Nicholas" 


//true 





直接 添加 到 了 Person 的 prototype 




















PrototypePatternExample01.htm 


构造 函数 来 创建 新 对 象 ， 而且 新 对 象 还 会 具有 相同 的 属 











属性 中 ,构造 函数 














性 和 方法 。 但 与 构造 函数 模式 不 同 的 是 ， 新 对 象 的 这 些 属性 和 方法 是 由 所 有 实例 共享 的 。 换 句 话 说 ， 


person1l 和 person2 访问 的 都 是 同一 组 属性 和 同一 个 sayName ( ) 函数 。 要 到 





必须 先 理 解 ECMAScript 
1. 理解 原型 对 象 


P 原 型 对 象 的 性 质 。 





无 论 什 么 时 候 ， 只 要 创建 了 一 个 新 函数 ， 

















属性 ， 
(构造 函数 ) 属性 ， 这 个 





属性 包含 一 个 指向 prototype 属性 











E 解 原型 模式 的 工作 原理 ， 





就 会 根据 一 组 特定 的 规则 为 该 函数 创建 一 个 prototype 








这 个 属性 指向 函数 的 原型 对 象 。 在 默认 情况 下 ， 所 有 原型 对 象 都 会 自动 获得 一 个 constructor 
E 所 在 函数 的 指针 。 就 拿 前 面 的 例子 来 说 ， 


Person.prototype. constructor 指向 Persono 而 通过 这 个 构造 子 数 ， 我 们 还 可 继续 为 原型 对 象 











添加 其 他 属性 和 方法 。 


创建 了 自 定义 的 构造 函数 之 后 ， 其 原型 对 象 默 认 只 会 取得 constructor 属性 ; 


都 是 从 object 继承 而 来 的 。 当 调用 构造 函数 创建 一 个 新 实例 后 ,该 实例 的 内 部 将 包含 一 个 指针 ( 内 部 
































至 于 其 他 方法 ， 则 


[eal 


属性 )， 指 向 构造 函数 的 原型 对 象 。ECMA-262 第 5 版 中 管 这 个 指针 叫 [ [Prototype] ] 。 虽 然 在 脚本 中 





没有 标准 的 方式 访问 [[Prototype]]， 但 Firefox 、Safari 和 Chrome 在 每 个 对 象 上 都 支持 一 个 




















_ proto_; 而 在 其 他 实现 中 ,这 个 属性 对 脚本 则 是 完全 不 可 见 的 。 不 过 ,要 明确 的 真正 重要 的 一 点 就 














图 6-1 展示 了 各 个 对 






















































































是 ， 这 个 连接 存在 于 实例 与 构造 函数 的 原型 对 象 之 间 ， 而 不 是 存在 于 实例 与 构造 函数 之 间 。 
以 前 面 使 用 Person 构造 函数 和 Person.prototype 创建 实例 的 代码 为 例 ， 
象 之 间 的 关系 。 
vy 
Person 到 Person Prototype 
prototype Dd constructor [3 
name "Nicholas" 
age 29 
job "Software Engineer" 
sayName (function) 
| personl person2 
| [[Prototypel]] | @ [[Prototypel]] [4 
图 6-1 


图 6-1 











展示 了 Person 构造 函数 、Person 的 原型 属性 以 及 Person 现 有 的 两 个 实例 之 间 的 关系 。 


在 此 ,Person.prototype 指 向 了 原型 对 象 , 而 Person .prototype.constructor 又 指 回 了 Person。 





原型 对 象 中 


除了 包含 constructor 属性 之 外 ， 还 包括 后 来 添加 的 
personl 和 person2 都 包含 一 个 内 部 属性 , 该 属性 仅仅 指向 了 Person 

















.prototyp 





与 构造 函数 没有 直接 的 关系 。 此 外 ,要 格外 注意 的 是 ,虽然 这 两 个 实例 都 不 包含 属 怕 





其 他 属性 。Person 的 每 个 实例 








e; 换 句 话说 , 它们 
E 和 方法 ， 但 我 们 却 
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可 以 调用 person1. sayName () 。 这 是 通过 查找 对 象 属性 的 过 程 来 实现 的 。 

虽然 在 所 有 实现 中 都 无 法 访问 到 [ [Prototype] ] 但 可 以 通过 isPrototypeof () 方 法 来 确定 对 象 之 
间 是 否 存在 这 种 关系 。 从 本 质 上 讲 ， 如 果 [[Prototype]] 指 向 调用 isPrototypeof () 方法 的 对 象 
( Person.prototype )， 那 么 这 个 方法 就 返回 true， 如 下 所 示 : 


alert (Person.prototype.isPrototypeOf (person1)); //true 
alert (Person.prototype.isPrototypeOf (person2)); //true 


这 里 ， 我 们 用 原型 对 象 的 1sPrototypeof () 方 法 测试 了 person1 和 person2。 因 为 它们 内 部 都 
有 一 个 指向 Person.prototype 的 指针 ， 因 此 都 返回 了 true。 

ECMAScript 5 增加 了 一 个 新 方法 ， 叫 object .getPrototypeof () ， 在 所 有 支持 的 实现 中 ， 这 个 
方法 返回 [ [Prototype] ] 的 值 。 例 如 : 


alert (Object .getPrototypeoft (Person1) == Person.prototype); //true 
alert (Object.getPrototypeOf (person1) .name); //"Nicholas" 


这 里 的 第 一 行 代码 只 是 确定 object .getPrototypeof () 返 回 的 对 象 实际 就 是 这 个 对 象 的 原型 。 
第 二 行 代码 取得 了 原型 对 象 中 name 属性 的 值 ,也 就 是 "Nicholas'"。 使 用 object .getPrototypeof () 
可 以 方便 地 取得 一 个 对 象 的 原型 , 而 这 在 利用 原型 实现 继承 ( 本 章 稍 后 会 讨论 ) 的 情况 下 是 非常 重要 的 。 
支持 这 个 方法 的 浏览 器 有 IE9+、Firefox 3.5+、Safari 5+、Opera 12+ 和 Chrome。 
每 当代 码 读 取 某 个 对 象 的 某 个 属性 时 ， 都 会 执行 一 次 搜索 ,目标 是 具有 给 定名 字 的 属性 。 搜 索 首先 
从 对 象 实例 本 身 开 始 。 如 果 在 实例 中 找到 了 具有 给 定名 字 的 属性 ， 则 返回 该 属性 的 值 ; 如 果 没 有 找到 ， 
则 继续 搜索 指针 指向 的 原型 对 象 , 在 原型 对 象 中 查找 具有 给 定名 字 的 属性 。 如 果 在 原型 对 象 中 找到 了 这 
个 属性 ， 则 返回 该 属性 的 值 。 也 就 是 说 ， 在 我 们 调用 person1 . sayName () 的 时 候 ， 会 先后 执行 两 次 搜 
索 。 首 先 ， 解析 器 会 问 :“ 实 例 person1 有 sayName 属性 吗 ? ” 答 :“ 没 有 。” 然后， 它 继 续 搜 索 ， 再 
问 :“personl 的 原型 有 sayName 属性 吗 ?” 答 :“ 有 。” 于 是 ， 它 就 读 取 那 个 保存 在 原型 对 象 中 的 函 
数 。 当 我 们 调用 person2 . sayName () 时， 将 会 重 现 相 同 的 搜索 过 程 ， 得 到 相同 的 结果 。 而 这 正 是 多 个 
对 象 实例 共享 原型 所 保存 的 属性 和 方法 的 基本 原理 。 





































































































前 面 提 到 过 ， 原 型 最 初 只 包含 constructor 属性 ， 而 该 属性 也 是 共享 的 ， 因 此 


可 以 通过 对 象 实例 访问 。 





虽然 可 以 通过 对 象 实例 访问 保存 在 原型 中 的 值 , 但 却 不 能 通过 对 象 实例 重 写 原型 中 的 值 。 如 果 我 们 
在 实例 中 添加 了 一 个 属性 ,而 该 属性 与 实例 原型 中 的 一 个 属性 同名 ， 那 我 们 就 在 实例 中 创建 该 属性 ,该 
属性 将 会 屏蔽 原型 中 的 那个 属性 。 来 看 下 面 的 例子 。 


function Person(){ 


} 


























Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 





Person.prototype.sayName = function()f{ 
alert (this.name); 


3 


Var personl = new Person(); 
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Var person2 = new Person(); 

personl.name = "Greg"; 

alert (personl .name); //"Greg" 来 自 实例 
alert (person2 .name); //"Nicholas" 来 自 原型 





PrototypePatternExample02.htm 


在 这 个 例子 中 ，personl 的 name 被 一 个 新 值 给 屏蔽 了 。 但 无 论 访问 person1 .name 还 是 访问 
person2 .name 都 能 够 正常 地 返回 值 ， 即 分 别 是 "Greg" (来 自 对 象 实例 ) 和 "Nicholas" (来 自 原型 )。 
当 在 alert () 中 访问 person1 .name 时 , 需要 读 取 它 的 值 , 因此 就 会 在 这 个 实例 上 搜索 一 个 名 为 name 
的 属性 。 这 个 属性 确实 存在 ， 于 是 就 返回 它 的 值 而 不 必 再 搜索 原型 了 。 当 以 同样 的 方式 访问 person2 . 
name 时 ， 并 没有 在 实例 上 发 现 该 属性 ， 因 此 就 会 继续 搜索 原型 ， 结 果 在 那里 找到 了 name 属性 。 

当 为 对 象 实例 添加 一 个 属性 时 ， 这 个 属性 就 会 屏蔽 原型 对 象 中 保存 的 同名 属性 ; 换 句 话 说， 添加 这 
个 属性 只 会 阻止 我 们 访问 原型 中 的 那个 属性 ， 但 不 会 修改 那个 属性 。 即 使 将 这 个 属性 设置 为 nul1， 也 
只 会 在 实例 中 设置 这 个 属性 ， 而 不 会 恢复 其 指向 原型 的 连接 。 不 过 , 使 用 aelete 操作 符 则 可 以 完全 删 
除 实 例 属 性 ， 从 而 让 我 们 能 够 重新 访问 原型 中 的 属性 ， 如 下 所 示 。 


function Person(){ 


} 































































































Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 





Person.prototype.sayName = function(){ 
alert (this.name); 


二 


Var personl 
Var person2 


new Person(); 
new Person(); 


personl.name = "Greg"; 
alert (personl .name); //"Greg" 一 一 来 自 实例 
alert (person2 .name); //"Nicholas" 一 一 来 自 原型 


delete personl .name; 
alert (personl .name); //"Nicholas" 





来 自 原型 


PrototypePatternExample03.htm 


在 这 个 修改 后 的 例子 中 ， 我 们 使 用 aelete 操作 符 删 除了 person1 .name， 之 前 它 保存 的 "Greg" 
值 屏蔽 了 同名 的 原型 属性 。 把 它 删除 以 后 ， 就 恢复 了 对 原型 中 name 属性 的 连接 。 因 此 ， 接 下 来 再 调用 
person1l.name 时 ， 返 回 的 就 是 原型 中 name 属性 的 值 了 。 

使 用 hasownProperty() 方 法 可 以 检测 一 个 属性 是 存在 于 实例 中 , 还 是 存在 于 原型 中 。 这 个 方法 (不 
要 忘 了 它 是 从 object 继承 来 的 ) 只 在 给 定 属性 存在 于 对 象 实例 中 时 ， 才 会 返回 true。 来 看 下 面 这 个 例子 。 


function Person(){ 


} 












































Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 





Person.prototype.sayName = function()t{ 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


6.2 ”创建 对 象 151 





alert (this.name); 
上 


Var DerSson1l = new Person() 
Var person2 = new Person () 


alert (personl.hasOwnProperty("name")); //false 


personl.name = "Greg"; 
alert (personl .name); //"Greg" 一 一 来 自 实例 
alert (personl.hasOwnProperty("name")); //true 


alert (person2 .name) ; //"Nicholas" 一 一 来 自 原型 
alert (person2.hasOwnProperty("name")); //false 


delete personl .name; 
alert (personl .name); //"Nicholas" 一 一 来 自 原型 
alert (personl.hasOwnProperty("name")); //false 


通过 使 用 hasownProperty() 方 法 ， 什 么 时 候 访问 的 是 实例 属性 ， 什 么 时 候 访 问 的 是 原型 属性 就 
一 清二 楚 了 。 调 用 person1 .hasownProperty( "name") 时 ， 只 有 当 personl 重 写 name 属性 后 才 会 
返回 tzue,， 因 为 具有 这 时 候 name 才 是 一 个 实例 属性 ,而 非 原型 属性 。 图 6-2 展示 了 上 面 例子 在 不 同情 











本 



























































况 下 的 实现 与 原型 的 关系 〈 为 了 简单 起 见 ， 图 中 省 略 了 与 Person 构造 函数 的 关系 )。 
Initially 6 
personl 一 和 Person Prototype 
[[Prototypel]l] TQ constructor @ 
name "Nicholas" 
age 29 
person2 job "Software Engineer" 
[[Prototypel]l] 入 一 一 一 一 | 一 一 sayName (function) 





























personl.name = "Greg" 






































personl 一 各 Person Prototype 
[[Prototypel]l] @ 下 constructor . 
name "Greg" name "Nicholas" 
age <9 
person2 16b "Software Engineer" 
[[Prototypel]] -一 sayName (function) 





























delete personl.name 




































































personl 一 > Person Prototype 
[[Prototypel]] ——iT— constructor @ 
name "Nicholas" 
age 29 
person2 job "Software Engineer" 
[[Prototypel]l] © sayName (function) 
6-2 
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Descriptor () 方 法 。 


2. 原型 与 in 操作 符 


有 两 种 方式 使 用 in 操作 符 : 单独 使 用 和 在 


过 对 象 能 够 访问 给 定 属性 时 返回 true， 无 论 该 


function Person(){ 


} 


3， 





ECMAScript 5 的 Object.getownPropertyDescriptor() 方 法 
性 ,要 取得 原型 属性 的 描述 符 , 必须 直接 在 原型 对 象 上 调用 Object .getownProperty- 










局 
只 月 


E 用 于 实例 属 






for-in 循环 中 使 用 。 在 单独 使 用 时 ，in 操作 符 会 在 通 
属性 存在 于 实例 中 还 是 原型 中 。 看 一 看 下 面 的 例子 。 








局 


Engineer"; 


Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software 
Person.prototype.sayName = function()f{ 


alert (this.name); 
}; 


new Person(); 
new Person(); 


Var personl 
var person2 





alert (personl.hasOwnProperty('"name")); //false 
alert("name" in personl); //true 

personl .name = "Greg"; 

alert (personl .name); //"Greg" 一 一 来 自 实例 
alert (personl.hasOwnProperty("name")); //true 
alert("name" in personl); //true 

alert (person2 .name) ; //"Nicholas" 一 一 来 自 原型 
alert (person2.hasOwnProperty('"name")); //false 
alert("name" in person2); //true 

delete personl .name; 

alert (personl .name); //"Nicholas" 一 一 来 自 原型 
alert (personl.hasOwnProperty("name")); //false 


alert("name" in personl); //true 


后 


县 


在 以 上 代码 执行 的 整个 过 程 中 ，name 
的 。 因此 ,调用 "name" in personl 始终 者 











原型 中 ， 如 下 所 示 。 


SO 


} 


function hasPrototypeProperty (object, 
return !object.hasOwnProperty (name) 


PrototypePatternExample04.htm 


性 要 么 是 直接 在 对 象 上 访问 到 的 ， 要 么 是 通过 原型 访问 到 
了 返回 true， 无 论 该 
同时 使 用 hasownProperty () 方 法 和 in 操作 符 ， 就 可 以 确定 该 属 履 








属性 存在 于 实例 中 还 是 存在 于 原型 中 。 
到 底 是 存在 于 对 象 中 , 还 是 存在 于 








name){ 
&& (name in object); 





由 于 in 操作 符 只 要 通过 对 象 能 够 访问 到 属性 就 返回 true，hasownProperty () 只 在 属性 存在 于 


实例 中 时 才 返 回 true， 因 此 只 要 in 操作 符 返 
定 属性 是 原型 中 的 届 








各 


县 











回 true 而 hasownProperty() 返 回 false， 就 可 以 确 


虽 性。 下 面 来 看 一 看 上 面 定 义 的 困 数 hasPrototypeProperty() 的 用 法 。 
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function Person(){ 


} 


Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 





Person.prototype.sayName = function()f{ 
alert (this.name); 


}3 


Var person = new Person(); 
alert (hasPrototypeProperty(person, "name")); //true 


person.name = "Greg"; 
alert (hasPrototypeProperty(person, "name")); //false 


PrototypePatternExample05.htm 








在 这 里 ，name 属性 先是 存在 于 原型 中 ， 因 此 hasPrototypeProperty () 返 回 true。 当 在 实例 中 
重 写 name 属性 后 ,该 属性 就 存在 于 实例 中 了 ， 因 此 hasPrototypeProperty () 返 回 false。 即 使 原 
型 中 仍然 有 name 属性 ,但 由 于 现在 实例 中 也 有 了 这 个 属性 ， 因 此 原型 中 的 name 属性 就 用 不 到 了 。 

在 使 用 for-in 循环 时 ， 返 回 的 是 所 有 能 够 通过 对 象 访问 的 、 可 枚 举 的 (enumerated ) 属性 ， 其 中 
既 包括 存在 于 实例 中 的 属性 ， 也 包括 存在 于 原型 中 的 属性 。 屏 项 了 原型 中 不 可 枚 举 属 性 (即将 
[[Enumerable]] 标 记 为 false 的 属性 ) 的 实例 属性 也 会 在 for-in 循环 中 返回 ， 因 为 根据 规定 ， 所 
有 开发 人 员 定 义 的 属性 都 是 可 枚 举 的 一 一 只 有 在 IE8 及 更 早 版 本 中 例外 。 

下 早期 版 本 的 实现 中 存在 一 个 bug， 即 屏蔽 不 可 枚 举 属性 的 实例 属性 不 会 出 现在 for-in 循环 中 。 
例如 : 


时 var oO = { 
toString : function()t{ 


return "My Object"; 



















































































} 
二 


for (var prop in o)f{ 
于 下 (DELO 3S= "EOStELNG™){ 
alert ("Found toString"); // 在 下 中 不 会 显示 
} 
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当 以 上 代码 运行 时 ， 应 该 会 显示 一 个 警告 框 , 表明 找到 了 tostring () 方 法 。 这 里 的 对 象 o 定义 了 
一 个 名 为 tostring () 的 方法 ， 该 方法 屏蔽 了 原型 中 (不 可 枚 举 ) 的 tostring() 方 法 。 在 正中 , 由 
于 其 实现 认为 原型 的 tostring () 方 法 被 打上 了 值 为 false 的 [[Enumerable]] 标 记 ， 因 此 应 该 跳 过 
该 属性 ， 结 果 我 们 就 不 会 看 到 警告 框 。 该 bug 会 影响 默认 不 可 枚 举 的 所 有 属性 和 方法 ,包括 : 
hasOwnProperty() .propertyIsEnumerable() .toLocaleString() toString() 和 valueof()。 
ECMAScript 5 也 将 constructor 和 prototype 属性 的 [[Enumerable] ] 特 性 设置 为 false, 但 并 不 
是 所 有 浏览 器 都 照 此 实现 。 
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要 取得 对 象 上 所 有 可 枚 举 的 实例 属性 , 可 以 使 用 ECMAScript5 的 object .keys () 方 法 。 这 个 方法 
接收 一 个 对 象 作为 参数 ， 返 回 一 个 包含 所 有 可 枚 举 属性 的 字符 串 数 组 。 例 如 : 
function Person()1{ 


} 











Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function(){ 
alert (this.name); 


} 


Var keys = Object.keys(Person.prototype); 
alert (keys); //"name,age,job,sayName" 


var pl = new Person(); 

pl.name = "Rob"; 

pl.age = 31; 

var plkeys = Object.keys (pl1); 
alert (plkeys); //"name,age" 


ObjectKeysExample01.htm 


这 里 ,变量 keys 中 将 保存 一 个 数组 ， 数 组 中 是 字符 串 "name"、"age"、"job" 和 "sayName"。 这 
个 顺序 也 是 它们 在 for-in 循环 中 出 现 的 顺序 。 如 果 是 通过 Person 的 实例 调用 ， 则 object .keys () 
返回 的 数组 只 包含 "cname" 和 "age" 这 两 个 实例 属性 。 
如 果 你 想 要 得 到 所 有 实例 属性 ,无论 它 是 否 可 枚 举 , 都 可 以 使 用 object .getownPropertyNames () 


























方法 。 
var keys = Object .getownPropertyNames (Person.prototype); 
alert (keys); //"constructor,name,age,job,sayName" 


ObjectPropertyNamesExample01.htm 











注意 结果 中 包含 了 不 可 枚 举 的 constructor 属性 。object .keys () 和 Object.getOwnProperty- 
Names () 方 法 都 可 以 用 来 替代 for-in 循环 ,支持 这 两 个 方法 的 浏览 器 有 IE9+、Firefox 4+、Safari 5+、Opera 
12+ 和 Chrome。 

3. 更 简单 的 原型 语法 

读者 大 概 注意 到 了 ， 前 面 例子 中 每 添加 一 个 属性 和 方法 就 要 敲 一 遍 Person .prototype。 为 减少 
不 必要 的 输入 , 也 为 了 从 视觉 上 更 好 地 封装 原型 的 功能 , 更 常见 的 做 法 是 用 一 个 包含 所 有 属性 和 方法 的 
对 象 字面 量 来 重 写 整个 原型 对 象 ， 如 下 面 的 例子 所 示 。 


function Person(){ 


} 





























Person.prototype = { 
name : "Nicholas", 
age : 29, 
job: "Software Engineer", 
sayName : function () { 
alert (this.name); 
} 
}; 


PrototypePatternExample07.htm 
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在 上 面 的 代码 中 ， 我 们 将 Person .prototype 设置 为 等 于 一 个 以 对 象 字 面 量 形 式 创 建 的 新 对 象 。 
最 终结 果 相 同 ， 但 有 一 个 例外 : constructor 属性 不 再 指向 Person 了 。 前 面 曾 经 介绍 过 ， 每 创建 一 
个 函数 ， 就 会 同时 创建 它 的 prototype 对 象 ， 这 个 对 象 也 会 自动 获得 constructor 属性 。 而 我 们 在 
这 里 使 用 的 语法 ， 本 质 上 完全 重 写 了 默认 的 prototype 对 象 ， 因 此 constructor 属性 也 就 变 成 了 新 
对 象 的 constructor 属性 (指向 object 构造 函数 ), 不 再 指向 Person 国 数 。 此 时 , 尽管 instanceof 
操作 符 还 能 返回 正确 的 结果 ， 但 通过 constructor 已 经 无 法 确定 对 象 的 类 型 了 ， 如 下 所 示 。 















































var friend = new Person(); 


alert (friend instanceof Object); //true 
alert (friend instanceof Person); //true 
alert (friend.constructor == Person); //false 
alert (friend.constructor == Object); //true 


PrototypePatternExample07.htm 


在 此 ， 用 instanceof 操作 符 测试 object 和 Person 仍然 返回 true, 但 constructor 属性 则 
等 于 object 而 不 等 于 Person 了 。 如 果 constructor 的 值 真 的 很 重要 ， 可 以 像 下 面 这 样 特意 将 它 设 
置 回 适 当 的 值 。 


function Person(){ 


} 




















Person.prototype = { 
constructor : Person, 





name : "Nicholas", 

age : 29, 

job: "Software Engineer", 
sayName : function () { 


alert (this.name); 


} 
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以 上 代码 特意 包含 了 一 个 constructor 属性 ， 并 将 它 的 值 设 置 为 person， 从 而 确保 了 通过 该 属 
性 能 够 访问 到 适当 的 值 。 

注意 ， 以 这 种 方式 重 设 constructor 属性 会 导致 它 的 [ [Enumerable] ] 特性 被 设置 为 tue。 默 认 
情况 下 ， 原 生 的 constructor 属性 是 不 可 枚 举 的 ， 因 此 如 果 你 使 用 兼容 ECMAScript 5 的 JavaScript 引 
敬 ， 可 以 试 一 试 object.defineProperty() 。 


























function Person(){ 


} 


Person.prototype = { 





name : "Nicholas", 

age : 29, 

job : "Software Engineer", 
sayName : function () { 


alert (this.name); 


} 
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// 重 设 构造 函数 ， 只 造 用 于 ECMAScript 5 兼容 的 浏览 器 

Object .defineProperty(Person.pPrototype，"constructor"，{ 
enumerable: false, 
value: Person 

}); 


4. 原型 的 动态 性 


由 于 在 原型 中 查找 值 的 过 程 是 一 次 搜索 , 因此 我 们 对 原型 对 象 所 做 的 任何 修改 都 能 够 立即 从 实例 上 








反映 出 来 一 一 即使 是 先 创建 了 实例 后 修改 原型 也 照样 如 此 。 请 看 下 面 的 例子 。 


var friend = new Person(); 





Person.prototype.sayHi = function()t{ 
alert ("hi"); 
7 


friend.sayHi (); //"hi" (没有 问题 | ) 
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以 上 代码 先 创 建 了 Person 的 一 个 实例 , 并 将 其 保存 在 person 中 。 然后, 下 一 条 语句 在 Person . 
prototype 中 添加 了 一 个 方法 sayHi () 。 即 使 person 实例 是 在 添加 新 方法 之 前 创建 的 ， 但 它 仍然 可 
以 访问 这 个 新 方法 。 其 原因 可 以 归结 为 实例 与 原型 之 间 的 松散 连接 关系 。 当 我 们 调用 person. sayHi () 
时 ， 首 先 会 在 实例 中 搜索 名 为 sayHi 的 属性 ， 在 没 找到 的 情况 下 ， 会 继续 搜索 原型 。 因 为 实例 与 原型 
之 间 的 连接 只 不 过 是 一 个 指针 ， 而 非 一 个 副本 ， 因 此 就 可 以 在 原型 中 找到 新 的 sayHi 属性 并 返回 保存 























在 那里 的 函数 。 














尽管 可 以 随时 为 原型 添加 属性 和 方法 , 并且 修改 能 够 立即 在 所 有 对 象 实例 中 反映 出 来 , 但 如 果 是 重 
写 整个 原型 对 象 ， 那 么 情况 就 不 一 样 了 。 我 们 知道 , 调用 构造 函数 时 会 为 实例 添加 一 个 指向 最 初 原型 的 
[ [Prototype]] 指 针 ， 而 把 原型 修改 为 另外 一 个 对 象 就 等 于 切断 了 构造 函数 与 最 初 原型 之 间 的 联系 。 














请 记 住 : 实例 中 的 指针 仅 指 向 原型 ， 而 不 指向 构造 函数 。 看 下 面 的 例子 。 


function Person(){ 


} 


Var friend = new Person(); 


Person.prototype = { 
Constructor:; Person, 


name : "Nicholas", 

age : 29, 

job : "Software Engineer", 
sayName : function () { 


alert (this.name); 
} 
3 


friend.sayName (); //error 
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在 这 个 例子 中 ， 我 们 先 创 建 了 Person 的 一 个 实例 ， 然 后 又 重 写 了 其 原型 对 象 。 然 后 在 调用 





























friend.sayName () 时 发 生 了 错误 ， 因 为 frieng 指向 的 原型 中 不 包含 以 该 名 字 命名 的 
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届 性 。 


图 6-3 展 





























































































































示 了 这 个 过 程 的 内 幕 。 
重 写 原型 对 象 之 前 
vy 
Person -一世 Person Prototype 
prototype © construetr @——i 
friend 
[[Prototypel]l] 一 
重 写 原 型 对 象 之 后 
Person | New Person Prototype 
PrototyYpe | @ CONSt ryetor 一 
name "Nicholas" 
age 29 
friend job "Software Engineer" 
[[Prototypel]] © sayName (function) 
— Person Prototype 
Sconestructer . 
6-3 








从 图 6-3 可 以 看 出 ， 重 写 原 型 对 象 切断 了 现 有 原型 与 任何 之 前 已 经 存在 的 对 象 实例 之 间 的 联系 ; 它 
们 引用 的 仍然 是 最 初 的 原型 。 

5. 原生 对 象 的 原型 

原型 模式 的 重要 性 不 仅 体 现在 创建 自 定义 类 型 方面 , 就 连 所 有 原生 的 引用 类 型 ,都 是 采用 这 种 模式 
创建 的 。 所 有 原生 引用 类 型 (object、Array、String， 等 等 ) 都 在 其 构造 函数 的 原型 上 定义 了 方法 。 
例如 ， 在 Array.prototype 中 可 以 找到 sort() 方 法 ， 而 在 String.prototype 中 可 以 找到 
substring() 方 法 ， 如 下 所 示 。 


) alert (typeof Array.prototype.sort); A EUNICE LO 
alert (typeof String.prototype.substring); /Et 



































通过 原生 对 象 的 原型 ， 不 仅 可 以 取得 所 有 默认 方法 的 引用 ， 而 且 也 可 以 定义 新 方法 。 可 以 像 修改 自 
定义 对 象 的 原型 一 样 修改 原生 对 象 的 原型 ， 因 此 可 以 随时 添加 方法 。 下 面 的 代码 就 给 基本 包装 类 型 
string 添加 了 一 个 名 为 startsWith() 的 方法 。 


String.prototype.startsWith = function (text) { 
return this.indexOof (text) == 0; 











] 


Var msg = "Hello world!"; 
alert (msg.startsWith("Hello")); //true 


PrototypePatternExamplell.htm 
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这 里 新 定义 的 startsWith () 方 法 会 在 传人 的 文本 位 于 一 个 字符 串 开 始 时 返回 true。 既 然 方法 被 











添加 给 了 string.prototype， 那 么 当前 环境 中 的 所 有 字符 串 就 都 可 以 调用 它 。 由 于 msg 是 字符 串 ， 
而 且 后 台 会 调用 string 基本 包装 函数 创建 这 个 字符 串 ， 因 此 通过 msg 就 可 以 调用 startsmith () 方 法 。 



















尽管 可 以 这 样 做 ， 但 我 们 不 推荐 在 产品 化 的 程序 中 修改 原生 对 象 的 原型 。 如 果 因 
某 个 实现 中 缺少 某 个 方法 ， 就 在 原生 对 象 的 原型 中 添加 这 个 方法 ， 那 么 当 在 另 一 个 支 
持 该 方法 的 实现 中 和 运行 代码 时 ， 就 可 能 会 导致 命名 冲突 。 而 且 ， 这 样 做 也 可 能 会 意外 
本 沪 怀 旦 匣 洲 a 


6. 原型 对 象 的 问题 
原型 模式 也 不 是 没有 缺点 。 首 先 ， 它 省 略 了 为 构造 国 数 传递 初始 化 参数 这 一 环节 ,结果 所 有 实例 在 











默认 情况 下 都 将 取得 相同 的 属性 值 。 虽 然 这 会 在 某 种 程度 上 带 来 一 些 不 方便 , 但 还 不 是 原型 的 最 大 问题 。 
原型 模式 的 最 大 问题 是 由 其 共享 的 本 性 所 导致 的 。 














原型 中 所 有 属性 是 被 很 多 实例 共享 的 ,这 种 共享 对 于 函数 非常 合适 。 对 于 那些 包含 基本 值 的 属性 倒 











也 说 得 过 去 ， 毕 竟 〈 如 前 面 的 例子 所 示 )， 通 过 在 实例 上 添加 一 个 同名 属性 ， 可 以 隐藏 原型 中 的 对 应 属 


性 。 














然而 ， 对 于 包含 引用 类 型 值 的 属性 来 说 ， 问 题 就 比较 突出 了 。 来 看 下 面 的 例子 。 


function Person(){ 


} 





Person.prototype = { 
constructor: Person, 


name : "Nicholas", 

age : 29, 

job : "Software Engineer", 
friends : ["Shelby", "Court"], 
sayName : function () { 


alert (this.name); 
} 
下 


Var personl 
Var person2 


new Person(); 
new Person(); 


personl.friends.push("Van"); 


alert (personl .friendas) //"Shelby,Court,Van" 
alert (person2.friends); //"Shelby,Court,Van" 
alert (personl.friends === person2.friends); //true 
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在 此 , Person.prototype 对 象 有 一 个 名 为 friengs 的 属性 , 该 属性 包含 一 个 字符 串 数组 , 然后 ， 








创建 了 Person 的 两 个 实例 。 接 着 , 修改 了 person1 .friengs 引用 的 数组 ， 向 数组 中 添加 了 一 个 字符 


串 。 











由 于 friends 数组 存在 于 Person.prototype 而 非 personl 中 ， 所 以 刚刚 提 到 的 修改 也 会 通过 








person2.friends (与 berson1.friends 指向 同一 个 数组 ) 反映 出 来 。 假 如 我 们 的 初衷 就 是 像 这 样 
在 所 有 实例 中 共享 一 个 数组 ， 那么 对 这 个 结果 我 没有 话 可 说 。 可 是 ,实例 一 般 都 是 要 有 属于 自己 的 全 部 
































属 怕 


E 的 。 而 这 个 问题 正 是 我 们 很 少 看 到 有 人 单独 使 用 原型 模式 的 原因 所 在 。 
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6.2.4 组 合 使 用 构造 函数 模式 和 原型 模式 


创建 自 定义 类 型 的 最 常见 方式 ,就 是 组 合 使 用 构造 隐 数 模式 与 原型 模式 。 构造 函 数 模式 用 于 定义 实 
例 属性 ， 而 原型 模式 用 于 定义 方法 和 共享 的 属性 。 结 果 ， 每 个 实例 都 会 有 自己 的 一 份 实例 属性 的 副本 ， 
但 同时 又 共享 着 对 方法 的 引用 ， 最 大 限度 地 节省 了 内 存 。 另 外 ,这 种 混成 模式 还 支持 向 构造 函数 传递 参 
数 ; 可 谓 是 集 两 种 模式 之 长 。 下 面 的 代码 重 写 了 前 面 的 例子 。 

function Person(name, age, job){ 

this.name = name; 

this.age = age; 

this. joOB: = JOB:; 

this.friends = ["Shelby", "Court"]; 






































} 


Person.prototype = { 
constructor : Person, 
sayName : function()f{ 

alert (this.name); 
} 
} 





Var personl 
Var person2 


new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


personl.friends.push("Van"); 


alert (person]l .friends); //"Shelby,Count,Van" 

alert (person2.friends); //"Shelby,Count" 

alert (personl.friends === person2.friends); //false 
alert (personl.sayName === person2.sayName); //true 
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在 这 个 例子 中 ， 实 例 属性 都 是 在 构造 函数 中 定义 的 ， 而 由 所 有 实例 共享 的 属性 constructor 和 方 
法 sayName ( J 而 修改 了 person1 .friends (向 其 中 添加 一 个 新 字符 串 )， 并 不 
会 影响 到 person2 .friends,， 它们 分 别 引用 了 不 同 的 数组 。 

这 种 构造 函数 0 是 目前 在 ECMAScript 中 使 用 最 广泛 、 认 同 度 最 高 的 一 种 创建 自 


定义 类 型 的 方法 。 可 以 说 ， 这 是 用 来 定义 引用 类 型 的 一 种 默认 模式 。 


6.2.5 动态 原型 模式 


有 其 他 OO 语言 et de ee sa 很 可 能 会 感到 非常 困惑 。 动 态 原 
型 模式 正 是 致力 于 解决 这 个 问题 的 一 个 方案 , 它 把 所 有 信息 都 封装 在 了 构造 函数 中 ， 而 通过 在 构造 函数 
中 初始 化 原型 ( 仅 在 必要 的 情况 下 )， 又 保持 了 es 函数 和 原型 的 优点 。 换 句 话 说， 可 以 通过 
检查 某 个 应 该 存在 的 方法 是 否 有 效 ， 来 决定 是 否 需 要 初始 化 原型 。 来 看 一 个 例子 。 


function Person (name，age，]Jjob)1{ 






































// 属 性 

this.name = name; 
this.age = age; 
this.job = Joby; 
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// 方 法 
if (typeof this.sayName != "function")t{ 


Person.prototype.sayName = function()t{ 
alert (this.name); 
}; 
} 


Var friend = new Person("Nicholas", 29, "Software Engineer"); 
friend.sayName (); 





DynamicPrototypeExample01.htm 


注意 构造 函数 代码 中 加 粗 的 部 分 。 这 里 只 在 sayName () 方 法 不 存在 的 情况 下 ， 才 会 将 它 添加 到 原 
型 中 。 这 段 代码 只 会 在 初次 调用 构造 函数 时 才 会 执行 。 此 后 ,原型 已 经 完成 初始 化 , 不 需要 再 做 什么 修 
改 了 。 不 过 要 记 住 ， 这 里 对 原型 所 做 的 修改 ， 能 够 立即 在 所 有 实例 中 得 到 反映 。 因 此 ， 这 种 方法 确实 可 
以 说 非常 完美 。 其 中 ，iE 语句 检查 的 可 以 是 初始 化 之 后 应 该 存在 的 任何 属性 或 方法 不 必用 一 大 堆 
if 语句 检查 每 个 属性 和 每 个 方法 ; 只 要 检查 其 中 一 个 即 可 。 对 于 采用 这 种 模式 创建 的 对 象 ， 还 可 以 使 
用 instanceof 操作 符 确 定 它 的 类 型 。 






































使 用 动态 原型 模式 时 ， 不 能 使 用 对 象 字面 量 重 写 原 型 。 前 面 已 经 解释 过 了 ， 如 有 果 





在 已 经 创建 了 实例 的 情况 下 重 写 原型 ， 那 么 就 会 切断 现 有 实例 与 新 原型 之 间 的 联系 。 





6.2.6” 寡 生 构造 函数 模式 
通常 ， 在 前 述 的 几 种 模式 都 不 适用 的 情况 下 ， 可 以 使 用 寄生 ( parasitic ) 构造 函数 模式 。 这 种 模式 


的 基本 思想 是 创建 一 个 函数 ， 该 函数 的 作用 仅仅 是 封装 创建 对 象 的 代码 ， 然 后 再 返回 新 创建 的 对 象 ; 但 
从 表面 上 看 ， 这 个 函数 又 很 像 是 典型 的 构造 函数 。 下 面 是 一 个 例子 。 


function Person(name, age, job)t 
Var Oo = new Object(); 
o.name = name; 
o.age = age; 
Ojob = JObB; 
oOo.sayName = function(){ 
alert (this.name); 








} 站 


’ 
return oF 





} 
Var friend = new Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas" 
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在 这 个 例子 中 ，Person 函数 创建 了 一 个 新 对 象 ， 并 以 相应 的 属性 和 方法 初始 化 该 对 象 ， 然 后 又 返 
回 了 这 个 对 象 。 除 了 使 用 new 操作 符 并 把 使 用 的 包装 函数 叫做 构造 函数 之 外 , 这 个 模式 跟 工厂 模式 其 实 


~ 


是 一 模 一 样 的 。 构 造 函 数 在 不 返回 值 的 情况 下 ， 默 认 会 返回 新 对 象 实例 。 而 通过 在 构造 函数 的 末尾 添加 
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一 个 return 语句 ， 可 以 重 写 调用 构造 函数 时 返回 的 值 。 
这 个 模式 可 以 在 特殊 的 情况 下 用 来 为 对 象 创建 构造 函数 。 假设 我 们 想 创建 一 个 具有 额外 方法 的 特殊 
数组 。 由 于 不 能 直接 修改 Array 构造 函数 ， 因 此 可 以 使 用 这 个 模式 。 


人 function SpecialArray (){ 


/ /创建 数组 


Var Values = new Array(); 


/ /添加 值 


values.push.apply (values, arguments); 


/ /添加 方法 
values .toPipedString = function()t{ 
return this.join("|"); 


} 


// 返 回 数组 
return values; 


} 


Var colors = new SpecialArray ("red", "blue", "green"); 


alert (colors.toPipedSstring()); //"red|bluel|green'" 6 
HybridFactoryPatternExample02.htm 


在 这 个 例子 中 ， 我 们 创建 了 一 个 名 叫 specialArray 的 构造 函数 。 在 这 个 子 数 内 部 ， 首 先 创建 了 
一 个 数组 ， 然 后 push () 方 法 (用 构造 函数 接收 到 的 所 有 参数 ) 初始 化 了 数组 的 值 。 随 后 ， 又 给 数组 实 
例 添加 了 一 个 topPipedstring () 方 法 ,该 方法 返回 以 竖 线 分 割 的 数组 值 。 最 后 ， 将 数组 以 函数 值 的 形 
式 返 回 。 接 着 ,我 们 调用 了 specialArray 构造 函数 ， 向 其 中 传人 了 用 于 初始 化 数组 的 值 ， 此 后 又 调 
用 了 toPipedSstring () 方 法 。 

关于 寄生 构造 函数 模式 ， 有 一 点 需要 说 明 : 首先 , 返回 的 对 象 与 构造 聘 数 或 者 与 构造 函数 的 原型 属 
性 之 间 没 有 关系 ; 也 就 是 说 ， 构 造 函 数 返 回 的 对 象 与 在 构造 函数 外 部 创建 的 对 象 没有 什么 不 同 。 为 此 ， 
不 能 依赖 instanceof 操作 符 来 确定 对 象 类 型 。 由 于 存在 上 述 问题 , 我 们 建议 在 可 以 使 用 其 他 模式 的 情 
况 下 ， 不 要 使 用 这 种 模式 。 


6.2.7 稳妥 构造 函数 模式 


道格拉斯 ， 克 罗 克 福 德 (Douglas Crockford ) 发 明了 JavaScript 中 的 稳妥 对 象 (durable objects ) 这 
个 概念 。 所 谓 稳妥 对 象 ， 指 的 是 没有 公共 属性 ， 而 且 其 方法 也 不 引用 this 的 对 象 。 稳 妥 对 象 最 适合 在 
一 些 安 全 的 环境 中 ( 这 些 环境 中 会 禁止 使 用 this 和 new ), 或 者 在 防止 数据 被 其 他 应 用 程序 ( 如 Mashup 
程序 ) 改动 时 使 用 。 稳 妥 构 造 本 数 遵循 与 寄生 构造 郴 数 类 似 的 模式 ， 但 有 两 点 不 同 : 一 是 新 创建 对 象 的 
实例 方法 不 引用 this; 二 是 不 使 用 new 操作 符 调用 构造 函数 。 按 照 稳 受 构造 函数 的 要 求 ， 可 以 将 前 面 
的 Person 构造 函数 重 写 如 下 。 


function Person(name, age, job){ 






























































/ /创建 要 返回 的 对 象 


Var Oo = new Object(); 
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// 可 以 在 这 里 定义 私有 变量 和 函数 


// 添 加 方法 
oOo.sayName = function(){ 
alert (name) 


这 
// 返 回 对 象 


return oF 


} 
注意 , 在 以 这 种 模式 创建 的 对 象 中 , 除了 使 用 sayName () 方 法 之 外 , 没有 其 他 办 法 访问 name 的 值 。 
可 以 像 下 面 使 用 稳妥 的 Person 构造 函数 。 


var friend = Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas" 


这 样 ， 变 量 frienaq 中 保存 的 是 一 个 稳妥 对 象 ， 而 除了 调用 sayName () 方 法 外 ,没有 别 的 方式 可 
以 访问 其 数据 成 员 。 即 使 有 其 他 代码 会 给 这 个 对 象 添加 方法 或 数据 成 员 , 但 也 不 可 能 有 别 的 办 法 访问 传 
入 到 构造 函数 中 的 原始 数据 。 稳 受 构 造 函 数 模式 提供 的 这 种 安全 性 , 使 得 它 非 常 适合 在 某 些 安 全 执行 环 
境 一 一 例如 ，ADsafe ( www.adsafe.org ) 和 Caja (http://code.google.com/p/google-caja/ ) 提供 的 环境 
下 使 用 。 









































与 寄生 构造 函数 模式 类 似 , 使 用 稳妥 构造 函数 模式 创建 的 对 象 与 构造 函数 之 间 也 


没有 什么 关系 ， 因 此 instanceof 操作 符 对 这 种 对 象 也 没有 意义 。 





6.3 继承 


继承 是 OO 语言 中 的 一 个 最 为 人 津津 乐 道 的 概念 。 许 多 00 语言 都 支持 两 种 继承 方式 : 接口 继承 和 
实现 继承 。 接 口 继承 只 继承 方法 签名 ， 而 实现 继承 则 继承 实际 的 方法 。 如 前 所 述 ， 由 于 明 数 没有 签名 ， 
在 ECMAScript 中 无 法 实现 接口 继承 。ECMAScript 只 支持 实现 继承 , 而 且 其 实现 继承 主要 是 依靠 原型 链 
来 实现 的 。 











6.3.1 原型 链 


ECMAScript 中 描述 了 原型 链 的 概念 ， 并 将 原型 链 作 为 实现 继承 的 主要 方法 。 其 基本 思想 是 利用 原 
型 让 一 个 引用 类 型 继承 男 一 个 引用 类 型 的 属性 和 方法 。 简 单 回顾 一 下 构造 函数 、 原 型 和 实例 的 关系 : 每 
个 构造 函数 都 有 一 个 原型 对 象 ， 原 型 对 象 都 包含 一 个 指向 构造 函数 的 指针 ， 而 实例 都 包含 一 个 指向 原型 
对 象 的 内 部 指针 。 那 么 ， 假 如 我 们 让 原型 对 象 等 于 另 一 个 类 型 的 实例 ,结果 会 怎么 样 呢 ? 显然 ， 此 时 的 
原型 对 象 将 包含 一 个 指向 另 一 个 原型 的 指针 ,， 相 应 地 ， 另 一 个 原型 中 也 包含 着 一 个 指向 另 一 个 构造 函数 
的 指针 。 假如 男 一 个 原型 又 是 男 一 个 类 型 的 实例 ,那么 上 述 关 系 依然 成 立 ， 如 此 层 层 递 进 ， 就 构成 了 实 
例 与 原型 的 链条 。 这 就 是 所 谓 原型 链 的 基本 概念 。 

实现 原型 链 有 一 种 基本 模式 ， 其 代码 大 致 如 下 。 


思 function SuperType(){ 
this.property = true; 



































} 
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SuperType.prototype.getSuperValue = function(){ 
return this.property; 


}3 


function SubType()t{ 
this.subproperty = false; 
} 


// 继 承 了 SuperType 
SubType.prototype = new SuperType(); 


SubType.prototype.getSubValue = function (){ 
return this.subproperty; 

人 

Var instance = new SubType(); 


alert (instance.getSuperValue()); //true 


PrototypeChainingExample01.htm 





以 上 代码 定义 了 两 个 类 型 : superType 和 subType。 每 个 类 型 分 别 有 一 个 属性 和 一 个 方法 。 它 们 
的 主要 区 别 是 subType 继承 了 superType， 而 继承 是 通过 创建 superType 的 实例 ， 并 将 该 实例 赋 给 
SubType .prototype 实现 的 。 实 现 的 本 质 是 重 写 原 型 对 象 ， 代 之 以 一 个 新 类 型 的 实例 。 换 句 话 说， 原 
来 存在 于 superType 的 实例 中 的 所 有 属性 和 方法 ,现在 也 存在 于 subType .prototype 中 了 。 在 确立 了 
继承 关系 之 后 ,我 们 给 subType .prototype 添加 了 一 个 方法 ,这 样 就 在 继承 了 superType 的 属性 和 方 






























































































































































法 的 基础 上 又 添加 了 一 个 新 方法 。 这 个 例子 中 的 实例 以 及 构造 函数 和 原型 之 间 的 关系 如 图 6-4 所 示 。 
vy 
SuperType | SuperType Prototype 
prototype © Constructor © 
getSuperValue (function) 
SubType | SubType Prototype 
prototype © [[Prototypel]] 全 
property true 
getSubVvalue (funct ion} 
instance 
[[Prototypel]] © 
subproperty false 
图 6-4 

















在 上 面 的 代码 中 , 我们 没有 使 用 supType 默认 提供 的 原型 ， 而 是 给 它 换 了 一 个 新 原型 ; 这 个 新 原型 
就 是 superType 的 实例 。 于 是 , 新 原型 不 仅 具 有 作为 一 个 superType 的 实例 所 拥有 的 全 部 属性 和 方法 ， 
而 且 其 内 部 还 有 一 个 指针 ,指向 了 superType 的 原型 。 最 终结 果 就 是 这 样 的 : instance 指向 SupType 
的 原型 ，Supbrype 的 原型 又 指向 SuperType 的 原型 。getsupervalue() 方法 仍然 还 在 
SuperType.prototype 中 但 property 则 位 于 SubType .Prototype 中 。 这 是 因为 property 是 一 
个 实例 属性 ， 而 getsupervValue () 则 是 一 个 原型 方法 。 既 然 SubType .prototype 现在 是 superType 
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的 实例 ,那么 property 当然 就 位 于 该 实例 中 了 。 此 外 ， 要 注意 instance.constructor 现在 指向 的 
是 SuperType， 这 是 因为 原来 SupType.prototype 中 的 constructor 被 重 写 了 的 缘故 "。 

通过 实现 原型 链 , 本 质 上 扩展 了 本 章 前 面 介 绍 的 原型 搜索 机 制 。 读 者 大 概 还 记得 ， 当 以 读 取 模 式 访 
问 一 个 实例 属性 时 ， 首先 会 在 实例 中 搜索 该 属性 。 如 果 没 有 找到 该 属性 ， 则 会 继续 搜索 实例 的 原型 。 在 
通过 原型 链 实现 继承 的 情况 下 ， 搜 索 过 程 就 得 以 沿 着 原型 链 继 续 向 上 。 就 拿 上 面 的 例子 来 说 ， 调 用 
instance.getSuperValue () 会 经 历 三 个 搜索 步 又: 1 ) 搜索 实例 ; 2 ) 搜索 subType .prototype; 
3 ) 搜索 SuperType.prototype， 最 后 一 步 才 会 找到 该 方法 。 在 找 不 到 属性 或 方法 的 情况 下 ， 搜 索 过 
程 总 是 要 一 环 一 环 地 前 行 到 原型 链 末端 才 会 停 下 来 。 

1. 别 忘 记 默认 的 原型 

事实 上 ， 前 面 例子 中 展示 的 原型 链 还 少 一 环 。 我 们 知道 ， 所 有 引用 类 型 默认 都 继承 了 object， 而 
这 个 继承 也 是 通过 原型 链 实 现 的 。 大 家 要 记 住 ， 所 有 函数 的 默认 原型 都 是 object 的 实例 ， 因 此 默认 原 
型 都 会 包含 一 个 内 部 指针 ,指向 object .prototype。 这 也 正 是 所 有 自 定义 类 型 都 会 继承 tostring () 、 
valueof () 等 默认 方法 的 根本 原因 。 所 以 , 我 们 说 上 面 例子 展示 的 原型 链 中 还 应 该 包括 另外 一 个 继承 层 
次 。 图 6-5 为 我 们 展示 了 该 例子 中 完整 的 原型 链 。 


















































































































































































































































v 
Object > Object Prototype | 
prototype 一 站 Sonstructor 和 一 一 
hasOwnProperty (function) 
isPrototypeOf (function) 
propertyIsEnumerable (funct Lonm) 
toLocaleString (funeltiony) 
toString (function) 
valueof (function) 
3 
v 
SuperType | SuperType Prototype 
prototype © [[Prototypel]l] 和 一 
constructor S 
GetSuperValue (function) 
SubType ma SubType Prototype 
prototype @ [[Prototypel]l] 全 一 一 一 一 一 一 
property true 
getSubValue (function) 
instance 
[ [Prototype]]| @ 
subproperty | false 











图 6-5 


一 句 话 ,SubType 继承 了 SuperType, 而 SuperType 继承 了 Object。 当 调用 instance.toString () 
时 ， 实 际 上 调用 的 是 保存 在 object .prototype 中 的 那个 方法 。 














中 实际 上 , 不 是 subType 的 原型 的 constructor 属性 被 重 写 了 ， 而 是 supType 的 原型 指向 了 另 一 个 对 象 一 一 
SuperType 的 原型 ， 而 这 个 原型 对 象 的 constructor 属性 指向 的 是 superType。 
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一 点 


Pre 


2. 确定 原型 和 实例 的 关系 
可 以 通过 两 种 方式 来 确定 原型 和 实例 之 间 的 关系 。 第 一 种 方式 是 使 用 instanceof 操作 符 , 只 要 用 


























这 个 操作 符 来 测试 实例 与 原型 链 中 出 现 过 的 构造 函数 ， 结 果 就 会 返回 true。 以 下 几 行 代码 就 说 明了 这 
alert (instance instanceof Object); //true 
alert (instance instanceof SuperType); //true 
alert (instance instanceof SubType); //true 
PrototypeChainingExample01.htm 
1 于 原型 链 的 关系 ， 我 们 可 以 说 instance 是 object、SuperType 或 supType 中 任何 一 个 类 型 
例 。 因 此 ， 测试 这 三 个 构造 函数 的 结果 都 返回 了 true。 


的 实 





原型 


第 二 种 方式 是 使 用 isPrototypeof () 方 法 。 同 样 ， 只 要 是 原型 链 中 出 现 过 的 原型 ， 都 可 以 说 是 该 


链 所 派生 的 实例 的 原型 ， 因 此 isPrototypeof () 方 法 也 会 返回 true， 如 下 所 示 。 
alert (Object.prototype.isPrototypeOof (instance)); //true 
alert (SuperType.prototype.isPrototypeOf (instance)); //true 
alert (SubType.prototype.isPrototypeOof (instance)); //true 


PrototypeChainingExample01.htm 
3. 谨慎 地 定义 方法 
子 类 型 有 时 候 需 要 重 写 超 类 型 中 的 某 个 方法 , 或 者 需要 添加 超 类 型 中 不 存在 的 某 个 方法 。 但 不 管 怎 
给 原型 添加 方法 的 代码 一 定 要 放 在 替换 原型 的 语句 之 后 。 来 看 下 面 的 例子 。 


function SuperType(){ 
this.property = true; 

















} 


SuperType.prototype.getSuperValue = function()t 
return this.property; 
}3 


function SubType()t{ 
this.subproperty = false; 
} 


// 继 承 了 SuperType 
SubType.prototype = new SuperType(); 


// 添 加 新 方法 
SubType.prototype.getSubVvalue = function (){ 


return this.subproperty; 
}; 


// 重 写 超 类 型 中 的 方法 

SubType .Pototype .getSuperValue = function (){ 
return false; 

}; 

var instance = new SubType(); 


alert (instance.getSuperValue()); //false 


PrototypeChainingExample02.htm 
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在 以 上 代码 中 ,加 粗 的 部 分 是 两 个 方法 的 定义 。 第 一 个 方法 getsubvalue () 被 添加 到 了 subType 
中 。 第 二 个 方法 getsuperValue () 是 原型 链 中 已 经 存在 的 一 个 方法 ， 但 重 写 这 个 方法 将 会 屏蔽 原来 的 
那个 方法 。 换 名 话说 ， 当 通过 subpType 的 实例 调用 getsuperValue () 时 ， 调 用 的 就 是 这 个 重新 定义 
的 方法 ; 但 通过 superType 的 实例 调用 getsupervValue () 时 ， 还 会 继续 调用 原来 的 那个 方法 。 这 里 












































要 格外 注意 的 是 ， 必 须 在 用 superType 的 实例 替换 原型 之 后 ， 再 定义 这 两 个 方法 。 

















样 做 就 会 重 写 原型 链 ， 如 下 面 的 例子 所 示 。 


function SuperType(){ 
this.property = true; 





} 


SuperType.prototype.getSuperValue = function(){ 
return this.property; 


} 


function SubType()t{ 
this.subproperty = false; 
} 


// 继 承 了 SuperType 
SubType.prototype = new SuperType(); 


// 使 用 字面 量 添加 新 方法 ， 会 导致 上 一 行 代码 无 效 
SubType.prototype = { 
getSubValue : function (){ 
return this.subproperty; 
}, 


someOtherMethod : function (){ 
return false; 
} 
}; 


var instance = new SubType(); 
alert (instance.getSuperVvalue()); //error! 








还 有 一 点 需要 提醒 读者 ， 即 在 通过 原型 链 实现 继承 时 ,不 能 使 用 对 象 字 面 量 创建 原型 方法 。 因 为 这 
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以 上 代码 展示 了 刚刚 把 superType 的 实例 赋值 给 原型 ， 紧 接着 又 将 原型 符 换 成 一 个 对 象 字 卫 


导致 的 问题 。 由 于 现在 的 原型 包含 的 是 一 个 object 的 实例 ， 而 非 superType 的 实例 ， 
中 的 原型 链 已 经 被 切断 一 一 subType 和 SuperType 之 间 已 经 没有 关系 了 。 
4. 原型 链 的 问题 

















j 量 而 














因此 我 1 


门 设想 


原型 链 虽 然 很 强大 ， 可 以 用 它 来 实现 继承 , 但 它 也 存在 一 些 问题 。 其 中 ,最 主要 的 问题 来 自 包含 引 


















































用 类 型 值 的 原型 。 想 必 大 家 还 记得 ,我 们 前 面 介绍 过 包含 引用 类 型 值 的 原型 属性 会 被 所 有 实例 共享 ; 而 


这 也 正 是 为 什么 要 在 构造 函数 中 ,而 不 是 在 原型 对 象 中 定义 属性 的 原因 。 在 通过 原型 来 实现 继承 时 ， 原 











型 实际 上 会 变 成 男 一 个 类 型 的 实例 。 于 是 ， 原 先 的 实例 属性 也 就 顺理成章 地 变 成 了 现在 的 原型 属 ' 


下 列 代码 可 以 用 来 说 明 这 个 问题 。 


function SuperType(){ 
thigs.colors = ["red"; "blue", "green"]:s 
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} 


function SubType(){ 
} 


// 继 承 了 SuperType 
SubType.prototype = new SuperType(); 


var instancel = new SubType(); 
instancel.colors.push("black"); 
alert (instancel .colors); //"red,blue,green,black" 


var instance2 = new SubType(); 
alert (instance2.colors); //"red,blue,green,black" 


PrototypeChainingExample04.htm 


这 个 例子 中 的 superType 构造 也 数 定义 了 一 个 colors 属性 ,该 属性 包含 一 个 数组 ( 引用 类 型 值 )。 
superType 的 每 个 实例 都 会 有 各 自 包 含 自己 数组 的 colors 属性 。 当 subType 通过 原型 链 继承 了 
SuperType 之 后 ，SubType .prototype 就 变 成 了 SuperType 的 一 个 实例 ,因此 它 也 拥有 了 一 个 它 自 
己 的 colors 属性 一 一 就 跟 专 门 创 建 了 一 个 submype .prototype.colors 属性 一 样 。 但 结果 是 什么 
呢 ? 结果 是 SubType 的 所 有 实例 都 会 共享 这 一 个 个 colors 属性 。 而 我 们 对 instancel .colors 的 修改 
能 够 通过 instance2 .colors 反映 出 来 ， 就 已 经 充分 证 实 了 这 一 点 。 

原型 链 的 第 二 个 问题 是 : 在 创建 子 类 型 的 实例 时 ， 不 能 向 超 类 型 的 构造 函数 中 传递 参数 。 实 际 上 ， 
应 该 说 是 没有 办 法 在 不 影响 所 有 对 象 实例 的 情况 下 ,给 超 类 型 的 构造 函数 传递 参数 。 有 上 鉴于 此 ,再 加 上 
前 面 刚刚 讨论 过 的 由 于 原型 中 包含 引用 类 型 值 所 带 来 的 问题 ， 实 践 中 很 少 会 单独 使 用 原型 链 。 


6.3.2 ”借用 构造 函数 


在 解决 原型 中 包含 引用 类 型 值 所 带 来 问题 的 过 程 中 ， 开 发 人 员 开 始 使 用 一 种 叫做 借用 构造 函数 
( constructor stealing ) 的 技术 (有 时 候 也 叫做 伪造 对 象 或 经 典 继 承 )。 这 种 技术 的 基本 思想 相当 简单 ， 即 
在 子 类 型 构造 函数 的 内 部 调用 超 类 型 构造 函数 。 别 忘 函数 只 不 过 是 在 特定 环境 中 执行 代码 的 对 象 ， 
因此 通过 使 用 apply () 和 call () 方 法 也 可 以 在 (将来) 新 创建 的 对 象 上 执 和 人 和 构造 函数 ， 如 下 所 示 : 


function SuperType()t 
this.colors = ["red", "blue", "green"]; 



























































} 





function SubType()t{ 
// 继 承 了 SuperType 
SuperType.call (this); 


} 

var instancel = new SubType(); 
instancel.colors.push("black"); 

alert (instancel .colors); //"red,blue,green,black" 


var instance2 = new SubType(); 
alert (instance2.colors); //"red,blue,green" 


ConstructorStealingExample01.htm 
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代码 中 加 粗 的 那 一 行 代 码 “ 借 调 ” 了 超 类 型 的 构造 函数 。 通 过 使 用 call () 方 法 (或 apply() 方 法 
也 可 以 ), 我 们 实际 上 是 在 (未 来 将 要 ) 新 创建 的 subType 实例 的 环境 下 调用 了 superType 构造 函数 。 
这 样 一 来 ， 就 会 在 新 SubType 对 象 上 执行 SuperType () 函数 中 定义 的 所 有 对 象 初始 化 代码 。 结 果 ， 
SubType 的 每 个 实例 就 都 会 具有 自己 的 colors 属性 的 副本 了 。 

1. 传递 参数 

相对 于 原型 链 而 言 , 借用 构造 函数 有 一 个 很 大 的 优势 ， 即 可 以 在 子 类 型 构造 函数 中 向 超 类 型 构造 隐 
数 传递 参数 。 看 下 面 这 个 例子 。 


function SuperType (name) { 
this.name = name; 



































} 


function SubType(){ 
// 继 承 了 SuperType， 同 时 还 传递 了 参数 
SuperType.call (this, "Nicholas"); 


/ /实例 属性 
this.age = 29; 
} 


Var instance = new SubType(); 
alert (instance.name); //"Nicholas"; 
alert (instance.age); /129 


ConstructorStealingExample02.htm 


以 上 代码 中 的 superType 只 接受 一 个 参数 name ， 该 参数 会 直接 赋 给 一 个 属性 。 在 subType 构造 
函数 内 部 调用 superType 构造 函数 时 ， 实际 上 是 为 subpType 的 实例 设置 了 name 属性 。 为 了 确保 
SuperType 构造 函数 不 会 重 写 子 类 型 的 属性 ， 可 以 在 调用 超 类 型 构造 函数 后 ， 青 添加 应 该 在 子 类 型 中 
定义 的 属性 。 

2. 借用 构造 函数 的 问题 

如 果 仪 仅 是 借用 构造 函数 , 那么 也 将 无 法 避免 构造 函数 模式 存在 的 问题 一 一 方法 都 在 构造 函数 中 定 
义 ， 因 此 函数 复 用 就 无 从 谈 起 了 。 而 且 ， 在 超 类 型 的 原型 中 定义 的 方法 ， 对 子 类 型 而 言 也 是 不 可 见 的 ， 结 
果 所 有 类 型 都 只 能 使 用 构造 函数 模式 。 考 虑 到 这 些 问题 ， 借 用 构造 函数 的 技术 也 是 很 少 单独 使 用 的 。 


























































































































6.3.3 组 合 继承 


组 合 继承 (combination inheritance )， 有 了 时候 也 叫做 伪 经 典 继承 , 指 的 是 将 原型 链 和 借用 构造 函数 的 
技术 组 合 到 一 块 ， 从 而 发 挥 二 者 之 长 的 一 种 继承 模式 。 其 背后 的 思路 是 使 用 原型 链 实现 对 原型 属性 和 方 
法 的 继承 ， 而 通过 借用 构造 函数 来 实现 对 实例 属性 的 继承 。 这 样 ， 既 通过 在 原型 上 定义 方法 实现 了 也 数 
复 用 ， 又 能 够 保证 每 个 实例 都 有 它 自己 的 属性 。 下 面 来 看 一 个 例子 。 
量 ， function SuperType (name) { 


this.name = name; 
this.colors = ["red", "blue", "green"]; 





























} 


SuperType.prototype.sayName = function(){ 
alert (this.name); 
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过 


function SubType (name, age)t{ 
/ /继承 属性 
SuperType.call (this, name); 
this.age = age; 

} 

/ /继承 方法 


SubType.prototype = new SuperType(); 

SubType.prototype.constructor = SubType; 

SubType.prototype.sayAge = function(){ 
alert (this.age); 

过 


var instancel = new SubType("Nicholas'"， 
instancel.colors.push("black"); 


29); 


alert (instancel .colors); 
instancel .sayName (); 
instancel .sayAge(); 


var 
alert (instance2.colors); 
instance2.sayName (); 
instance2 .sayAge(); 





instance2 = new SubType ("Greg", 


//"red,blue,green,black" 
//"Nicholas"; 
//29 


Dy 
//"red,blue,green" 
//"Greg"; 

//27 





CombinationInheritanceExample01.htm 


在 这 个 例子 中 ，superType 构造 函数 定义 了 两 个 属性 : name 和 colors。SuperType 的 原型 定义 
了 一 个 方法 sayName () 。SubType 构造 函数 在 调用 superType 构造 函数 时 传人 了 name 参数 ， 紧 接着 
又 定义 了 它 自己 的 属性 age。 然 后 , 将 superType 的 实例 赋值 给 subpType 的 原型 ,然后 又 在 该 新 原型 
上 定义 了 方法 sayage () 。 这 样 一 来 ， 就 可 以 让 两 个 不 同 的 subType 实例 既 分 别 拥有 自己 属性 一 一 包 
括 colors 属性 ， 又 可 以 使 用 相同 的 方法 了 。 

组 合 继承 避免 了 原型 链 和 借用 构造 函数 的 缺陷 ， 融 合 了 它们 的 优点 ， 成 为 JavaScript 中 最 常用 的 继 
承 模式 。 而 且 ，instanceof 和 :isPrototypeof () 也 能 够 用 于 识别 基于 组 合 继承 创建 的 对 象 。 


6.3.4 ”原型 式 继承 


道格拉斯 。 克 罗 克 福 德 在 2006 年 写 了 一 篇 文章 ， 题 为 Prototypal Inheritance in JavaScript ( JavaScript 

中 的 原型 式 继承 )。 在 这 篇 文章 中 ， 他 介绍 了 一 种 实现 继承 的 方法 ， 这 种 方法 并 没有 使 用 严格 意义 上 的 

构造 函数 。 他 的 想法 是 借助 原型 可 以 基于 已 有 的 对 象 创建 新 对 象 ， 同 时 还 不 必 因 此 创建 自 定义 类 型 。 为 
了 达到 这 个 目的 ， 他 给 出 了 如 下 函数 。 










































































function object(o) 
function F(){} 
F.prototype = 0o; 
return new F(); 


CY) { 


) 函数 内 部 ， 先 创建 了 一 个 临时 性 的 构造 函数 ， 然 后 将 传人 的 对 象 作为 这 个 构造 函数 的 
这 个 临时 类 型 的 一 个 新 实例 。 从 本 质 上 讲 ，object () 对 传人 其 中 的 对 象 执行 了 一 次 


在 object( 
原型 ， 最 后 返回 了 
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浅 复制 。 来 看 下 面 的 例子 。 


SO 


Var person = { 
name: "Nicholas", 
friends: ["Shelby", "Court", "Van"] 


> 

Var anotherPerson = object (person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob"); 

Var yetAnotherPperson = object (person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 


alert (person.friends); //"Shelby,Court,Van,Rob,Barbie" 


PrototypalInheritanceExample01.htm 





克 罗 克 福 德 主张 的 这 种 原型 式 继承 , 要 求 你 必须 有 一 个 对 象 可 以 作为 男 一 个 对 象 的 基础 。 如果 有 这 么 





一 个 对 象 的 话 ， 可 以 把 它 传递 给 object () 函数 ， 然 后 再 根据 具体 需求 对 得 到 的 对 象 加 以 修改 即 可 。 在 这 
个 例子 中 ， 可 以 作为 另 一 个 对 象 基础 的 是 person 对 象 ， 于 是 我 们 把 它 传人 到 object () 函数 中 ， 然 后 该 

函数 就 会 返回 一 个 新 对 象 。 这 个 新 对 象 将 person 作为 原型 ， 所 以 它 的 原型 中 就 包含 一 个 基本 类 型 值 属 性 
和 一 个 引用 类 型 值 属性 ,这 意味 着 person.friends 不 仅 属于 person 所 有 ,而且 也 会 被 anotherPerson 
以 及 yetaAnotherPerson 共享 。 实际 上 ， 这 就 相当 于 又 创建 了 person i 


























ECMAScript 5 通过 新 增 Object .create() 方 法 规范 化 了 原型 式 继承 。 这 个 方法 接收 两 个 参数 : 











个 用 作 新 对 象 原 型 的 对 象 和 〈 可 选 的 ) 一 个 为 新 对 象 定义 额外 属性 的 对 象 。 传人 一 个 参数 的 情况 下 ， 


Obj 


ect.create() 与 object() 方 法 的 行为 相同 。 


Var person = { 
name: "Nicholas", 
friends: ["Shelby", "Court", "Van"] 


var anotherPerson = Object.create(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push("Rob"); 

var yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 


yetAnotherPerson.friends.push("Barbie"); 


alert (person.friends); //"Shelby,Court,Van,Rob,Barbie" 


PrototypalInheritanceExample02.htm 





Object.create() 方 法 的 第 二 个 参数 与 obpject .defineProperties() 方 法 的 第 二 个 参数 格式 相 

















同 : 
性 。 


每 个 属性 都 是 通过 自己 的 描述 符 定义 的 。 以 这 种 方式 指定 的 任何 属性 都 会 覆盖 原型 对 象 上 的 同名 属 


例如 : 
Var person = { 
name: "Nicholas", 
friendss ["Shelby";, "Court"y “Vanm™] 
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var anotherPerson = Object .create (Person，({ 
name: { 
value: "Greg" 
} 
局 


alert(anotherPerson.name); //"Greg" 


PrototypallnheritanceExample03.htm 





支持 object .create() 方 法 的 浏览 器 有 IE9+、Firefox 4+、Safari 5+、 Opera 12+ 和 Chrome。 

在 没有 必要 兴 师 动 众 地 创建 构造 函数 ,而 只 想 让 一 个 对 象 与 男 一 个 对 象 保持 类 似 的 情况 下 ,原型 式 
继承 是 完全 可 以 胜任 的 。 不 过 别 忘 了 ,包含 引用 类 型 值 的 属性 始终 都 会 共享 相应 的 值 ， 就 像 使 用 原型 模 
式 一 样 。 

6.3.5 ”寄生 式 继承 

寄生 式 (parasitic ) 继承 是 与 原型 式 继承 紧密 相关 的 一 种 思路 ， 并 且 同 样 也 是 由 克 罗 克 福 德 推 而 广 

之 的 。 寄 生 式 继承 的 思路 与 寄生 构造 函数 和 工厂 模式 类 似 ， 即 创建 一 个 仅 用 于 封装 继承 过 程 的 函数 ， 该 


函数 在 内 部 以 某 种 方式 来 增强 对 象 ,最 后 再 像 真 地 是 它 做 了 所 有 工作 一 样 返回 对 象 。 以 下 代码 示范 了 寄 
生 式 继承 模式 。 


function createAnother (original){ 




















var clone = object(original);  // 通 过 调用 有 函数 创建 一 个 新 对 象 

clone.sayHi = function(){ // 以 某 种 方式 来 增强 这 个 对 象 
alert ("hi"); 

}3 

return clone; / /返回 这 个 对 象 


} 

在 这 个 例子 中 ，createAnother () 函数 接收 了 一 个 参数 ， 也 就 是 将 要 作为 新 对 象 基 础 的 对 象 。 然 
后 ， 把 这 个 对 象 ( original ) 传递 给 object () 函数 ， 将 返回 的 结果 赋值 给 clone。 再 为 clone 对 象 
添加 一 个 新 方法 sayHi () ， 最 后 返回 clone 对 象 。 可 以 像 下 面 这 样 来 使 用 createAnother () 函数 : 

















Var person = { 
name: "Nicholas", 
friends: ["Shelby", "Court", "Van"] 


}3 


Var anotherPerson = createAnother (person); 
anotherpPerson.sayHi(); //"hi" 


这 个 例子 中 的 代码 基于 person 返回 了 一 个 新 对 象 一 一 anotherPerson。 新 对 象 不 仅 具 有 person 
的 所 有 属性 和 方法 ， 而 且 还 有 自己 的 sayHi () 方 法 。 

在 主要 考虑 对 象 而 不 是 自 定义 类 型 和 构造 函数 的 情况 下 ,寄生 式 继承 也 是 一 种 有 用 的 模式 。 前 面 示 
范 继承 模式 时 使 用 的 object () 函数 不 是 必需 的 ; 任何 能 够 返回 新 对 象 的 函数 都 适用 于 此 模式 。 




















使 用 寄生 式 继承 来 为 对 象 添加 函数 ,会 由 于 不 能 做 到 函数 复 用 而 降低 效率 ; 这 一 


点 与 构造 函数 模式 类 似 。 
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6.3.6 ”寄生 组 合式 继承 


前 面 说 过 ， 组 合 继承 是 JavaScript 最 常用 的 继承 模式 ; 不 过 ， 它 也 有 自己 的 不 足 。 组 合 继承 最 大 的 

题 就 是 无 论 什 么 情况 下 ， 都 会 调用 两 次 超 类 型 构造 函数 : 一 次 是 在 创建 子 类 型 原型 的 时 候 ， 另 一 次 是 
2 没 错 ,， 子 类 型 最 终 会 包含 超 类 型 对 象 的 全 部 实例 属性 ， 但 我 们 不 得 不 在 调用 子 
类 型 构造 函数 时 重 写 这 些 属性 。 再 来 看 一 看 下 面 组 合 继承 的 例子 。 

function SuperType (name){ 


this.name = name; 
thigs colors. = ["red"; "blue", "green"™]’: 






































} 


SuperType.prototype.sayName = function(){ 
alert (this.name); 

ep 

function SubType (name, age)t{ 


SuperType.call(this, name); // 第 二 次 调用 SuperType() 


this.age = age; 
} 


SubType .prototype = new SuperType(); // 第 一 次 调用 SuperType() 
SubType .Prototype.consttructor = SubType; 
SubType.prototype.sayAge = function()1 

alert (this.age); 
} 


加 粗 字 体 的 行 中 是 调用 superType 构造 函数 的 代码 。 在 第 一 次 调用 superType 构造 函数 时 ， 
SubType .prototype 会 得 到 两 个 属性 : name 和 colors; 它们 都 是 superType 的 实例 属性 ， 只 不 过 
现在 位 于 supType 的 原型 中 。 当 调用 subType 构造 明 数 时 ， 又 会 调用 一 次 superType 构造 函数 ， 这 
一 次 又 在 新 对 象 上 创建 了 实例 属性 name 和 colors。 于 是 ， 这 两 个 属性 就 屏蔽 了 原型 中 的 两 个 同名 属 
性 。 图 6-6 展示 了 上 述 过 程 。 

如 图 6-6 所 示 ， 有 两 组 name 和 colors 属性 : 一 组 在 实例 上 ,一 组 在 subType 原型 中 。 这 就 是 调 
用 两 次 superType 构造 函数 的 结果 。 好 在 我 们 已 经 找到 了 解决 这 个 问题 方法 合式 继承 。 

所 谓 寄 生 组 合式 继承 ， 即 通过 借用 构造 函数 来 继承 属性 ， 通 过 原 型 链 的 混成 形式 来 继承 方法 。] 其 
后 的 基本 思路 是 : 不 必 为 了 指定 子 类 型 的 原型 而 调用 超 类 型 的 构造 函数 , 我 们 所 需要 的 无 非 就 是 超 类 型 
原型 的 一 个 副本 而 已 。 本质 上 ,就 是 使 用 寄生 式 继承 来 继承 超 类 型 的 原型 ,然后 再 将 结果 指定 给 子 类 型 
的 原型 。 寄 生 组 合式 继承 的 基本 模式 如 下 所 示 。 
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function inheritPrototype (subType, superType)t 


var prototype = object (superType.prototype); / /创建 对 象 
prototype.constructor = subType; / /增强 对 象 
subType.prototype = prototype; // 指 定 对 象 


} 

这 个 示例 中 的 inheritPrototype() 函数 实现 了 寄生 组 合式 继承 的 最 简单 形式 。 这 个 函数 接收 两 
个 参数 , 子 类 型 构造 函数 和 超 类 型 构造 函数 。 在 函数 内 部 ， 第 一 步 是 创建 超 类 型 原型 的 一 个 副本 。 第 二 
步 是 为 创建 的 副本 添加 constructor 属性 , 从 而 弥补 因 重 写 原型 而 失去 的 默认 的 constructor 属性 。 
最 后 一 步 ， 将 新 创建 的 对 象 ( 即 副本 ) 赋值 给 子 类 型 的 原型 。 这 样 ， 我 们 就 可 以 用 调用 inherit- 
Prototype() 函数 的 语句 ， 去 替换 前 面 例子 中 为 子 类 型 原型 赋值 的 语句 了 ， 例 如 : 
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function SuperType (name){ 


this.name = name; 
this.colors = ["red", "blue", "green"]; 


SuperType.prototype.sayName = function()1{ 


alert (this.name); 


function SubType (name, age)t{ 


SuperType.call (this, name); 


this.age = age; 


inheritPrototype(SubType, SuperType); 


SubType.prototype.sayAge = function()f{ 


alert (this.age); 


ParasiticCombinationInheritanceExample01.htm 



















































































Initially 
SubType | SubType Prototype 
prototype 一 constructor 一 
SubType .Prototype=new SuperType() 
村 
SuperType ma| SuperType Prototype 
prototype © onstructor 全 
SubType ma| SubType Prototype 
prototype 入 [[Prototype]] eH 
name (undefined) 
colors (array) 














var instance = new SubType("Nicholas", 29) 






















































































CT ma SuperType Prototype 
prototype ® onstructor @ 一 一 
SubType md| SubType Prototype 
prototype . [[Prototype]] 一- 
Dame (undefined) 
colors (array) 
instance 
[[Prototype]] 多 
name "Nicholas" 
COLOrS (array) 
age 29 
6-6 
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这 个 例子 的 高 效率 体现 在 它 只 调用 了 一 次 superType 构造 聘 数 ， 并 且 因 此 避免 了 在 subType. 
prototype 上 面 创 建 不 必要 的 、 多 余 的 属性 。 与 此 同时 ， 原 型 链 还 能 保持 不 变 ， 因 此 ， 还 能 够 正常 使 用 
instanceof 和 isPrototypeof()。 开 发 人 员 普遍 认为 寄生 组 合式 继承 是 引用 类 型 最 理想 的 继承 范式 。 











YUI 的 YAHOO.lang.extend() 方 法 采用 了 寄生 组 合 继承 , 从 而 让 这 种 模式 首次 
出 现在 了 一 个 应 用 非常 广泛 的 JavaScript 库 中 。 要 了 解 有 关 YUI 的 更 多 信息 ， 请 访问 
http://developer. yahoo.com/yui/。 






6.4 小结 


ECMAScript 支持 面向 对 象 (00 ) 编程 ， 但 不 使 用 类 或 者 接口 。 对 象 可 以 在 代码 执行 过 程 中 创建 和 
增强 ， 因 此 具有 动态 性 而 非 严格 定义 的 实体 。 在 没有 类 的 情况 下 ， 可 以 采用 下 列 横 式 创 建 对 象 。 

口 工厂 模式 ， 使 用 简单 的 函数 创建 对 象 ， 为 对 象 添 加 属性 和 方法 ， 然 后 返回 对 象 。 这 个 模式 后 来 

被 构造 函数 模式 所 取代 。 

口 构造 函数 模式 ， 可 以 创建 自 定义 引用 类 型 ， 可 以 像 创建 内 置 对 象 实例 一 样 使 用 new 操作 符 。 不 
过 ,构造 函数 模式 也 有 缺点 ， 即 它 的 每 个 成 员 都 无 法 得 到 复 用 ， 包 括 函 数 。 由 于 函数 可 以 不 局 
限于 任何 对 象 ( 即 与 对 象 具有 松散 耦合 的 特点 )， 因 此 没有 理由 不 在 多 个 对 象 间 共 享 函 数 。 

口 原型 模式 , 使 用 构造 函数 的 prototype 属性 来 指定 那些 应 该 共享 的 属性 和 方法 。 组 合 使 用 构造 
函数 模式 和 原型 模式 时 ， 使 用 构造 函数 定义 实例 属性 ， 而 使 用 原型 定义 共享 的 属性 和 方法 。 
JavaScript 主要 通过 原型 链 实 现 继承 。 原 型 链 的 构建 是 通过 将 一 个 类 型 的 实例 赋值 给 男 一 个 构造 函 

数 的 原型 实现 的 。 这 样 ， 子 类 型 就 能 够 访问 超 类 型 的 所 有 属性 和 方法 ， 这 一 点 与 基于 类 的 继承 很 相似 。 

原型 链 的 问题 是 对 象 实例 共享 所 有 继承 的 属性 和 方法 ,因此 不 适宜 单独 使 用 。 解决 这 个 问题 的 技术 是 借 

用 构造 函数 ， 即 在 子 类 型 构造 函数 的 内 部 调用 超 类 型 构造 函数 。 这 样 就 可 以 做 到 每 个 实例 都 具有 自己 的 

属性 ， 同 时 还 能 保证 只 使 用 构造 函数 模式 来 定义 类 型 。 使 用 最 多 的 继承 模式 是 组 合 继承 ,这 种 模式 使 用 

原型 链 继承 共享 的 属性 和 方法 ， 而 通过 借用 构造 函数 继承 实例 属性 。 

此 外 ， 还 存在 下 列 可 供 选 择 的 继承 模式 。 

口 原型 式 继承 ， 可 以 在 不 必 预 先 定义 构造 函数 的 情况 下 实现 继承 ， 其 本 质 是 执行 对 给 定 对 象 的 浅 

复制 。 而 复制 得 到 的 副本 还 可 以 得 到 进一步 改造 。 

口 寄生 式 继承 ， 与 原型 式 继承 非常 相似 ， 也 是 基于 某 个 对 象 或 某 些 信息 创建 一 个 对 象 ， 然 后 增强 
对 象 ， 最 后 返回 对 象 。 为 了 解决 组 合 继承 模式 由 于 多 次 调用 超 类 型 构造 函数 而 导致 的 低 效 率 问 
题 ， 可 以 将 这 个 模式 与 组 合 继承 一 起 使 用 。 

口 寄生 组 合式 继承 ， 集 寄生 式 继承 和 组 合 继承 的 优点 与 一 身 ， 是 实现 基于 类 型 继承 的 最 有 效 方式 。 
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第 半 
函数 表达 式 


本 章 内 容 

口 函数 表达 式 的 特征 

口 使 用 函数 实现 递归 

口 使 用 闭 包 定义 私有 变量 








水 数 表达 式 是 JavaScript 中 的 一 个 既 强 大 又 容易 令 人 困惑 的 特性 。 第 5 章 曾 介绍 过 , 定义 函数 的 
器 >| 方式 有 两 种 : 一 种 是 函数 声明 ， 另 一 种 就 是 函数 表达 式 。 机 数 声 明 的 语法 是 这 样 的 。 
function functionName (arg0, argl, arg2) { 


// 函 数 体 


首先 是 function 关键 字 , 然后 是 函数 的 名 字 , 这 就 是 指定 函数 名 的 方式 。Firefox 、Safari 、Chrome 
和 Opera 都 给 函数 定义 了 一 个 非 标准 的 name 属性 ， 通 过 这 个 属性 可 以 访问 到 给 函数 指定 的 名 字 。 这 个 
属性 的 值 永远 等 于 跟 在 function 关键 字 后 面 的 标识 符 。 


有 // 只 在 Firefox、Safari、Chrome 和 Opera 有 效 


























alert (functionName.name); //"functionName" 


FunctionNameExample01.htm 
关于 函数 声明 ， 它 的 一 个 重要 特征 就 是 函数 声明 提升 ( function declaration hoisting )， 意 思 是 在 执行 
代码 之 前 会 先 读 取 函数 声明 。 这 就 意味 着 可 以 把 函数 声明 放 在 调用 它 的 语句 后 面 。 


» sayHi (); 
function sayHi(){ 


alert ("Hi!"); 








} 
FunctionDeclarationHoisting01.htm 
这 个 例子 不 会 抛 出 错误 ， 因 为 在 代码 执行 之 前 会 先 读 取 函数 声明 。 
第 二 种 创建 函数 的 方式 是 使 用 函数 表达 式 。 函 数 表达 式 有 几 种 不 同 的 语法 形式 。 下 面 是 最 常见 的 一 
种 形式 。 





Var functionName = function(arg0, argl, arg2)t{ 
// 蚁 数 体 
}; 
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这 种 形式 看 起 来 好 像 是 常规 的 变量 赋值 语句 ， 即 创建 一 个 函数 并 将 它 赋 值 给 变量 functionName。 
这 种 情况 下 创建 的 函数 叫做 匿名 函数 ( anonymous function )， 因 为 function 关键 字 后 面 没 有 标识 符 。 
( 匿名 函数 有 时 候 也 叫 拉 姆 达 函 数 。) 匿名 函数 的 name 属性 是 空 字符 串 。 

函数 表达 式 与 其 他 表达 式 一 样 ， 在 使 用 前 必须 先 赋值 。 以 下 代码 会 导致 错误 。 


























sayHi (); // 错 误 : 函数 还 不 存在 
Var sayHi = function(){ 
alert ("Hi!"); 


3 


理解 函数 提升 的 关键 ,就 是 理解 函数 声明 与 函数 表达 式 之 间 的 区 别 。 例如， 执行 以 下 代码 的 结果 可 
能 会 让 人 意 想不到 。 


// 不 要 这 样 做 | 
if(condition)f{ 
function sayHi()t{ 
alert ("Hi!"); 
} 
} else { 
function sayHi()t{ 
alert ("Yo!"); 
} 


FunctionDeclarationsErrorExample01.htm 


























表面 上 看 ， 以 上 代码 表示 在 condition 为 true 时 ,使 用 一 个 sayHi () 的 定义 ; 否则 ， 就 使 用 另 
一 个 定义 。 实际 上 ,这 在 ECMAScript 中 属于 无 效 语法 ，JavaScript 引擎 会 尝试 修正 错误 , 将 其 转换 为 合 
理 的 状态 。 但 问题 是 浏览 器 尝试 修正 错误 的 做 法 并 不 一 致 。 大 多 数 浏览 器 会 返回 第 二 个 声明 ， 忽 略 
condition; Firefox 会 在 condition 为 true 时 返回 第 一 个 声明 。 因 此 这 种 使 用 方式 很 危险 ， 不 应 该 
出 现在 你 的 代码 中 。 不 过 ， 如 果 是 使 用 函数 表达 式 ， 那 就 没有 什么 问题 了 。 

















// 可 以 这 样 做 


Var sayHi; 


if(condition){ 
sayHi = function()f{ 
alert ("Hi!"); 
3 
} else { 
sayvHi. = Finct1ion() 
alert ("Yo!"); 
了 
} 


这 个 例子 不 会 有 什么 意外 ， 不 同 的 函数 会 根据 condition 被 赋值 给 sayHi 。 
能 够 创建 函数 再 赋值 给 变量 ， 也 就 能 够 把 函数 作为 其 他 函数 的 值 返回 。 还 记得 第 5 章 中 的 那个 


createCcomparisonFunction() 国 数 吗 : 





function createComparisonFunction(propertyName) { 


var valuel objectl [propertyNamel]; 


return function(objectl1l, object2)f{ 
Var value2 = object2 [propertyNamel]; 
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if (valuel < Value2)1{ 
return -1; 

} else if (valuel > value2)t{ 
return 1; 

} else { 
return 0; 


} 
} 





createCcomparisonFunction() 就 返回 了 一 个 匿名 函数 。 返 回 的 函数 可 能 会 赋值 给 一 个 变量 


分 里 ， 
或 者 以 其 他 方式 被 调用 ; 不 过 , 在 createcomparisonFunction() 困 数 内 部 ， 它 是 匿名 的 。 在 把 本 数 
当成 值 来 使 用 的 情况 下 ， 都 可 以 使 用 匿名 函数 。 不 过 ， 这 并 不 是 匿名 函数 唯一 的 用 途 。 


7.1 递归 


递归 函数 是 在 一 个 函数 通过 名 字 调 用 自身 的 情况 下 构成 的 ， 如 下 所 示 。 


function factorial (num){ 
C9 LE (Num < YA 
return 1; 
} else { 


return num * factorial (num-1); 














RecursionExample01.htm 


这 是 一 个 经 典 的 递归 阶乘 函数 。 虽 然 这 个 函数 表面 看 来 没什么 问题 ,但 下 面 的 代码 却 可 能 导致 它 出 错 。 


Var anotherFactorial = factorial; 
factorial = null; 
alert (anotherFactorial(4)); // 出 错 | 


RecursionExample01.htm 


以 上 代码 先 把 factorial () 函数 保存 在 变量 anotherFactorial 中 ， 然 后 将 factorial 变量 设 
置 为 nul1， JR 4 剩 下 一 个 。 但 在 接 下 来 调用 anotherFactorial () 时 ,由 于 必 


须 执行 factorial() ,而 factorial 已 经 不 再 是 函数 ,所 以 就 会 导致 错误 ,在 这 种 情况 下 ,使 用 argu- 
ments .callee 可 以 解决 这 个 问题 。 


我 们 知道 ，arguments .callee 是 一 个 指向 正在 执行 的 函数 的 指针 ， 因 此 可 以 用 它 来 实现 对 函数 
的 递归 调用 ， 例 如 : 


function factorial (num){ 
if (num <= 1){ 
return 1; 
} else { 











return num * arguments.callee (num-1); 


} 


RecursionExample02.htm 
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加 粗 的 代码 显示 ， 通 过 使 用 arguments .callee 代替 函数 名 ， 可 以 确保 无 论 怎样 调用 函数 都 不 会 
出 问题 。 因 此 ， 在 编写 递归 函数 时 ， 使 用 arguments .callee 总 比 使 用 函数 名 更 保险 。 
日 在 严格 模式 下 ， 不 能 通过 脚本 访问 arguments .callee， 访 问 这 个 属性 会 导致 错误 。 不 过 ， 可 
以 使 用 命名 函数 表达 式 来 达成 相同 的 结果 。 例 如 : 
var factorial = (function f(num)t 
if (num <= 1)f{ 
return 1; 


} else { 
return num * f(num-1); 


















































} 
3 


以 上 代码 创建 了 一 个 名 为 £() 的 命名 函数 表达 式 ， 然 后 将 它 赋值 给 变量 factorial。 即 便 把 函数 
赋值 给 了 男 一 个 变量 ,函数 的 名 字 £ 仍然 有 效 ， 所 以 递归 调用 照样 能 正确 完成 。 这 种 方式 在 严格 模式 和 
非 严格 模式 下 都 行 得 通 。 


7.2 闭 包 
有 不 少 开 发 人 员 总 是 摘 不 清 匿 名 函数 和 闭 包 这 两 个 概念 , 因此 经 常 混用 。 闭 包 是 指 有 权 访问 另 一 个 


函数 作用 域 中 的 变量 的 函数 。 创 建 闭 包 的 常见 方式 ， 就 是 在 一 个 函数 内 部 创建 另 一 个 函数 ， 仍 以 前 面 的 
createComparisonFunction () 清 数 为 例 ， 注 意 加 粗 的 代码 。 









































function createComparisonFunction(propertyName) { 


return function(object1l, object2)f{ 
var valuel = objectl1[propertyName]; 
var value2 = object2 [propertyName]; 


if (valuel < value2){ 
return -1; 

} else if (valuel > Value2){ 
return 1; 

} else { 
return 0; 

} 

站 有 

} 

在 这 个 例子 中 ， 突 出 的 那 两 行 代码 是 内 部 函数 (一 个 匿名 函数 ) 中 的 代码 ， 这 两 行 代 码 访 问 了 外 部 
函数 中 的 变量 propertyName。 即 使 这 个 内 部 函数 被 返回 了 ,而 且 是 在 其 他 地 方 被 调用 了 , 但 它 仍然 可 
以 访问 变量 propertyName。 之 所 以 还 能 够 访问 这 个 变量 ， 是 因为 内 部 函数 的 作用 域 链 中 包含 
createComparisonFunction() 的 作用 域 。 要 彻底 搞 清楚 其 中 的 细节 ， 必 须 从 理解 函数 被 调用 的 时 候 
都 会 发 生 什 么 入 手 。 

第 4 章 介 绍 了 作用 域 链 的 概念 。 而 有 关 如 何 创建 作用 域 链 以 及 作用 域 链 有 什么 作用 的 细节 ， 对 彻底 
理解 财 包 至 关 重 要 。 当 某 个 函数 被 调用 时 , 会 创建 一 个 执行 环境 ( execution context ) 及 相应 的 作用 域 链 。 
然后 ， 使 用 arguments 和 其 他 命名 参数 的 值 来 初始 化 函数 的 活动 对 象 (activation object )。 但 在 作用 域 
链 中 ， 外 部 函数 的 活动 对 象 始终 处 于 第 二 位 ， 外 部 函数 的 外 部 函数 的 活动 对 象 处 于 第 三 位 ，.……: 直至 作 




































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


7.2 闭 包 179 





为 作用 域 链 终 点 的 全 局 执行 环境 。 
在 函数 执行 过 程 中 ， 为 读 取 和 写 人 变量 的 值 ， 就 需要 在 作用 域 链 中 查找 变量 。 来 看 下 面 的 例子 。 


function compare(valuel, value2){ 
if (valuel < value2)t{ 
return -1; 
} else if (valuel > Value2)1{ 
return 1; 
} else { 
return 0; 


} 





} 


Var result = compare(5, 10); 

以 上 代码 先 定义 了 compare () 函数 ， 然 后 又 在 全 局 作用 域 中 调用 了 它 。 当 调用 compare() 时 , 会 
创建 一 个 包含 arguments 、valuel 和 value2 的 活动 对 象 。 全 局 执行 环境 的 变量 对 象 ( 包含 result 
和 compare ) 在 compare () 执行 环境 的 作用 域 链 中 则 处 于 第 二 位 。 图 7-1 展示 了 包含 上 述 关系 的 


compare () 函数 执行 时 的 作用 域 链 。 
I 全 局 变量 对 象 | 
Compare 








































































































compare 的 执行 环境 > 作用 域 链 result undefined 
(作用 域 链 ) 1 | 
0 o 一 一 
[> compare() 的 活动 对 象 
arguments [5S:; LO 
valuel 5 
Value2 10 
7-1 








后 台 的 每 个 执行 环境 都 有 一 个 表示 变量 的 对 象 一 一 变量 对 象 。 全 局 环境 的 变量 对 象 始终 存在 ， 而 像 
compare () 函数 这 样 的 局 部 环境 的 变量 对 象 ， 则 只 在 函数 执行 的 过 程 中 存在 。 在 创建 compare () 函数 
时 ， 会 创建 一 个 预先 包含 全 局 变量 对 象 的 作用 域 链 ， 这 个 作用 域 链 被 保存 在 内 部 的 [ [scope] ] 属性 中 。 
当 调用 compare () 函数 时 ， 会 为 函数 创建 一 个 执行 环境 ， 然 后 通过 复制 函数 的 [[scopel] 属 性 中 的 对 
象 构建 起 执行 环境 的 作用 域 链 。 此 后 ， 又 有 一 个 活动 对 象 〈 在 此 作为 变量 对 象 使 用 ) 被 创建 并 被 推 入 执 
行 环境 作用 域 链 的 前 端 。 对 于 这 个 例子 中 compare () 函数 的 执行 环境 而 言 ， 其 作用 域 链 中 包含 两 个 变 
量 对 象 : 本 地 活动 对 象 和 全 局 变量 对 象 。 显 然 ， 作 用 域 链 本 质 上 是 一 个 指向 变量 对 象 的 指针 列表 ， 它 只 
引用 但 不 实际 包含 变量 对 象 。 

无 论 什么 时 候 在 函数 中 访问 一 个 变量 时 ， 就 会 从 作用 域 链 中 搜索 具有 相应 名 字 的 变量 。 一 般 来 讲 ， 
当 函 数 执行 完毕 后 ， 局 部 活动 对 象 就 会 被 销毁 ， 内 存 中 仅 保 存 全 局 作用 域 ( 全 局 执行 环境 的 变量 对 象 )。 
但 是 ， 闭 包 的 情况 又 有 所 不 同 。 
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在 另 一 个 函数 内 部 定义 的 函数 会 将 包含 函数 ( 即 外 部 函数 ) 的 活动 对 象 添加 到 它 的 作用 域 链 中 。 因 
此 , 在 createCcomparisonFunction() 国 数 内 部 定义 的 匿名 函数 的 作用 域 链 中 ,实际 上 将 会 包含 外 部 
的 活动 对 象 。 图 7-2 展示 了 当下 列 代码 执行 时 ， 包 含 函 数 与 内 部 





函数 CreateComparisonEunction() 
匿名 函数 的 作用 域 链 。 


Var compare = createComparisonFunction("name"); 
Var result = compare({ name: "Nicholas" }, { name: 


}); 


在 匿名 函数 从 createcomparisonFunction() 中 被 返回 后 ， 它 的 作用 域 链 被 初始 化 为 包含 
createCcomparisonFunction() 国 数 的 活动 对 象 和 全 局 变量 对 象 。 这 样 ， 匿 名 函数 就 可 以 访问 在 
createCcomparisonFunction() 中 定义 的 所 有 变量 。 更 为 重要 的 是 , createComparisonFunction () 
函数 在 执行 完毕 后 ， en 因为 匿名 函数 的 作用 域 链 仍然 在 引用 这 个 活动 对 象 。 换 
函数 返回 后 ， 其 执行 环境 的 作用 域 链 会 被 销毁 , 但 它 的 活 


"Greg" 









































句 话 说 ， 当 createComparisonFunction( 





动 对 象 仍然 会 留 在 内 存 中 ; 0 createComparisonFunction () 的 活动 对 象 才 会 
被 销毁 ， 例 如 : 

// 创 建 函 数 

Var compareNames = createCormparisonFunction("name" ) ; 

// 调 用 函数 


Var result = compareNames({ name: "Nicholas" }, { name: "Greg" }); 


// 解 除 对 匿名 函数 的 引用 (以 便 释放 内 存 ) 


CompareNames = null; 


首先 ,创建 的 比较 函数 被 保存 在 变量 compareNames 中 ,而 通过 将 compareNames 设置 为 等 于 null 




















































































































































































































解除 该 函数 的 引用 ， 就 等 于 通知 垃圾 回收 例 程 将 其 清除 。 随 着 匿名 函数 的 作用 域 链 被 销毁 ， 其 他 作用 域 
(除了 全 局 作用 域 ) 也 都 可 以 安全 地 销毁 了 。 图 7-2 展示 了 调用 compareNames () 的 过 程 中 产生 的 作用 
域 链 之 间 的 关系 。 
| 站 全 局 变量 对 象 
createComparisonFunction createComparison 
| 的 执行 环境 | 作用 域 链 | Function 
| (作用 域 链 ) -一 1 | e result | undefined 
0 | e 一 | 各 
createComparisonFunction() 
» 的 活动 对 象 
arguments ["name"] 
匿名 函数 的 执行 环境 | i es 
(作用 域 链 ) | 一 二 2 | 。 
1 | e 
0 | e 
| 闭 包 的 活动 对 象 
arguments| [{name: "Nicholas"}, 
{name: "Greg"}] 
object1 {name: "Nicholas"} 
object2 {name: "Greg"} 
图 7-2 
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由 于 闭 包 会 携带 包含 它 的 函数 的 作用 域 ， 因 此 会 比 其 他 函数 占用 更 多 的 内 存 。 过 
度 使 用 闭 包 可 能 会 导致 内 存 占 用 过 多 ， 我 们 建议 读者 只 在 绝对 必要 时 再 考虑 使 用 闭 
包 。 虽 然 像 V8 等 优化 后 的 JavaScript 引擎 会 尝试 回收 被 闭 包 占用 的 内 存 ， 但 请 大 家 
还 是 要 慎重 使 用 闭 包 。 






7.2.1 闭 包 与 变量 
作用 域 链 的 这 种 配置 机 制 引出 了 一 个 值得 注意 的 副作用 , 即 闭 包 只 能 取 








得 包含 
后 一 个 值 。 别 忘 了 闭 包 所 保存 的 是 整个 变量 对 象 ， 而 不 是 某 个 特殊 的 变量 。 下 面 这 个 例子 可 以 清晰 地 说 
明 这 个 问题 。 


函数 中 任何 变量 的 最 








function createFunctions(){ 
Var result = new Array(); 


for (var i=0; i < 10; i++){ 
result[i] = function(){ 
return i; 





}3 
} 


return result; 





ClosureExample01.htm 


这 个 函数 会 返回 一 个 函数 数组 。 表 面 上 看 ,似乎 每 个 函数 都 应 该 返 自己 的 索引 值 ， 即 位 置 0 的 函数 
返回 0， 位 置 1 的 函数 返回 1， 以 此 类 推 。 但 实际 上 ， 每 个 函数 都 返回 10。 因 为 每 个 函数 的 作用 域 链 中 
都 保存 着 createFunctions() 函数 的 活动 对 象 ， 所 以 它们 引用 的 都 是 同一 个 变量 i 。 当 
createFunctions () 函数 返回 后 , 变量 i 的 值 是 10, 此 时 每 个 函数 都 引用 着 保存 变量 i 的 同一 个 变量 
对 象 ， 所 以 在 每 个 函数 内 部 i 的 值 都 是 10。 但 是 ， 我 们 可 以 通过 创建 另 一 个 匿名 函数 强制 让 闭 包 的 行为 
符合 预期 ， 如 下 所 示 。 



































function createFunctions(){ 
var result = new Array(); 


for (var i=0; i < 10; i++){ 
result[il] = Eunction(num){ 
return function()t{ 
return num; 
}; 
}(i); 
} 


return result; 
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在 重 写 了 前 面 的 createFunctions () 函数 后 ， 每 个 函数 就 会 返 








回 各 自 不 同 的 索引 值 了 。 在 这 个 版 


本 中 , 我 们 没有 直接 把 闭 包 赋 值 给 数组 ， 而 是 定义 了 一 个 匿名 函数 ， 并 将 立即 执行 该 匿名 函数 的 结果 赋 


给 数组 。 这 里 的 匿名 函数 有 一 个 参数 num， 也 就 是 最 终 的 函数 要 返 
1 于 函数 参数 是 按 值 传递 的 ， 所 以 就 会 将 








们 传人 了 变量 i。 





























回 的 值 。 在 调用 每 个 匿名 函数 时 ， 我 
的 当前 值 复制 给 参数 num。 而 在 这 个 


< 
变量 i 


匿名 函数 内 部 ， 又 创建 并 返回 了 一 个 访问 num 的 闭 包 。 这样 一 来 ，result 数组 中 的 每 个 函数 都 有 自己 





甩 . 
num 变量 


7.2.2 关于 this 对 象 


的 一 个 副本 ， 因 此 就 可 以 返回 各 自 不 同 的 数值 了 。 








在 闭 包 中 使 
行 环境 绑 定 的 : 在 全 
于 那个 对 象 。 不过， 



































var name = "The Window"; 


Var object = { 
name : "My Object" 


getNameFunc : 


用 this 对 象 也 可 


侣 已 人 
能 会 


导致 一 些 问题 。 我 们 知道 ，this 对 象 是 在 运行 时 基于 函数 的 执 


局 函数 中 ，this 等 于 window， 而 当 函 数 被 作为 某 个 对 象 的 方法 调用 时 ，this 等 
匿名 函数 的 执行 环境 具有 全 局 性 ， 因 此 其 this 对 象 通常 指向 window”。 但 有 时 候 
1 于 编写 闭 包 的 方式 不 同 ， 这 一 点 可 能 不 会 那么 明显 。 下 面 来 看 一 个 例子 。 


function(){ 


return function()t{ 
return this.name; 


过 
}3 


alert (object .getNameFunc 


以 上 代码 先 创建 了 一 个 全 局 变量 name， 又 创建 了 一 个 包含 name 


个 方法 





getNameFunc () , 它 返 


返回 一 个 函数 ， 因 此 调用 object .getNameFunc ( 
回 的 字 


字符 串 。 然 而 ， 这 个 例子 返 
有 取得 其 包含 作用 域 (或 外 部 作 上 月 

前 国 
数 在 搜索 这 两 个 变 


量 (这 一 点 通过 图 

















三 


里 




















() ()); //"The Window" (在 非 严格 模式 下 ) 
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属性 的 对 象 。 这 个 对 象 还 包含 一 
回 一 个 匿名 函数 ,而 匿名 国 数 又 返回 this .name。 由 于 getNameFunc () 
) 0 就 会 立即 调用 它 返 回 的 函数 ， 结 果 就 是 返回 一 个 
符 串 是 "The window"， 即 全 变量 的 值 。 为 什么 匿名 函数 没 
上 域 ) 的 this 对 象 呢 ? 


























了 
可 name 











ij 曾经 提 到 过 ， 每 个 函数 在 被 调用 时 都 会 自动 取得 两 个 特殊 变量 : this 和 arguments。 内 部 函 
时 ， 只 会 搜索 到 其 活动 对 象 为 止 ， 因 此 永远 不 可 能 直接 访问 外 部 函数 中 的 这 两 个 变 
7-2 可 以 看 得 更 清楚 )。 不 过 ,把 外 部 作用 域 中 的 this 对 象 保存 在 一 个 闭 包 能 够 访问 





到 的 变量 里 ， 就 可 以 让 闭 包 访 问 该 对 象 了 ， 如 下 所 示 。 





Var name = "The Window"; 


2 


Var object = { 
name : "My Object" 


yetNameFunc 





Q@ 当然 ， 在 通过 call () 或 apply() 





® function(} 





改变 函数 执行 环境 的 情况 下 ，this 就 会 指向 其 他 对 象 。 
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var that = this; 
return function(){ 

return 七 hat .name; 
} 


}3 


alert (object.getNameFunc()()); //"My Object" 


ThisObjectExample02.htm 

代码 中 突出 的 行 展示 了 这 个 例子 与 前 一 个 例子 之 间 的 不 同 之 处 ,在 定义 匿名 函数 之 前 ,我 们 把 this 

对 象 赋值 给 了 一 个 名 叫 that 的 变量 。 而 在 定义 了 闭 包 之 后 ， 闭 包 也 可 以 访问 这 个 变量 ， 因 为 它 是 我 们 

在 包含 函数 中 特意 声名 的 一 个 变量 。 即 使 在 函数 返回 之 后 ，that 也 仍然 引用 着 object ， 所 以 调用 
object .getNameFunc () () 就 返回 了 "My Object"。 











this 和 arguments 也 存在 同样 的 问题 。 如 果 想 访问 作用 域 中 的 arguments 对 


象 ， 必 须 将 对 该 对 象 的 引用 保存 到 另 一 个 闭 包 能 够 访问 的 变量 中 。 








在 儿 种 特殊 情况 下 ，this 的 值 可 能 会 意外 地 改变 。 比 如 ， 下 面 的 代码 是 修改 前 面 例子 的 结果 。 


var name = "The Window"; 
var object = { 
name : "My Object", 


getName: function(){ 
return this.name; 

} 
于 
这 里 的 getName () 方 法 只 简单 地 返回 this.name 的 值 。 以 下 是 几 种 调用 object .getName () 的 

方式 以 及 各 自 的 结果 。 

object .getName (); //"My Object" 
(obJject .getName) (); //"My Object" 
(object .getName = object.getName) (); //"The Window"， 在 非 严格 模式 下 


ThisObjectExample03.htm 


第 一 行 代 码 跟 平常 一 样 调用 了 object .getName() ， 返 回 的 是 "My object"， 因 为 this.name 
就 是 object .name。 第 二 行 代码 在 调用 这 个 方法 前 先 给 它 加 上 了 括号 。 虽 然 加 上 括号 之 后 ， 就 好 像 只 
是 在 引用 一 个 函数 ,但 this 的 值得 到 了 维持 ， 因 为 object .getName 和 (object.getName) 的 定义 
是 相同 的 。 第 三 行 代 码 先 执行 了 一 条 赋值 语句 ， 然 后 再 调用 赋值 后 的 结果 。 因 为 这 个 赋值 表达 式 的 值 是 
函数 本 身 ， 所 以 this 的 值 不 能 得 到 维持 ， 结 果 就 返回 了 "The Window"。 

当然 ,你 不 大 可 能 会 像 第 二 行 和 第 三 行 代码 一 样 调用 这 个 方法 。 不 过 ， 这 个 例子 有 助 于 说 明 即 使 是 
语法 的 细微 变化 ， 都 有 可 能 意外 改变 this 的 值 。 


7.2.3 ”内 存 泄漏 
由 于 IE9 之 前 的 版 本 对 JScript 对 象 和 COM 对 象 使 用 不 同 的 垃圾 收集 例 程 (第 4 章 曾 经 讨论 过 )， 
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因此 闭 包 在 正 的 这 些 版 本 中 会 导致 一 些 特殊 的 问题 。 具 体 来 说 ， 如 果 闭 包 的 作用 域 链 中 保存 着 一 个 
HTML 元 素 ， 那 么 就 意味 着 该 元 素 将 无 法 被 销毁 。 来 看 下 面 的 例子 。 


function assignHandler(){ 
Var element = document .getElementById("someElement"); 
element.onclick = function(){ 
alert (element .id); 








} 
} 
以 上 代码 创建 了 一 个 作为 element 元 素 事 件 处 理 程序 的 闭 包 ， 而 这 个 闭 包 则 又 创建 了 一 个 循环 引 
用 (事件 将 在 第 13 章 讨论 )。 由 于 匿名 函数 保存 了 一 个 对 assignHandler () 的 活动 对 象 的 引用 ， 因 此 
就 会 导致 无 法 减少 element 的 引用 数 。 只 要 匿名 函数 存在 ，element 的 引用 数 至 少 也 是 1， 因 此 它 所 
占用 的 内 存 就 永远 不 会 被 回收 。 不 过 ， 这 个 问题 可 以 通过 稍微 改写 一 下 代码 来 解决 ， 如 下 所 示 。 
function assignHandler(){ 


Var element = document .getElementById("someElement"); 
var id = element .id; 






























































element.onclick = function()t{ 
alert (id); 
3 


element = null; 


} 


在 上 面 的 代码 中 , 通过 把 element .id 的 一 个 副本 保存 在 一 个 变量 中 , 并 且 在 闭 包 中 引用 该 变量 消 
除了 循环 引用 。 但 仅仅 做 到 这 一 步 ， 还 是 不 能 解决 内 存 泄漏 的 问题 。 必 须要 记 住 : 闭 包 会 引用 包含 函数 
的 整个 活动 对 象 ， 而 其 中 包含 着 element。 即 使 闭 包 不 直接 引用 element ， 包 含 函 数 的 活动 对 象 中 也 
仍然 会 保存 一 个 引用 。 因 此 ， 有 必要 把 element 变量 设置 为 nul1。 这 样 就 能 够 解除 对 DOM 对 象 的 引 
用 ， 顺 利 地 减少 其 引用 数 ， 确 保 正常 回收 其 占用 的 内 存 。 


7.3 ”模仿 块 级 作用 域 


如 前 所 述 ，JavaScript 没有 块 级 作用 域 的 概念 。 这 意味 着 在 块 语句 中 定义 的 变量 ， 实 际 上 是 在 包含 
函数 中 而 非 语句 中 创建 的 ， 来 看 下 面 的 例子 。 






















































































function outputNumbers (count)t{ 
时 for (var i=0; i < count; i++){ 
alert (i); 
3 
alert (i); // 计 数 


BlockScopeExample01.htm 


这 个 函数 中 定义 了 一 个 for 循环 ， 而 变量 i 的 初始 值 被 设置 为 0。 在 Java、C++ 等 语言 中 ， 变 量 i 
只 会 在 for 循环 的 语句 块 中 有 定义 ， 循 环 一 旦 结束 ， 变 量 i 就 会 被 销毁 。 可 是 在 JavaScrip 中 ， 变 量 i 
是 定义 在 ouputNumbers () 的 活动 对 象 中 的 , 因此 从 它 有 定义 开始 , 就 可 以 在 函数 内 部 随处 访问 它 。 即 
使 像 下 面 这 样 错误 地 重新 声明 同一 个 变量 ， 也 不 会 改变 它 的 值 。 
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function outputNumbers (count ) { 
for (var i=0; i < count; i++){ 


alert (i); 
} 
var i; // 重 新 声明 变量 
alert (i); // 计 数 


BlockScopeExample02.htm 


JavaScript 从 来 不 会 告诉 你 是 否 多 次 声明 了 同一 个 变量 ; 过 到 这 种 情况 ， 它 只 会 对 后 续 的 声明 视 而 不 
见 ( 不过， 它 会 执行 后 续 声 明 中 的 变量 初始 化 )。 匿 名 函数 可 以 用 来 模仿 块 级 作用 域 并 避免 这 个 问题 。 
用 作 块 级 作用 域 (通常 称 为 私有 作用 域 ) 的 匿名 函数 的 语法 如 下 所 示 。 
(function()t{ 


// 这 里 是 块 级 作用 域 
}) (); 


以 上 代码 定义 并 立即 调用 了 一 个 匿名 函数 。 将 函数 声明 包含 在 一 对 圆 括号 中 ,表示 它 实际 上 是 一 个 
函数 表达 式 。 而 紧 随 其 后 的 另 一 对 圆 括号 会 立即 调用 这 个 函数 。 如 果 有 读者 感觉 这 种 语法 不 太 好 理解 ， 
可 以 再 看 看 下 面 这 个 例子 。 


Var Count = 5; 
outputNumbers (count ) ; 


这 里 初始 化 了 变量 count ， 将 其 值 设 置 为 S。 当 然 ， 这 里 的 变量 是 没有 必要 的 ， 因 为 可 以 把 值 直 接 
传 给 函数 。 为 了 让 代码 更 简洁 ， 我 们 在 调用 函数 时 用 5 来 代替 变量 count ， 如 下 所 示 。 

outputNumbers (5); 

这 样 做 之 所 以 可 行 , 是 因为 变量 只 不 过 是 值 的 男 一 种 表现 形式 , 因此 用 实际 的 值 蔡 换 变量 没有 问题 。 
再 看 下 面 的 例子 。 


Var someFunction = function()f{ 


// 这 里 是 块 级 作用 域 












































地 
someFunction(); 

这 个 例子 先 定义 了 一 个 函数 ,然后 立即 调用 了 它 。 定 义 函 数 的 方式 是 创建 一 个 匿名 函数 ， 并 把 匿名 
函数 赋值 给 变量 someFunction 。 而 调用 函数 的 方式 是 在 函数 名 称 后 面 添加 一 对 圆 括 号 ， 即 
someFunction () 。 通 过 前 面 的 例子 我 们 知道 , 可 以 使 用 实际 的 值 来 取代 变量 count, 那 在 这 里 是 不 是 
也 可 以 用 函数 的 值 直 接 取代 函数 名 呢 ? 然而 ， 下 面 的 代码 却 会 导致 错误 。 

function(){ 

// 这 里 是 块 级 作用 域 

下 // 出 错 1 

这 段 代码 会 导致 语法 错误 ， 是 因为 JavaSeript 将 function 关键 字 当 作 一 个 函数 声明 的 开始 ， 而 了 
数 声 明 后 面 不 能 跟 圆 括号 。 然 而 ， 函 数 表达 式 的 后 面 可 以 跟 圆 括号。 要 将 函数 声明 转换 成 函数 表达 式 ， 
只 要 像 下 面 这 样 给 它 加 上 一 对 圆 括 号 即 可 。 

(function(){ 


// 这 里 是 块 级 作用 域 
}) (); 
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无 论 在 什么 地 方 ， 只 要 临时 需要 一 些 变量 ， 就 可 以 使 用 私有 作用 域 ， 例 如 : 


function outputNumbers (count ){ 
C9 (function () { 
for (var i=0; i < count; i++){ 
alert (i); 


alert (i); / /导致 一 个 错误 | 


BlockScopeExample03.htm 


在 这 个 重 写 后 的 outputNumbers () 函数 中 , 我 们 在 for 循环 外 部 插入 了 一 个 私有 作用 域 。 在 匿名 
函数 中 定义 的 任何 变量 , 都 会 在 执行 结束 时 被 销毁 。 因 此 , 变量 i 只 能 在 循环 中 使 用 , 使 用 后 即 被 销毁 。 
而 在 私有 作用 域 中 能 够 访问 变量 count, 是 因为 这 个 匿名 函数 是 一 个 闭 包 , 它 能 够 访问 包含 作用 域 中 的 
所 有 变量 。 

这 种 技术 经 常 在 全 局 作用 域 中 被 用 在 函数 外 部 ， 从 而 限制 向 全 局 作用 域 中 添加 过 多 的 变量 和 函数 。 
一 般 来 说 , 我 们 都 应 该 尽量 少 向 全 局 作用 域 中 添加 变量 和 函数 。 在 一 个 由 很 多 开发 人 员 共同 参与 的 大 型 
应 用 程序 中 , 过 多 的 全 局 变量 和 函数 很 容易 导致 命名 冲突 。 而 通过 创建 私有 作用 域 ， 每 个 开发 人 员 既 可 
以 使 用 自己 的 变量 ， 又 不 必 担 心 搞 乱 全 局 作用 域 。 例 如 : 
































(function(){ 


Var now = new Date(); 
IE (now.getMonth() == 0 && now.getDate() == 1){ 
alert ("Happy new year!"); 


} 
}) 0; 
把 上 面 这 段 代码 放 在 全 局 作用 域 中 ， 可 以 用 来 确定 哪 一 天 是 1 月 1 日; 如 果 到 了 这 一 天 ， 就 会 向 用 


户 显示 一 条 祝贺 新 年 的 消息 。 其 中 的 变量 now 现在 是 匿名 函数 中 的 局 部 变量 , 而 我 们 不 必 在 全 局 作用 域 
中 创建 它 。 




















这 种 做 法 可 以 减少 闭 包 占用 的 内 存 问 题 ， 因 为 没有 指向 匿名 函数 的 引用 。 只 要 函 


数 执行 完毕 ， 就 可 以 立即 销毁 其 作用 域 链 了 。 





7.4 私有 变量 


严格 来 讲 ，JavaScript 中 没有 私有 成 员 的 概念 ; 所 有 对 象 属性 都 是 公有 的 。 不 过 ， 倒 是 有 一 个 私有 
变量 的 概念 。 任 何在 函数 中 定义 的 变量 , 都 可 以 认为 是 私有 变量 , 因为 不 能 在 函数 的 外 部 访问 这 些 变 量 。 
私有 变量 包括 函数 的 参数 、 局 部 变量 和 在 函数 内 部 定义 的 其 他 函数 。 来 看 下 面 的 例子 : 

function add (numl, num2){ 


Var sum = numl + num2; 
return sum; 
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在 这 个 函数 内 部 ， 有 3 个 私有 变量 : num1l 、num2 和 sum。 在 函数 内 部 可 以 访问 这 几 个 变量 ， 但 在 
函数 外 部 则 不 能 访问 它们 。 如 果 在 这 个 函数 内 部 创建 一 个 闭 包 ,那么 闭 包 通过 自己 的 作用 域 链 也 可 以 访 
问 这 些 变量 。 而 利用 这 一 点 ， 就 可 以 创建 用 于 访问 私有 变量 的 公有 方法 。 

我 们 把 有 权 访 问 私 有 变量 和 私有 函数 的 公有 方法 称 为 特权 方法 (privileged method )。 有 两 种 在 对 象 
上 创建 特权 方法 的 方式 。 第 一 种 是 在 构造 函数 中 定义 特权 方法 ， 基 本 模式 如 下 。 


function MyObject (){ 




















// 私 有 变量 和 私有 函数 


Var privateVariable = 10; 


function privateFunction()t{ 
return false; 


} 


/ /特权 方法 
this.publicMethod = function ()f{ 
privateVariablet+t+; 


return privateFunction(); 

} 

这 个 模式 在 构造 函数 内 部 定义 了 所 有 私有 变量 和 函数 。 然 后 ， 又 继续 创建 了 能 够 访问 这 些 私 有 成 员 
的 特权 方法 。 能 够 在 构造 函数 中 定义 特权 方法 , 是 因为 特权 方法 作为 闭 包 有 权 访 问 在 构造 函数 中 定义 的 
所 有 变量 和 函数 。 对 这 个 例子 而 言 ， 变 量 privateVariable 和 也 数 privateFunction () 只 能 通过 特 
权 方 法 publicMethod() 来 访问 。 在 创建 Myobject 的 实例 后 ， 除 了 使 用 publicMethod() 这 一 个 途 
径 外 ， 没 有 任何 办 法 可 以 直接 访问 brivatevariable 和 privateFunction()。 

利用 私有 和 特权 成 员 ， 可 以 隐藏 那些 不 应 该 被 直接 修改 的 数据 ， 例 如 : 


function Person (name){ 




















this.getName = function()t{ 
return name; 


}3 


this.setName = function (value) { 
name = value; 
} 
} 


Var person = new Person("Nicholas"); 


alert (person.getName ()); //"Nicholas" 
person.setName ("Greg"); 
alert (person.getName ()); //"Greg" 


PrivilegedMethodExample01.htm 


以 上 代码 的 构造 函数 中 定义 了 两 个 特权 方法 : getName () 和 setName () 。 这 两 个 方法 都 可 以 在 构 
造 函 数 外 部 使 用 ,而 且 都 有 权 访 问 私 有 变量 name。 但 在 Person 构造 函数 外 部 ,没有 任何 办 法 访问 name。 
由 于 这 两 个 方法 是 在 构造 函数 内 部 定义 的 , 它们 作为 闭 包 能 够 通过 作用 域 链 访 问 name。 私 有 变量 name 
在 Person 的 每 一 个 实例 中 都 不 相同 ， 因 为 每 次 调用 构造 函数 都 会 重新 创建 这 两 个 方法 。 不 过 ， 在 构造 





























图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


188 第 7 章 函数 表达 式 





函数 中 定义 特权 方法 也 有 一 个 缺点 , 那 就 是 你 必须 使 用 构造 函数 模式 来 达到 这 个 目的 。 第 6 章 兽 经 讨论 
过 , 构造 函数 模式 的 缺点 是 针对 每 个 实例 都 会 创建 同样 一 组 新 方法 ,而 使 用 静态 私有 变量 来 实现 特权 方 

















法 就 可 以 避免 这 个 问题 。 


7.4.1 静态 私有 变量 
通过 在 私有 作用 域 中 定义 私有 变量 或 函数 ， 同 样 也 可 以 创建 特权 方法 ， 其 基本 模式 如 下 所 示 。 


(function(){ 











// 私 有 变量 和 私有 函数 


Var privateVariable = 10; 


function privateFunction(){ 
return false; 


} 


// 构 造 函 数 
MyObject = function(){ 


3 


// 公 有 /特权 方法 

MyObject .prototype.publicMethod = function()t{ 
privateVvariable+t+; 
return privateFunction(); 


Py (Ns 





这 个 模式 创建 了 一 个 私有 作用 域 ， 并 在 其 中 封装 了 一 个 构造 函数 及 相应 的 方法 。 在 私有 作用 域 中 ， 





这 一 点 体现 了 典型 的 原型 模式 。 需 要 注意 的 是 ,这 个 模式 在 定义 构造 函数 时 并 没有 使 用 函数 声明 ， 而 是 














首先 定义 了 私有 变量 和 私有 函数 ， 然 后 又 定义 了 构造 函数 及 其 公有 方法 。 公 有 方法 是 在 原型 上 定义 的 ， 











使 用 了 函数 表达 式 。 函 数 声 明 只 能 创建 局 部 函数 ,但 那 并 不 是 我 们 想 要 的 。 出 于 同样 的 原因 ， 我们 也 没 
有 在 声明 Myobject 时 使 用 var 关键 字 。 记 住 : 初始 化 未 经 声明 的 变量 ， 总 是 会 创建 一 个 全 局 变量 。 


因此 ，Myobject 就 成 了 一 个 全 局 变量 ， 


给 未 经 声明 的 变量 赋值 会 导致 错误 。 


这 个 模式 与 在 构造 函数 中 定义 特权 方法 的 主要 区 别 , 就 在 于 私有 变量 和 函数 是 
特权 方法 是 在 原型 上 定义 的 ， 因 此 所 有 实例 都 使 用 同一 个 函数 。 而 这 个 特权 方法 ,人 








能 够 在 私有 作用 域 之 外 被 访问 到 。 但 也 要 知道 ， 在 严格 模式 下 











1 实例 共享 的 。 由 于 























保存 着 对 包含 作用 域 的 引用 。 来 看 一 看 下 面 的 代码 。 
电 (function(){ 
Person = function(value)t 


name = value; 


3 


Person.prototype.getName = function(){ 
return name; 


}: 


Person.prototype.setName = function (value) 1{ 
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name = value; 


}) (); 


Var personl = new Person("Nicholas"); 


alert (personl.getName()); //"Nicholas" 
personl.setName ("Greg"); 
alert (personl .getName()); //"Greg" 


Var person2 = new Person("Michael"); 
alert (personl.getName()); //"Michael" 
alert (person2.getName()); //"Michael" 


PrivilegedMethodExample02.htm 


这 个 例子 中 的 Person 构造 函数 与 getName () 和 setName () 方 法 一 样 , 都 有 权 访问 私有 变量 name。 
在 这 种 模式 下 ， 变 量 name 就 变 成 了 一 个 静态 的 、 由 所 有 实例 共享 的 属性 。 也 就 是 说 ， 在 一 个 实例 上 调 
用 setName () 会 影响 所 有 实例 。 而 调用 setName () 或 新 建 一 个 Person 实例 都 会 赋予 name 属性 一 个 
新 值 。 结 果 就 是 所 有 实例 都 会 返回 相同 的 值 。 

以 这 种 方式 创建 静态 私有 变量 会 因为 使 用 原型 而 增进 代码 复 用 ,但 每 个 实例 都 没有 自己 的 私有 变 
量 。 到 底 是 使 用 实例 变量 ， 还 是 静态 私有 变量 ， 最 终 还 是 要 视 你 的 具体 需求 而 定 。 






































多 查找 作用 域 链 中 的 一 个 层次 ,就 会 在 一 定 程度 上 影响 查找 速度 。 而 这 正 是 使 用 


闭 包 和 私有 变量 的 一 个 显明 的 不 足 之 处 。 





7.4.2 ”模块 模式 


前 面 的 模式 是 用 于 为 自 定义 类 型 创建 私有 变量 和 特权 方法 的 。 而 道格拉斯 所 说 的 模块 模式 ( module 
pattern ) 则 是 为 单 例 创建 私有 变量 和 特权 方法 。 所 谓 单 例 (singleton )， 指 的 就 是 只 有 一 个 实例 的 对 象 。 
按照 惯例 ，JavaScript 是 以 对 象 字面 量 的 方式 来 创建 单 例 对 象 的 。 

var singleton = { 

name : value, 


method : function () { 
// 这 里 是 方法 的 代码 








} 
}3 


模块 模式 通过 为 单 例 添加 私有 变量 和 特权 方法 能 够 使 其 得 到 增强 ， 其 语法 形式 如 下 : 


var singleton = function(){ 





// 私 有 变量 和 私有 函数 


Var privateVariable = 10; 
function privateFunction()t{ 


return false; 


} 
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/ /特权 /公有 方法 和 属性 


return { 
publicproperty: true, 


publicMethod : function()t{ 
privateVvariablet++; 
return privateFunction(); 


} () ; 

这 个 模块 模式 使 用 了 一 个 返回 对 象 的 匿名 函数 ,在 这 个 匿名 函数 内 部 , 首先 定义 了 私有 变量 和 函数 。 
然后 ,将 一 个 对 象 字 面 量 作为 函数 的 值 返回 。 返回 的 对 象 字面 量 中 只 包含 可 以 公开 的 属性 和 方法 。 由 于 
这 个 对 象 是 在 匿名 函数 内 部 定义 的 ， 因此 它 的 公有 方法 有 权 访 问 私有 变量 和 函数 。 从 本 质 上 来 讲 , 这 个 
对 象 字 面 量 定 义 的 是 单 例 的 公共 接口 。 这 种 模式 在 需要 对 单 例 进行 某 些 初始 化 ,同时 又 需要 维护 其 私有 
变量 时 是 非常 有 用 的 ， 例 如 : 


《9 var application = function()t 































































































// 私 有 变量 和 函数 


Var components = new Array(); 


// 初 始 化 
components.push (new BaseComponent () ) ; 


/ /公共 
return { 
getComponentCount : function()f{ 
return components.1length; 


}, 


registerComponent : function(component)t{ 
if (typeof component == "object")t{ 
components.push (component); 


ModulePatternExample01.htm 


在 Web 应 用 程序 中 ， 经 常 需要 使 用 一 个 单 例 来 管理 应 用 程序 级 的 信息 。 这 个 简单 的 例子 创建 了 一 
个 用 于 管理 组 件 的 application 对 象 , 在 创建 这 个 对 象 的 过 程 中 ,首先 声明 了 一 个 私有 的 components 
数组 ， 并 向 数组 中 添加 了 一 个 BaseComponent 的 新 实例 ( 在 这 里 不 需要 关心 BaseComponent 的 代码 ， 我 
们 只 是 用 它 来 展示 初始 化 操作 )。 而 返回 对 象 的 getcomponentCount () 和 registercomponent () 方 法 , 都 
是 有 权 访 问 数 组 components 的 特权 方法 。 前 者 只 是 返回 已 注册 的 组 件数 目 ， 后 者 用 于 注册 新 组 件 。 

简 言 之 ,如果 必须 创建 一 个 对 象 并 以 某 些 数据 对 其 进行 初始 化 , 同时 还 要 公开 一 些 能 够 访问 这 些 私 有 
数据 的 方法 , 那么 就 可 以 使 用 模块 模式 。 以 这 种 模式 创建 的 每 个 单 例 都 是 object 的 实例 ， 因 为 最 终 要 通 
过 一 个 对 象 字 面 量 来 表示 它 。 事 实 上 ， 这 也 没有 什么 ; 毕 竞 ， 单 例 通常 都 是 作为 全 局 对 象 存在 的 ， 我们 不 
会 将 它 传递 给 一 个 函数 。 因 此 ， 也 就 没有 什么 必要 使 用 instanceof 操作 符 来 检查 其 对 象 类 型 了 。 
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7.4.3 ”增强 的 模块 模式 


有 人 进一步 改进 了 模块 模式 ， 即 在 返回 对 象 之 前 加 入 对 其 增强 的 代码 。 这 种 增强 的 模块 模式 适合 那 
些 单 例 必须 是 某 种 类 型 的 实例 ， 同 时 还 必须 添加 某 些 属性 和 (或 ) 方法 对 其 加 以 增强 的 情况 。 来 看 下 面 
的 例子 。 


var singleton = function()t{ 














// 私 有 变量 和 私有 函数 


Var privateVariable = 10; 


function privateFunction()t{ 
return false; 


} 
/ /创建 对 象 


var object = new CustomType(); 


/ /添加 特权 /公有 属性 和 方法 
object.publicPproperty = true; 


object.publicMethod = function(){ 
privateVariablet+t+; 


return privateFunction(); 


}3 


/ /返回 这 个 对 象 
return object; 
} (0) 
如 果 前 面 演示 模块 模式 的 例子 中 的 application 对 象 必须 是 BaseComponent 的 实例 ， 那 么 就 可 
以 使 用 以 下 代码 。 


CD Var application = function()1{ 





// 私 有 变量 和 函数 


Var components = new Array(); 


// 初 始 化 
components.push (new BaseComponent () ) ; 


/ /创建 application 的 一 个 局 部 副本 
Var app = new BaseComponent () ; 


/ /公共 接口 
app.getComponentCount = function(){ 
return components.1length; 


3 


app.registerComponent = function(component)t 
if (typeof component == "object")f{ 
components.push (component); 
} 
二 


// 返 回 这 个 副本 
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return app; 


} 00); 


ModuleAugmentationPatternExample01.htm 


在 这 个 重 写 后 的 应 用 程序 (application ) 单 例 中 ， 首 先 也 是 像 前 面 例子 中 一 样 定义 了 私有 变量 。 主 
要 的 不 同 之 处 在 于 命名 变量 app 的 创建 过 程 , 因为 它 必须 是 Basecomponent 的 实例 。 这 个 实例 实际 上 


是 application 对 象 的 局 部 变量 版 。 此 后 ， 我 们 又 为 app 对 象 添加 了 能 够 访问 私有 变量 的 公有 方法 。 























最 后 一 步 是 返回 app 对 象 ， 结 果 仍 然 是 将 它 赋 值 给 全 局 变量 application。 


7.5 小 结 





在 JavaScript 编程 中 ， 函 数 表 达 式 是 一 种 非常 有 用 的 技术 。 使 用 函数 表达 式 可 以 无 须 对 函数 命名 ， 














从 而 实现 动态 编 


程 。 匿 名 函数 ， 也 称 为 拉 姆 达 函 数 ， 是 一 种 使 用 JavaScript 函数 的 强大 方式 。 以 下 总 结 














了 函数 表达 式 的 特点 。 





口 函数 表达 式 不 同 于 函数 声明 。 函 数 声明 要 求 有 名 字 ， 但 函数 表达 式 不 需要 。 没 有 名 字 的 函数 表 
达 式 也 叫做 匿名 函数 。 

口 在 无 法 确定 如 何 引用 函数 的 情况 下 ， 递 归 函 数 就 会 变 得 比较 复杂 ; 

口 递归 函数 应 该 始终 使 用 arguments .callee 来 递归 地 调用 自身 , 不 要 使 用 函数 名 一 一 函数 名 可 





























能 会 发 生变 化 。 


BES 


当 在 函数 内 部 定义 了 其 他 函数 时 ， 就 创建 了 闭 包 。 闭 包 有 权 访 问 包 含 函 数 内 部 的 所 有 变量 ,原理 


如 下 。 





口 在 后 台 执 行 环境 中 ，, 闭 包 的 作用 域 链 包 含 着 它 自 己 的 作用 域 、 包 含 函 数 的 作用 域 和 全 局 作用 域 。 
口 通常 ， 函 数 的 作用 域 及 其 所 有 变量 都 会 在 函数 执行 结束 后 被 销毁 。 

口 但 是 ， 当 函数 返回 了 一 个 财 包 时 ， 这 个 函数 的 作用 域 将 会 一 直 在 内 存 中 保存 到 闭 包 不 存在 为 止 。 
使 用 闭 包 可 以 在 JavaScript 中 模仿 块 级 作用 域 ( JavaScript 本 身 没 有 块 级 作用 域 的 概念 )， 要 点 如 下 。 


























口 创建 并 立即 调用 一 个 函数 ,这 样 既 可 以 执行 其 中 的 代码 ， 又 不 会 在 内 存 中 留 下 对 该 函数 的 引用 。 
口 结果 就 是 函数 内 部 的 所 有 变量 都 会 被 立即 销毁 一 一 除非 将 某 些 变量 赋值 给 了 包含 作用 域 ( 即 外 























部 作用 域 ) 中 的 变量 。 
闭 包 还 可 以 用 于 在 对 象 中 创建 私有 变量 ， 相 关 概 念 和 要 点 如 下 。 

















口 即使 JavaScript 中 没有 正式 的 私有 对 象 属 性 的 概念 , 但 可 以 使 用 闭 包 来 实现 公有 方法 , 而 通过 公 
有 方法 可 以 访问 在 包含 作用 域 中 定义 的 变量 。 
口 有 权 访 问 私 有 变量 的 公有 方法 叫做 特权 方法 。 


























口 可 以 使 用 构造 函数 模式 、 原 型 模式 来 实现 自 定义 类 型 的 特权 方法 ， 也 可 以 使 用 模块 模式 、 增 强 











的 模块 模式 来 实现 单 例 的 特权 方法 。 
JavaScript 中 的 函数 表达 式 和 闭 包 都 是 极其 有 用 的 特性 ， 利 用 它们 可 以 实现 很 多 功能 。 不 过 ， 因 为 





一 训 


创建 闭 包 必 须 维 





























护 额 外 的 作用 域 ， 所 以 过 度 使 用 它们 可 能 会 占用 大 量 内 存 。 
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第 名 二 
BOM 


本 章 内 容 

口 理解 window 对 象 一 一 BOM 的 核心 
口 控制 窗口 、 框 架 和 弹出 窗口 

口 利用 location 对 象 中 的 页 面 信息 
口 使 用 navigator 对 象 了 解 浏 览 旨 









































EE 是 JavaScript 的 核心 ， 但 如 果 要 在 Web 中 使 用 JavaScript， 那 么 BOM ( 浏览 器 对 象 模 
型 ) 则 无 疑 才 是 真正 的 核心 。BOM 提供 了 很 多 对 象 ， 用 于 访问 浏览 器 的 功能 ， 这 些 功 能 与 任 
何 网 页 内 容 无 关 。 多 年 来 ， 缺 少 事实 上 的 规范 导致 BOM 既 有 意思 又 有 问题 ， 因 为 浏览 器 提供 商会 按照 各 
自 的 想法 随意 去 扩展 它 。 于 是 , 浏览 器 之 间 共 有 的 对 象 就 成 为 了 事实 上 的 标准 。 这 些 对 象 在 浏览 器 中 得 以 
存在 ,很 大 程度 上 是 由 于 它们 提供 了 与 浏览 器 的 互 操作 性 。W3C 为 了 把 浏览 器 中 JavaScript 最 基本 的 部 分 
标准 化 ,已 经 将 BOM 的 主要 方面 纳入 了 HTML5 的 规范 中 。 


























8.1 window 对 象 


BOM 的 核心 对 象 是 window， 它 表示 浏览 器 的 一 个 实例 。 在 浏览 器 中 ，window 对 象 有 双重 角色 ， 
它 既 是 通过 JavaScript 访问 浏览 器 窗口 的 一 个 接口 ， 又 是 ECMAScript 规定 的 Global 对 象 。 这 意味 着 
在 网 页 中 定义 的 任何 一 个 对 象 、 变 量 和 也 数 ， 都 以 window 作为 其 Global 对 象 ， 因 此 有 权 访 问 
parseInt() 等 方法 。 


8.1.1 全 局 作用 域 


由 于 window 对 象 同时 扮演 着 ECMAScript 中 Global 对 象 的 角色 ， 因 此 所 有 在 全 局 作用 域 中 声明 
的 变量 、 函 数 都 会 变 成 window 对 象 的 属性 和 方法 。 来 看 下 面 的 例子 。 
var age = 29; 


function sayAge(){ 
alert (this.age); 






































} 


alert (window.age); //29 
SayAge () ; /729 
windqow.sayaAge() ; //29 


我 们 在 全 局 作用 域 中 定义 了 一 个 变量 age 和 一 个 函数 sayage () , 它们 被 自动 归 在 了 window 对 象 
名 下 。 于 是 , 可 以 通过 window.age 访问 变量 age, 可 以 通过 window.sayAge() 访 问 隙 数 sayAge ()。 
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的 结果 。 











抛 开 全 局 变量 会 成 为 window 对 象 的 属性 不 谈 , 定义 全 局 变量 与 在 window 对 象 上 直接 定义 属性 











由 于 sayAge () 存在 于 全 局 作用 域 中 ， 因 此 this .age 被 映射 到 window.age， 最 终 显示 的 仍然 是 正确 


还 


是 有 一 点 差别 : 全 局 变量 不 能 通过 aelete 操作 符 删除 ， 而 直接 在 wingow 对 象 上 的 定义 的 属性 可 以 。 








例如 : 


Var age = 29; 
window.color = "red"; 


// 在 IE < 9 时 抛 出 错误 ， 在 其 他 所 有 浏览 器 中 都 返回 false 


delete window.age; 





// 在 IE < 9 时 抛 出 错误 ， 在 其 他 所 有 浏览 器 中 都 返回 true 


delete window.color; //returns true 


alert (window.age); /7/29 
alert (window.color); //undefined 


DeleteOperatorExample01.htm 


刚才 使 用 var 语句 添加 的 window 属性 有 一 个 名 为 [ [configurable] 1] 的 特性 ， 这 个 特性 的 值 被 
设置 为 false, 因 此 这 样 定义 的 属性 不 可 以 通过 aelete 操 作 符 删除 -IE8 及 更 早 版 本 在 遇 到 使 用 aelete 
删除 window 属性 的 语句 时 ， 不 管 该 属性 最 初 是 如 何 创建 的 ， 都 会 抛 出 错误 ， 以 示警 告 。IE9 及 更 高 版 
































本 不 会 抛 出 错误 。 


另外 ,还 要 记 住 一 件 事 : 尝试 访问 未 声明 的 变量 会 抛 出 错误 ,但 是 通过 查询 window 对 象 ， 可 以 知 








道 某 个 可 能 未 声明 的 变量 是 否 存在 。 例 如 : 


// 这 里 会 抛 出 错误 ， 因 为 oldValue 未 定义 
var newValue = oldValue; 


// 这 里 不 会 抛 出 错误 ， 因 为 这 是 一 次 属性 查询 
//newValue 的 值 是 undefined 
Var newValue = window.oldValue; 

















本 章 后 面 将 要 讨论 的 很 多 全 局 JavaScript 对 象 (如 location 和 navigator ) 实际 上 都 是 window 





对 象 的 属性 。 

















Windows Mobile 平台 的 下 浏览 器 不 允许 通过 window.property = value 之 类 
的 形式 ， 直 接 在 window 对 象 上 创建 新 的 属性 或 方法 。 可 是 ， 在 全 局 作用 域 中 声明 的 
所 有 变量 和 函数 ， 照 样 会 变 成 window 对 象 的 成 员 。 


8.1.2 窗口 关系 及 框架 














如 果 页 面 中 包含 框架 , 则 每 个 框架 都 拥有 自己 的 window 对 象 , 并 且 保 存在 frames 集合 中 ,在 frames 
集合 中 ， 可 以 通过 数值 索引 (从 0 开始 ， 从 左 至 右 ， 从 上 到 下 ) 或 者 框架 名 称 来 访问 相应 的 window 对 

















象 。 每 个 window 对 象 都 有 一 个 name 属性 ， 其 中 包含 框架 的 名 称 。 下 面 是 一 个 包含 框架 的 页 面 : 
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<html> 
<head> 
<title>Frameset Example</title> 
</head> 
<frameset rows="160,*"> 
<frame src="frame.htm" name="topFrame"> 
<frameset cols="50%,50%"> 
<frame src="anotherframe.htm" name="leftFrame"> 
<frame src="yetanotherframe.htm" name="rightFrame"> 
</frameset> 
</frameset> 
</html> 





FramesetExample01.htm 


以 上 代码 创建 了 一 个 框架 集 ， 其 中 一 个 框架 居 上 ， 两 个 框架 居 下 。 对 这 个 例子 而 言 ， 可 以 通过 
window.frames[0] 或 者 window.frames["topFrame"] 来 引用 上 方 的 框架 。 不 过 ， 钨 怕 你 最 好 使 用 
top 而 非 window 来 引用 这 些 框 架 ( 例如， 通过 top .frames[0] )。 

我 们 知道 ，top 对 象 始终 指 问 最 高 ( 最 外 ) 层 的 框架 ,也 就 是 浏览 带 和 窗口 。 使 用 它 可 以 确保 在 一 个 
框架 中 正确 地 访问 另 一 个 框架 。 因 为 对 于 在 一 个 框架 中 编写 的 任何 代码 来 说 ， 其 中 的 window 对 象 指向 
的 都 是 那个 框架 的 特定 实例 ， 而 非 最 高 层 的 框架 。 图 8-1 展示 了 在 最 高 层 窗 口中 ， 通 过 代码 来 访问 前 面 
例子 中 每 个 框架 的 不 同方 式 。 
















































































window.frames[O] 

window.frames["topFrame"] 

top.frames[O] 

top.frames["topFrame"] 

frames[0] 

frames["topFrame"] 

window.frames[1] window.frames[2] 

window.frames["leftFrame"] window.frames["rightFrame"] 

top.frames[1] top.frames[2] 

top.frames["leftFrame"] top.frames["rightFrame"] 

frames[1] frames[2] 

frames["leftFrame"] frames["rightFrame"] 
8-1 


与 top 相对 的 另 一 个 window 对 象 是 parent。 顾名思义 , parent ( 父 ) 对 象 始终 指向 当前 框架 的 
直接 上 层 框架 。 在 某 些 情况 下 ，parent 有 可 能 等 于 top; 但 在 没有 框架 的 情况 下 ，parent 一 定 等 于 
top ( 此 时 它们 都 等 于 window )。 再 看 下 面 的 例子 。 

<html> 


<head> 
<title>Frameset Example</title> 
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</head> 
<frameset rows="100,*"> 
<frame src="frame.htm" name="topFrame"> 
<frameset cols="50%,50%"> 
<frame src="anotherframe.htm" name="leftFrame"> 


<frame src="anotherframeset.htm" name="rightFrame"> 
</frameset> 


</frameset> 
</html> 


这 个 框架 集中 的 一 个 框架 包含 了 另 一 个 框架 集 ， 该 框架 集 的 代码 如 下 所 示 。 
<html> 
<head> 





<title>Frameset Example</title> 
</head> 


<frameset cols="50%,50%"> 
<frame src="red.htm" name="redFrame"> 


<frame src="blue.htm" name="blueFrame"> 
</frameset> 


</html> 


浏览 





framesetl.htm 


anotherframeset.htm 


器 在 加 载 完 第 一 个 框架 集 以 后 , 会 继续 将 第 二 个 框架 集 加 载 到 rightFrame 中 。 如 果 代 码 位 于 





redFrame (或 plueFrame ) 中 ,那么 parent 对 象 指 向 的 就 是 zightEFrameo 可 是 ， 如 果 代 码 位 于 
topFrame 中 ， 则 parent 指向 的 是 top， 因 为 topFrame 的 直接 上 层 框 架 就 是 最 外 层 框架 。 图 8-2 展 














示 了 在 将 前 面 例子 加 载 到 浏览 器 之 后 ， 不 同 window 对 象 的 值 。 
topFrame 


window name = [topFrame 
top.name = 
parent .name 一 


leftFrame redFrame blueFrame 


window name — leftFrame 





| 
|window name — redFrame [window name - blueFrame 
top.name = ltop.name = 


[parcnt name = Jparcnt name = liightTrame | 


ltopname = | 





lparcnt name = lrightFrame | 














图 8-2 
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注意 ,除非 最 高 层 窗口 是 通过 window.open () 打 开 的 (本 章 后 面 将 会 讨论 ), 否则 其 windqow 对 象 


的 name 属性 不 会 包含 任何 值 。 





与 框架 有 关 的 最 后 一 个 对 象 是 self， 它 始终 指向 window; 实际 上 ，self 和 window 对 象 可 以 互 
换 使 用 。 引 入 self 对 象 的 目的 只 是 为 了 与 top 和 parent 对 象 对 应 起 来 ， 因 此 它 不 格外 包含 其 他 值 。 
所 有 这 些 对 象 都 是 window 对 象 的 属性 , 可 以 通过 window.parent、window.top 等 形式 来 访问 。 
同时 ,这 也 意味 着 可 以 将 不 同 层次 的 window 对 象 连 级 起 来 ,例如 window.parent .parent.frames[0]。 
























影响 到 对 跨 框架 传递 的 对 和 象 使 用 instanceof 操作 符 。 


8.1.3 窗口 位 置 
用 来 确定 和 修改 window 对 象 位 置 的 属性 和 方法 有 很 多 。IE、Safari、Opera 和 














在 使 用 框架 的 情况 下 ,浏览 器 中 会 存在 多 个 Global 对 象 。 在 每 个 框架 中 定义 的 
全 局 变量 会 自动 成 为 框架 中 winadow 对 象 的 属性 。 由 于 每 个 window 对 象 都 包含 原生 
类 型 的 构造 函数 ， 因 此 每 个 框架 都 有 一 套 自 己 的 构造 函数 ， 这 些 构造 函数 一 一 对 应 ， 
但 并 不 相等 。 例 如 ，top .Object 并 不 等 于 top.frames[0] .Object。 这 个 问题 会 



















Chrome 都 提供 了 








screenLeft 和 screenTop 属性 ,分 别 用 于 表示 窗口 相对 于 屏幕 左边 和 上 边 的 位 置 。Firefox 则 在 
screenx 和 screeny 属性 中 提供 相同 的 窗口 位 置信 息 , Safari 和 Chrome 也 同时 支持 这 两 个 属性 -Opera 
虽然 也 支持 screenX 和 screenyY 属性 ,但 与 screenLeft 和 screenTop 属性 并 不 对 应 ， 因 此 建议 大 


























家 不 要 在 Opera 中 使 用 它们 。 使 用 下 列 代 码 可 以 跨 浏览 器 取得 窗口 左边 和 上 边 的 位 置 


Var leftPos = (typeof window.screenLeft == "number") ? 
CY) window.screenLeft : window.screenx; 
Var topPos = (typeof window.screenTop == "number") ? 


window.screenTop : window.screenYyY; 











[e] 


WindowPositionExample01.htm 


这 个 例子 运用 二 元 操作 符 首 先 确定 screenLeft 和 screenTop 属性 是 否 存 在 ， 
Safari、Opera 和 Chrome 中 )， 则 取得 这 两 个 属性 的 值 。 如 果 不 存 在 (在 Firefox 中 )， 
和 screenY 的 值 。 











如 果 是 (在 正 、 


则 取得 screenx 


在 使 用 这 些 值 的 过 程 中 ， 还 必须 注意 一 些小 问题 。 在 卫 、Opera 中 ，screenLeft 和 screenTop 中 保存 
的 是 从 屏幕 左边 和 上 边 到 由 window 对 象 表示 的 页 面 可 见 区 域 的 距离 。 换 句 话 说， 如 果 window 对 象 是 
































最 外 层 对 象 , 而 且 浏 览 器 窗口 紧 贴 屏幕 最 上 端 即 y 轴 坐标 为 0, 那么 screenTop 





的 值 就 是 位 于 页 首 











可 见 区 域 上 方 的 浏览 器 工具 栏 的 像素 高 度 。 但 是 , 在 Chrome、Firefox 和 Safari 中 , screenY 或 screenTop 
中 保存 的 是 整个 浏览 器 窗口 相对 于 屏幕 的 坐标 值 ， 即 在 窗口 的 y 轴 坐标 为 0 时 返回 0。 


更 让 人 捉摸 不 透 是 ，Firefox 、Safari 和 Chrome 始终 返回 页 面 中 每 个 框架 的 








top.screenx 和 


top.screenY 值 。 即 使 在 页 面 由 于 被 设置 了 外 边 距 而 发 生 偏 移 的 情况 下 ， 相 对 于 window 对 象 使 用 











screenX 和 screeny 每 次 也 都 会 返回 相同 的 值 。 而 下 和 Opera 则 会 给 出 框架 相对 于 
标 值 。 

















屏幕 边界 的 精确 坐 





最 终结 果 , 就 是 无 法 在 跨 浏览 器 的 条 件 下 取得 窗口 左边 和 上 边 的 精确 坐标 值 。 然 而, 使 用 moveTo () 
和 moveBy () 方 法 倒是 有 可 能 将 窗口 精确 地 移动 到 一 个 新 位 置 。 这 两 个 方法 都 接收 两 个 参数 ， 其 中 
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moveTo () 接 收 的 是 新 位 置 的 x 和 y 坐标 值 ， 而 moveBy () 接收 的 是 在 水 平和 垂直 方向 上 移动 的 像素 数 。 


下 


面 来 看 几 个 例子 : 
// 将 窗口 移动 到 屏幕 左上 角 


window.moveTo (0,0); 


// 将 窗 向 下 移动 100 像素 
window.moveBy (0,100); 


// 将 窗口 移动 到 (200,300) 
window.moveTo (200,300); 


// 将 窗口 向 左 移动 50 像素 


window.moveBy (-50,0); 


需要 注意 的 是 ， 这 两 个 方法 可 能 会 被 浏览 器 禁用 ; 而 且 ， 在 Opera 和 下 7(〈 及 更 高 版 本 ) 中 默认 就 





























Fou 


8. 


禁用 的 。 另 外 ， 这 两 个 方法 都 不 适用 于 框架 ， 只 能 对 最 外 层 的 window 对 象 使 用 。 
1.4 窗口 大 小 


路 浏览 器 确定 一 个 窗口 的 大 小 不 是 一 件 简 单 的 事 。IE9+、Firefox 、Safari 、Opera 和 Chrome 均 为 此 提 























供 
中 
某 
则 





innerwidth、innerHeight 返回 相同 的 值 ， 即 视 口 (viewport ) 大 小 而 非 浏览 咒 窗 口 大 小 。 


的 





了 4 个 属性 : innerwiqdth、innerHeight、outerWigdth 和 outerHeight。 在 IE9+、Safari 和 Firefox 
，outerWidth 和 outerHeight 返回 浏览 器 窗口 本 身 的 尺寸 (无论 是 从 最 外 层 的 window 对 象 还 是 从 
个 框架 访问 ), 在 Opera 中 ,这 两 个 属性 的 值 表示 页 面 视图 容器 "的 大 小 ,而 innerwidth 和 innerHeight 
表示 该 容器 中 页 面 视 图 区 的 大 小 ( 减 去 边框 宽度 )。 在 Chrome 中 ，outerWidth、outerHeight 与 






































IE8 及 更 早 版 本 没有 提供 取得 当前 浏览 器 窗口 尺寸 的 属性 ; 不 过 ， 它 通过 DOM 提供 了 页 面 可 见 区 域 
相关 信息 。 


在 IE、Firefox、Safari、Opera 和 Chrome 中 ，dqocument .qdocumentElement .clientwiath 和 














document .documentElement .clientHeight 中 保存 了 页 面 视 口 的 信息 。 在 IE6 中 , 这 些 属性 必须 在 


标 























准 模 式 下 才 有 效 ; 如 果 是 混杂 模式 ,就 必须 通过 aocument .body.clientwidth 和 document .body. 


clientHeight 取得 相同 信息 。 而 对 于 混杂 模式 下 的 Chrome， 则 无 论 通过 aocument .documentEle- 
ment 还 是 document .body 中 的 clientwiath 和 clientHeignht 属性 ， 都 可 以 取得 视 口 的 大 小 。 



































虽然 最 终 无 法 确定 浏览 器 窗口 本 身 的 大 小 ， 但 却 可 以 取得 页 面 视 口 的 大 小 ， 如 下 所 示 。 


Var pageWidth = window.innerWidth, 
pageHeight = window.innerHeight; 





if (typeof pageWidth != "number")t{ 
IE (document.compatMode == "CSSlCompat")t{ 
pageWidth = document .documentElement .clientWwidth; 
pageHeight = document .documentElement.clientHeight; 
} else { 
pageWidth = document .body.clientWwidth; 
pageHeight = document.body.clientHeight; 








WindowSizeExample01.htm 





GD 这 里 所 谓 的 “页 面 视图 容器 ” 指 的 是 Opera 中 单个 标签 页 对 应 的 浏览 器 窗口 。 
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在 以 上 代码 中 ， 我 们 首先 将 window.innerwidth 和 window.innerHeight 的 值 分 别 赋 给 了 
pageWidth 和 pageHeight。 然 后 检查 pagewidth 中 保存 的 是 不 是 一 个 数值 ; 如果 不是 ， 则 通过 检查 
document .compatMode ( 这 个 属性 将 在 第 10 章 全 面 讨论 ) 来 确定 页 面 是 否 处 于 标准 模式 。 如 果 是 ， 则 
分 别 使 用 document .documentElement .clientwidth 和 document .documentElement .client- 
Height 的 值 ,否则 , 就 使 用 document .boqy.clientwiath 和 aocument.body.clientHeight 的 值 。 

对 于 移动 设备 , window. innerwidth 和 window.innerHeight 保存 着 可 见 视 口 , 也 就 是 屏幕 上 可 
见 页 面 区 域 的 大 小 。 移 动 正 浏览 器 不 支持 这 些 属性 ， 但 通过 document .documentElement .client- 
width 和 aocument .documentElement .clientHeihot 提供 了 相同 的 信息 。 随 着 页 面 的 缩放 ,这些 值 
也 会 相应 变化 。 

在 其 他 移动 浏览 器 中 ，dqocument .documentElement 度量 的 是 布局 视 口 ， 即 泻 染 后 页 面 的 实际 大 
小 〈 与 可 见 视 口 不 同 ， 可 见 视 口 只 是 整个 页 面 中 的 一 小 部 分 ) 移动 正 浏览 器 把 布局 视 口 的 信息 保存 在 
document .body.clientWidth 和 document .bodqy.clientHeight 中 。 这 些 值 不 会 随 着 页 面 缩放 变化 。 
1 于 与 桌面 浏览 器 间 存 在 这 些 差 异 , 最 好 是 先 检测 一 下 用 户 是 否 在 使 用 移动 设备 , 然后 再 决定 使 用 
哪个 属性 。 






































































































有 关 移动 设备 视 口 的 话题 比较 复杂 ,有 很 多 非常 规 的 情形 ,也 有 各 种 各 样 的 建议 。 
移动 开发 咨询 师 Peter-Paul Koch 记述 了 他 对 这 个 问题 的 研究 : http://t.cn/zZOZs0Tz。 如 
果 你 在 做 移动 Web 开发 ， 推 荐 你 读 一 读 这 篇 文章 。 






另外 , 使 用 resizeTro() 和 resizeBy() 方 法 可 以 调整 浏览 需 窗 口 的 大 小 。 这 两 个 方法 都 接收 两 个 
参数 ， 其 中 resizeTo () 接收 浏览 器 窗口 的 新 宽度 和 新 高 度 ， 而 resizeBy () 接收 新 窗口 与 原 窗口 的 宽 
度 和 高 度 之 差 。 来 看 下 面 的 例子 。 


// 调 整 到 100x100 
window.resizeTo(100, 100); 

















// 调 整 到 200x150 
window.resizeBy(100, 50); 


// 调 整 到 300x300 
window.resizeTo(300, 300); 


需要 注意 的 是 ， 这 两 个 方法 与 移动 窗口 位 置 的 方法 类 似 ， 也 有 可 能 被 浏览 器 禁用 ; 而 且 ， 在 Opera 
和 IE7 (及 更 高 版 本 ) 中 默认 就 是 禁用 的 。 另 外 ， 这 两 个 方法 同样 不 适用 于 框架 ， 而 只 能 对 最 外 层 的 
window 对 象 使 用 。 


8.1.5 ”导航 和 打开 窗口 


使 用 winaow.open () 方 法 既 可 以 导航 到 一 个 特定 的 URL,， 也 可 以 打开 一 个 新 的 浏览 需 窗 口 。 这 个 
方法 可 以 接收 4 个 参数 : 要 加 载 的 URL、 窗 口 目 标 、 一 个 特性 字符 串 以 及 一 个 表示 新 页 面 是 否 取代 浏览 
器 历史 记录 中 当前 加 载 页 面 的 布尔 值 。 通 常 只 须 传 递 第 一 个 参数 ， 最 后 一 个 参数 只 在 不 打开 新 窗口 的 情 
况 下 使 用 。 

如 果 为 window.open () 传递 了 第 二 个 参数 ， 而 且 该 参数 是 已 有 窗口 或 框架 的 名 称 ， 那 么 就 会 在 具 
有 该 名 称 的 窗口 或 框架 中 加 载 第 一 个 参数 指定 的 URL。 看 下 面 的 例子 。 
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// 等 同 于 < a href="http://www.wrox.com" 


window.open ("http://www.wFroX .Com/"， 


调用 这 行 代 码 , 就 如 同 用 户 单 击 了 href 属性 为 http:/www.wrox.com/, target 属 怕 
的 链接 。 如 果 有 一 个 名 叫 "topFrame" 的 窗口 或 者 框架 ， 就 会 在 该 窗口 或 框架 加 载 这 个 URL; 否则 ， 
会 创建 一 个 新 窗口 并 将 其 命 


称 : _self、 _parent、 
1. 弹出 窗口 
如 果 给 








打开 一 个 带 有 全 部 


一 根据 浏览 需 设 置 )。 在 不 打开 新 窗 





window.open!l 


据 在 第 三 个 参数 位 置 上 传人 的 字 


() 传递 的 第 二 











名 为 "七 OPETame" 。 山 
_top 或 _plank。 


target="topFrame"></a> 
"topFrame"); 




















个 参数 并 不 是 一 个 已 经 存在 的 窗口 或 框架 ， 
符 串 创建 一 个 新 窗口 或 3 

































































生 为 " topFrame" 


就 


外 ， 第 二 个 参数 也 可 以 是 下 列 任何 一 个 特殊 的 窗口 名 


那么 该 方法 就 会 根 


所 标签 页 。 如 果 没 有 传人 第 三 个 参数 , 那么 就 会 
著 认 设置 (工具 栏 、 地 址 栏 和 状态 栏 等 ) 的 新 浏览 器 窗口 〈 或 者 打开 一 个 新 标签 页 一 
口 的 情况 下 ， 会 忽略 第 三 个 参数 。 

































































































































































第 三 个 参数 是 一 个 逗号 分 隔 的 设置 字符 串 ， 表 示 在 新 窗口 中 都 显示 哪些 特性 。 下 表 列 出 了 可 以 出 现 
在 这 个 字符 串 中 的 设置 选项 
设 置 值 说 明 
fullscreen yes 或 no 表示 浏览 需 窗 口 是 否 最 大 化 。 仅 限 正 
height 数值 表示 新 窗口 的 高 度 。 不 能 小 于 100 
left 数值 表示 新 窗口 的 左 坐 标 。 不 能 是 负 值 
location yes 或 no 表示 是 否 在 浏览 央 窗 口中 显示 地 址 栏 。 不 同 浏览 器 的 默认 值 不 同 。 如 果 
设置 为 no， 地 址 栏 可 能 会 隐藏 ， 也 可 能 会 被 禁用 ( 取决 于 浏览 器 ) 
menubar yes 或 no 表示 是 否 在 浏览 器 窗口 中 显示 菜单 栏 。 默 认 值 为 no 
resizable yes 或 no 表示 是 否 可 以 通过 拖 动 浏览 器 窗口 | 默认 值 为 no 
scrollbars yes 或 no 表示 如 果 内 容 在 视 口中 显示 不 下 ， 是 否 人 允许 滚动 。 默 认 值 为 no 
RS yes 或 no 表示 是 否 在 浏览 器 窗 i 默认 值 为 no 
toolbar yes 或 no 表示 是 否 在 浏览 器 窗口 中 显示 工具 栏 。 默 认 值 为 no 
Sep 数值 表示 新 窗口 的 上 坐标 。 不 能 是 负 值 
wiath 数值 表示 新 窗口 的 宽度 。 不 能 小 于 100 














表 中 所 列 的 部 分 或 全 部 设置 选项 ， 都 可 以 通过 逗号 分 隔 的 名 值 对 列表 来 指定 


表示 ( 注意 ， 


整个 特性 字 


windqow.open(" 


符 串 中 不 允许 出 现 空格 )， 


http://www.wrox.com/" 


如 下 面 的 例子 所 示 。 


, "WroxWindow", 


"height=400,width=400,top=10, left=10,resizable=yes"); 


这 行 代码 会 打开 一 个 新 的 可 以 调整 大 小 的 窗 


和 左边 各 10 像素 。 


window.open () 方 法 会 
我 们 可 以 对 其 进行 更 多 探 人 
小 或 移动 位 置 ， 但 却 允 许 我 们 针对 通过 window.open () 
可 以 像 操 作 其 他 窗 











回 的 对 象 ， 
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返回 一 个 指 
央 。 例 如 ， 有 些 浏 


口 一 样 操作 新 





口 ， 告 














向 新 窗口 的 引用 。 引 月 








其 中 , 名 值 对 以 等 号 


窗口 初始 大 小 为 400 x 400 像素 ， 并 且 距 屏幕 上 沿 


日 的 对 象 与 其 他 window 对 象 大 致 相似 , 但 
览 器 在 默认 情况 下 可 能 不 允许 我 们 针对 主 浏览 咒 窗 





口 调整 大 








创建 的 窗 
口 ， 如 下 所 示 。 











打开 的 窗 





口 调整 大 小 或 移动 位 置 。 通 过 这 个 返 
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Var wroxWin = window.open("http://www.wrox.com/", "wroxWindow", 
"height=400,width=400,top=10,1left=10,resizable=yes"); 


/ /调整 大 小 


wroxWin.resizeTo(500,500); 


/ /移动 位 置 


wroxWin.moveTo(100,100); 
调用 close () 方 法 还 可 以 关闭 新 打开 的 窗口 。 
wroxWin.close(); 


但 是 ， 这 个 方法 仅 适用 于 通过 window.open () 打开 的 弹出 窗口 。 对 于 浏览 器 的 主 窗口 ， 如 果 没 有 
得 到 用 户 的 允许 是 不 能 关闭 它 的 。 不 过 ， 弹 出 窗口 倒是 可 以 调用 top .close() 在 不 经 用 户 允 许 的 情况 
下 关闭 自己 。 弹 出 窗口 关闭 之 后 ， 窗 口 的 引用 仍然 还 在 , 但 除了 像 下 面 这 样 检测 其 closea 属性 之 外 ， 
已 经 没有 其 他 用 处 了 。 


wroxWin.close(); 
alert (wroxWin.closed); //true 


新 创建 的 window 对 象 有 一 个 opener 属性 ， 其 中 保存 着 打开 它 的 原始 窗口 对 象 。 这 个 属性 只 在 弹出 
窗口 中 的 最 外 层 window 对 象 (top ) 中 有 定义 ， 而 且 指 向 调用 window.open() 的 窗口 或 框架 。 例 如 : 


Var wroxWin = window.open("http://ww.wrox.com/", "wroxWindow", 
"height=400,width=400,top=10, left=10,resizable=yes"); 
























































alert (wroxWin.opener == window); //true 
虽然 弹出 窗口 中 有 一 个 指针 指向 打开 它 的 原始 窗口 ， 但 原始 窗口 中 并 没有 这 样 的 指针 指向 弹出 窗 
口 。 窗 口 并 不 跟踪 记录 它们 打开 的 弹出 窗口 ， 因 此 我 们 只 能 在 必要 的 时 候 自己 来 手动 实现 跟踪 。 

有 些 浏览 器 (如 IE8 和 Chrome ) 会 在 独立 的 进程 中 运行 每 个 标签 页 。 当 一 个 标签 页 打开 另 一 个 标 
签 页 时 ,如 果 两 个 window 对 象 之 间 需 要 彼此 通信 ,那么 新 标签 页 就 不 能 运行 在 独立 的 进程 中 。 在 Chrome 
中 ,将 新 创建 的 标签 页 的 opener 属性 设置 为 null1， 即 表示 在 单独 的 进程 中 运行 新 标签 页 ， 如 下 所 示 。 


Var wroxWin = window.open("http://ww.wrox.com/", "wroxWindow", 
"height=400,width=400,top=10,1left=10,resizable=yes"); 















































wroxWin.opener = null; 


将 opener 属性 设置 为 nul1l 就 是 告诉 浏览 器 新 创建 的 标签 页 不 需要 与 打开 它 的 标签 页 通信 ， 因 此 
可 以 在 独立 的 进程 中 运行 。 标 签 页 之 间 的 联系 一 旦 切断 ， 将 没有 办 法 恢复 。 

2. 安全 限制 

曾经 有 一 段 时 间 , 广告 商 在 网 上 使 用 弹出 窗口 达到 了 和 肆 无 忌 刁 的 程度 。 他 们 经 常 把 弹出 窗口 打扮 成 
系统 对 话 框 的 模样 ， 引 诱 用 户 去 点 击 其 中 的 广告 。 由 于 看 起 来 像 是 系统 对 话 框 ， 一 般 用 户 很 难 分 辩 是 真 
是 假 。 为 了 解决 这 个 问题 ， 有 些 浏览 器 开始 在 弹出 窗口 配置 方面 增加 限制 。 

Windows XP SP2 中 的 IE6 对 弹出 窗口 施加 了 多 方面 的 安全 限制 , 包括 不 允许 在 屏幕 之 外 创建 弹出 窗 
口 、 不 允许 将 弹出 窗口 移动 到 屏幕 以 外 、 不 允许 关闭 状态 栏 等 。IE7 则 增加 了 更 多 的 安全 限制 ， 如 不 允 
em 默认 情况 下 不 允许 移动 弹出 窗口 或 调整 其 大 小 。Firefox 1 从 一 开始 就 不 支持 修改 状态 栏 ， 
因此 无 论 给 window.open() 传 入 什么 样 的 特性 字符 串 ， 弹 出 窗口 中 都 会 无 一 例外 地 显示 状态 栏 。 后 来 
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的 Firefox 3 又 强制 始终 在 弹出 窗口 中 显示 地 址 栏 。Opera 只 会 在 主 浏览 旨 窗 口中 打开 弹出 窗口 ， 但 不 允 
许 它们 出 现在 可 能 与 系统 对 话 框 混 靖 的 地 方 。 

此 外 ， 有 的 浏览 器 只 根据 用 户 操作 来 创建 弹出 窗口 。 这 样 一 来 ， 在 页 面 尚未 加 载 完成 时 调用 
window.open() 的 语句 根本 不 会 执行 ， 而 且 还 可 能 会 将 错误 消息 显示 给 用 户 。 换 句 话 说， 只 能 通过 单 
击 或 者 击 键 来 打开 弹出 窗口 。 

对 于 那些 不 是 用 户 有 意 打开 的 弹出 窗口 ，Chrome 采取 了 不 同 的 处 理 方式 。 它 不 会 像 其 他 浏览 器 那 
样 简单 地 屏蔽 这 些 弹出 窗口 ， 而 是 只 显示 它们 的 标题 栏 ， 并 把 它们 放 在 浏览 器 窗口 的 右 下角 。 
























































在 打开 计算 机 硬盘 中 的 网 页 时 , 开会 解除 对 弹出 窗 吕 的 某 些 限制 。 但 是 在 服务 器 


上 执行 这 些 代码 会 受到 对 弹出 窗口 的 限制 。 





3. 弹出 窗口 屏蔽 程序 

大 多 数 浏览 需 都 内 置 有 弹出 窗口 屏蔽 程序 ， 而 没有 内 置 此 类 程序 的 浏览 器 ， 也 可 以 安装 Yahool 
Toolbar 等 带 有 内 置 屏蔽 程序 的 实用 工具 。 结 果 就 是 用 户 可 以 将 绝 大 多 数 不 想 看 到 弹出 窗口 屏蔽 掉 。 于 
是 , 在 弹出 窗口 被 屏蔽 时 ， 就 应 该 考虑 两 种 可 能 性 。 如 果 是 浏览 器 内 置 的 屏蔽 程序 阻止 的 弹出 窗口 , 那 
么 window.open () 很 可 能 会 返回 nul1。 此 时 , 只 要 检测 这 个 返回 的 值 就 可 以 确定 弹出 窗口 是 否 被 屏蔽 
了 ， 如 下 面 的 例子 所 示 。 















































Var wroxWin = window.open("http://www.wrox.com", "_blank"); 
if (wroxWin == ul11)t{ 
alert("The popup was blocked!"); 
} 
如 果 是 浏览 器 扩展 或 其 他 程序 阻止 的 弹出 窗口 , 那么 window.open () 通 常会 抛 出 一 个 错误 。 因此， 
要 想 准 确 地 检测 出 弹出 窗口 是 否 被 屏蔽 ， 必 须 在 检测 返回 值 的 同时 ， 将 对 window.open () 的 调用 封装 
在 一 个 try-catch 块 中 ， 如 下 所 示 。 


Var blocked = false; 

















try { 
Var wroxWin = window.open("http://ww.wrox.com", "_blank"); 
if (wroxWin == null)f{ 


blocked = true; 
} 
} catch (ex){ 
blocked = true; 
} 


if (blocked) { 
alert ("The popup was blocked!"); 
} 


PopupBlockerExample01.htm 

在 任何 情况 下 ， 以 上 代码 都 可 以 检测 出 调用 windqow.open () 打 开 的 弹出 窗口 是 不 是 被 屏蔽 了 。 但 

要 注意 的 是 , 检测 弹出 窗口 是 否 被 屏蔽 只 是 一 方面 , 它 并 不 会 阻止 浏览 器 显示 与 被 屏蔽 的 弹出 窗口 有 关 
的 消息 。 
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8.1.6 间歇 调用 和 超时 调用 


JavaScript 是 单线 程 语 言 ， 但 它 允 许 通过 设置 超时 值 和 间 葡 时 间 值 来 调度 代码 在 特定 的 时 刻 执 行 。 
前 者 是 在 指定 的 时 间 过 后 执行 代码 ， 而 后 者 则 是 每 隔 指 定 的 时 间 就 执行 一 次 代码 。 

超时 调用 需要 使 用 window 对 象 的 setTimeout () 方 法 , 它 接受 两 个 参数 : 要 执行 的 代码 和 以 毫秒 
表示 的 时 间 ( 即 在 执行 代码 前 需要 等 待 多 少 毫秒 )。 其中, 第 一 个 参数 可 以 是 一 个 包含 JavaScript 代码 的 
字符 串 (就 和 在 eval () 函数 中 使 用 的 字符 串 一 样 ), 也 可 以 是 一 个 函数 。 例如， 下 面 对 setTimeout () 
的 两 次 调用 都 会 在 一 秒 钟 后 显示 一 个 警告 框 。 

// 不 建议 传递 字符 事 ! 

setTimeout ("alert('Hello world!') ", 1000); 


/ /推荐 的 调用 方式 

setTimeout (function() { 
alert ("Hello world!"); 
}, 1000); 





























TimeoutExample01.htm 


虽然 这 两 种 调用 方式 都 没有 问题 , 但 由 于 传递 字符 串 可 能 导致 性 能 损失 ,因此 不 建议 以 字符 串 作为 
第 一 个 参数 。 

第 二 个 参数 是 一 个 表示 等 待 多 长 时 间 的 毫秒 数 ， 但 经 过 该 时 间 后 指定 的 代码 不 一 定 会 执行 。 
JavaScript 是 一 个 单线 程序 的 解释 器 ， 因 此 一 定时 间 内 只 能 执行 一 段 代码 。 为 了 控制 要 执行 的 代码 ， 就 
有 一 个 JavaScript 任务 队列 。 这 些 任务 会 按照 将 它们 添加 到 队列 的 顺序 执行 。setTimeout () 的 第 二 个 
参数 告诉 JavaScript 再 过 多 长 时 间 把 当前 任务 添加 到 队列 中 。 如 果 队 列 是 空 的 ， 那 么 添加 的 代码 会 立即 
执行 ， 如果 队 列 不 是 空 的 ， 那 么 它 就 要 等 前 面 的 代码 执行 完了 以 后 再 执行 。 

调用 setTimeout () 之 后 ,该 方法 会 返回 一 个 数值 ID ， 表 示 超 时 调用 。 这 个 超时 调用 ID 是 计划 执 
行 代码 的 唯一 标识 符 ， 可 以 通过 它 来 取消 超时 调用 。 要 取消 尚未 执行 的 超时 调用 计划 ， 可 以 调用 
clearTimeout () 方 法 并 将 相应 的 超时 调用 ID 作为 参数 传递 给 它 ， 如 下 所 示 。 






































// 设 置 超时 调用 

Var timeoutId = setTimeout (function() { 
alert ("Hello world!"); 

}, 1000); 


// 注 意 : 把 它 取 消 
clearTimeout (timeout1d); 


TimeoutExample02.htm 


只 要 是 在 指定 的 时 间 尚 未 过 去 之 前 调用 clearTimeout () , 就 可 以 完全 取消 超时 调用 。 前 面 的 代码 
在 设置 超时 调用 之 后 马上 又 调用 了 clearTimeout () ， 结 果 就 跟 什么 也 没有 发 生 一 样 。 


























超时 调用 的 代码 都 是 在 全 局 作用 域 中 执行 的 ， 因 此 函数 中 this 的 值 在 非 严格 模 


式 下 指向 window 对 象 ， 在 严格 模式 下 是 undefined。 








间 欣 调用 与 超时 调用 类 似 ， 只 不 过 它 会 按照 指定 的 时 间 间 隔 重 复 执行 代码 ， 直 至 间 欣 调用 被 取消 或 
者 页 面 被 印 载 。 设 置 间歇 调用 的 方法 是 setInterval() ， 它 接受 的 参数 与 setTimeout () 相同: 要 执 
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行 的 代码 (字符 串 或 函数 ) 和 每 次 执行 之 前 需要 等 待 的 毫秒 数 。 下 面 来 看 一 个 例子 。 





2 


/ /不 建议 传递 字符 串 1 
setIinterval ("alert('Hello world!') ", 10000); 
/ /推荐 的 调用 方式 
setIinterval (function() { 
ys 


alert ("Hello worild!' 
}, 10000); 


IntervalExample01.htm 
调用 setInterval () 方 法 同样 也 会 返回 一 个 间歇 调用 ID,， 该 ID 可 用 于 在 将 来 某 个 时 刻 取消 间 睦 








调用 。 要 取消 尚未 执行 的 间 砍 调用 , 可 以 使 用 clearInterval () 方 法 并 传人 相 应 的 间 敬 调用 ID。 取 消 
间 欣 调用 的 重要 性 要 远 远 高 于 取消 超时 调用 ， 因 为 在 不 加 干涉 的 情况 下 ,， 间 铭 调用 将 会 一 直 执 行 到 页 面 
钊 载 。 以 下 是 一 个 常见 的 使 用 间 鞭 调用 的 例子 。 








Var num = 0; 
var max = 10;，; 
Var intervalId = null; 


function incrementNumber() { 
nuUum++; 


// 如 果 执 行 次 数 达到 了 max 设 定 的 值 ， 则 取消 后 续 尚 未 执行 的 调用 
if (num == max) { 

clearIinterval (intervallId); 

alert ("Done"); 


} 


intervalId = setInterval (incrementNumber, 500); 


IntervalExample02.htm 


在 这 个 例子 中 , 变量 num 每 半 秒 钟 递增 一 次 ， 当 递增 到 最 大 值 时 就 会 取消 先前 设 定 的 间 多 调用 。 这 




















个 模式 也 可 以 使 用 超时 调用 来 实现 ， 如 下 所 示 。 


function incrementNumber() { 
nuUum++; 


// 如 果 执 行 次 数 未 达到 max 设 定 的 值 ， 则 设置 另 一 次 超时 调用 
if (num < max) { 
setTimeout (incrementNumber, 500); 
} else { 
alert ("Done"); 
} 
} 


setTimeout (incrementNumber, 500); 


TimeoutExample03.htm 
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可 见 ， 在 使 用 超时 调用 时 ， 没 有 必要 跟踪 超时 调用 ID ， 因 为 每 次 执行 代码 之 后 ， 如 果 不 再 设置 另 
一 次 超时 调用 ,调用 就 会 自行 停止 。 一 般 认为 ,使 用 超时 调用 来 模拟 间 欣 调用 的 是 一 种 最 佳 模式 。 在 开 
发 环境 下 ， 很 少 使 用 真正 的 间 钦 调用 ,原因 是 后 一 个 间 欣 调用 可 能 会 在 前 一 个 间 欣 调用 结束 之 前 启动 。 
而 像 前 面 示例 中 那样 使 用 超时 调用 ， 则 完全 可 以 避免 这 一 点 。 所 以 ,最 好 不 要 使 用 间 欣 调用 。 


8.1.7 ”系统 对 话 框 


浏览 器 通过 alert ()、confirm() 和 prompt () 方 法 可 以 调用 系统 对 话 框 向 用 户 显示 消息 。 系统 对 
话 框 与 在 浏览 器 中 显示 的 网 页 没有 关系 ,也 不 包含 HTML。 它们 的 外 观 由 操作 系统 及 (或 ) 浏览 器 设置 
决定 ,而 不 是 由 CSS 决定 。 此 外 ,通过 这 几 个 方法 打开 的 对 话 框 都 是 同步 和 模 态 的 。 也 就 是 说 ， 显示 这 
些 对 话 框 的 时 候 代 码 会 停止 执行 ， 而 关 掉 这 些 对 话 框 后 代码 又 会 恢复 执行 。 

本 书 各 章 经 常会 用 到 alert () 方 法 , 这 个 方法 接受 一 个 字符 串 并 将 其 显示 给 用 户 。 具 体 来 说 , 调用 
alert () 方 法 的 结果 就 是 向 用 户 显 示 一 个 系统 对 话 框 ,其 中 包含 指定 的 文本 和 一 个 OK (“确定 ”) 按钮 。 
例如 ，alert ("Hello world!") 会 在 Windows XP 系统 的 I 中 生成 如 图 8-3 所 示 的 对 话 框 。 

通常 使 用 alert () 生 成 的 “警告 ”对 话 框 向 用 户 显示 一 些 他 们 无 法 控制 的 消息 , 例如 错误 消息 。 而 
用 户 只 能 在 看 完 消息 后 关闭 对 话 框 

第 二 种 对 话 框 是 调用 confirm() 方 法 生成 的 。 从 向 用 户 显 示 消 息 的 方面 来 看 ， 这 种 “确认 ”对 话 
框 很 像 是 一 个 “警告 ”对 话 框 。 但 二 者 的 主要 区 别 在 于 “确认 ”对 话 框 除了 显示 OK 按钮 外 ， 还 会 显示 
一 个 Cancel (“取消 ”) 按钮 , 两 个 按钮 可 以 让 用 户 决定 是 否 执 行 给 定 的 操作 。 例如 , confirm("Are you 
sure?") 会 显示 如 图 8-4 所 示 的 确认 对 话 框 。 
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Microsort internet Explorer 加 
\ 2?) Are you sure? 


图 8-3 图 8-4 


为 了 确定 用 户 是 单 击 了 OK 还 是 Cancel， 可 以 检查 confirm() 方 法 返回 的 布尔 值 ，true 表示 单 击 
了 OK，false 表示 单 击 了 Cancel 或 单 击 了 右上 角 的 X 按 钮 。 确 认 对 话 框 的 典型 用 法 如 下 。 
if (confirm("Are You sure?")) { 
alert("I'm so glad you're sure! "); 
} else { 


alert("I'm sorry to hear you're not sure. "); 


} 

在 这 个 例子 中 ， 第 一 行 代码 (让 条 件 语句 ) 会 向 用 户 显示 一 个 确认 对 话 框 。 如 果 用 户 单 击 了 OK， 
则 通过 一 个 警告 框 向 用 户 显示 消息 Pm so glad you' re sure! 。 如 果 用 户 单 击 的 是 Cancel 按钮 ， 则 通过 警 
告 框 显 示 I'm sorry to hear you’re not sure.。 这 种 模式 经 常 在 用 户 想 要 执行 删除 操作 的 时 候 使 用 ， 例 如 删 
除 电子 邮件 。 

最 后 一 种 对 话 框 是 通过 调用 prompt () 方 法 生成 的 ， 这 是 一 个 “提示 ” 框 ， 用 于 提示 用 户 输入 一 些 
文本 。 提示 框 中 除了 显示 OK 和 Cancel 按钮 之 外 , 还 会 显示 一 个 文本 输入 域 , 以 供用 户 在 其 中 输入 内 容 。 
prompt () 方 法 接受 两 个 参数 :要 显示 给 用 户 的 文本 提示 和 文本 输入 域 的 默认 值 ( 可 以 是 一 个 空 字符 串 )。 








' \ Hello world! 



































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





206 第 8 章 BOM 








调用 prompt ("What's your name?", "Michael") 会 得 到 如 图 8-5 所 示 的 对 话机 


[HH 


[e] 























8-5 





如 果 用 户 单 击 了 OK 按钮 ， 则 prompt () 返 回 文本 输入 域 的 值 ， 如果 用 户 单 击 了 Cancel 或 没有 单 击 
OK 而 是 通过 其 他 方式 关闭 了 对 话 框 ， 则 该 方法 返回 nul1。 下 面 是 一 个 例子 。 
Var result = prompt ("What is your name? "，""):; 


if (result !== null) { 
alert ("Welcome, " + result); 











} 

综 上 所 述 ,， 这 些 系统 对 话 框 很 适合 向 用 户 显示 消息 并 请 用 户 作 出 决定 。 由 于 不 涉及 HTML、CSS 或 
JavaScript， 因 此 它们 是 增强 Web 应 用 程序 的 一 种 便捷 方式 。 

除了 上 述 三 种 对 话 框 之 外 ，Google Chrome 浏览 器 还 引入 了 一 种 新 特性 。 如 果 当 前 脚本 在 执行 过 程 
中 会 打开 两 个 或 多 个 对 话 框 ,那么 从 第 二 个 对 话 框 开始 ， 每 个 对 话 框 中 都 会 显示 一 个 复 选 框 ， 以 便 用 户 
阻止 后 续 的 对 话 框 显示 ， 除 非 用 户 刷 新 页 面 ( 见 图 8-6 )。 












































Javascript Alert 


Hello worldl 


门 Prevent this page from creating additional dialogs. 


| UK | 





8-6 


如 果 用 户 勾 选 了 其 中 的 复 选 框 ,并 且 关 闭 了 对 话 杠 ,那么 除非 用 户 刷 新 页 面 ， 所 有 后 续 的 系统 对 话 
框 (包括 警告 框 、 确 认 框 和 提示 框 ) 都 会 被 屏蔽 。Chrome 没有 就 对 话 框 是 否 显 示 向 开发 人 员 提 供 任 何 
信息 。 由 于 浏览 絮 会 在 空 闪 时 重 置 对 话 框 计数 器 ， 因 此 如 果 两 次 独立 的 用 户 操 作 分 别 打开 两 个 警告 框 ， 
那么 这 两 个 警告 框 中 都 不 会 显示 复 选 框 。 而 如 果 是 同一 次 用 户 操 作 会 生成 两 个 警告 框 , 那么 第 二 个 警告 
框 中 就 会 显示 复 选 框 。 这 个 新 特性 出 现 以 后 ，IE9 和 Firefox 4 也 实现 了 它 。 

还 有 两 个 可 以 通过 JavaScript 打开 的 对 话 框 ， 即 “查找 ”和 “打印 ”。 这 两 个 对 话 框 都 是 异步 显示 
的 ， 能 够 将 控制 权 立 即 交 还 给 脚本 。 这 两 个 对 话 框 与 用 户 通过 浏览 器 菜单 的 “查找 ”和 “打印 ”命令 
打开 的 对 话 框 相同 。 而 在 JavaScript 中 则 可 以 像 下 面 这 样 通过 window 对 象 的 find() 和 print() 方 法 
打开 它们 。 

// 显 示 “ 打 印 ” 对 话 框 


window.print (); 






























































~ 








// 显 示 “ 查 找 ” 对 话 框 


window.find(); 
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这 两 个 方法 同样 不 会 就 用 户 在 对 话 丰 











EE 中 的 操作 给 出 任何 信息 ， 





因此 它们 的 用 处 有 限 。 另外， 既然 这 


两 个 对 话 框 是 异步 显示 的 ， 那么 Chrome 的 对 话 框 计 数 器 就 不 会 将 它们 计算 在 内 ， 所 以 它们 也 不 会 受用 
户 禁 用 后 续 对 话 框 显示 的 影响 。 





8.2 location 对 象 


location 是 最 有 用 的 BOM 对 象 之 一 ， 它 提供 了 与 当前 窗口 中 加 载 的 文档 有 关 的 信息 ， 还 提供 了 
些 导 航 功 能 。 事实 上 ，1ocation 对 象 是 很 特别 的 一 个 对 象 ， 因 为 它 既 是 window 对 象 的 属性 ， 也 是 


document 对 象 的 








性 前 面 的 location 前 级 )。 





属性 ; 换 句 话说 , window.location 和 document.location 引 
location 对 象 的 用 处 不 只 表现 在 它 保存 着 当前 文档 的 信息 ， 
开发 人 员 可 以 通过 不 同 的 属性 访问 这 些 片段 。 下 表 列 出 了 location 对 象 的 所 有 









































j 的 是 同 





个 对 象 。 


还 表现 在 它 将 URL 解析 为 独立 的 片段 ， 让 
属性 ( 注 : 省 略 了 每 个 属 
























































































































































属性 名 例 子 说 明 

hash "#contents" 返回 URL 中 的 hash (# 号 后 跟 零 或 多 个 字符 ) ， 如 果 URL 
中 不 包含 散 列 ， 则 返回 空 字 符 串 

host "Www.wrox.com:80" 返回 服务 器 名 称 和 端口 号 (如果 有 ) 

hostname "WWW .WroX. Com" 返回 不 带 端 口号 的 服务 器 名 称 

href "http: /www.wrox.com" 返回 当前 加 载 页 面 的 完整 URL。 而 location 对 象 的 
toString () 方 法 也 返回 这 个 值 

pathname "/WileyCDA/" 返回 URL 中 的 目录 和 (或) 文件 名 

port "8080" 返回 URL 中 指定 的 端口 号 。 如 果 URL 中 不 包含 端口 号 , 则 
这 个 属性 返回 空 字符 串 

protocol "http:" 返回 页 面 使 用 的 协议 。 通 常 是 http: 或 https: 

search "?q=javascript" 返回 URL 的 查询 字符 串 。 这 个 字符 串 以 问号 开头 

8.2.1 查询 字符 串 参数 
虽然 通过 上 面 的 属性 可 以 访问 到 location 对 象 的 大 多 数 信息 ， 但 其 中 访问 URL 包含 的 查询 字符 





串 的 属性 并 不 方便 。 尺 管 location.search 返 


回 从 问号 到 URL 末尾 的 所 有 内 容 ， 但 却 没有 办 法 逐个 





访问 其 中 的 每 个 查询 字符 串 参 数 。 为 此 ， 可 以 像 下 面 这 样 创建 一 个 函数 ,用 以 解析 查询 字符 串 ， 然 后 返 
回 包含 所 有 参数 的 一 个 对 象 : 


function getQueryStringArgs (){ 


// 取 得 查询 字符 
Var qs = 


囊 并 去 掉 开头 的 问号 


(location.search.length > 0 ? location.search.substring(1) : ""), 


/ /保存 数据 的 对 象 


args = 


{}, 


// 取 得 每 一 项 


items = 


qs.length ? qs.split("&") : 


item = null, 
name = null, 


[] ， 
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value = null, 


// 在 for 循环 中 使 用 
i =. 0, 
len = items.length; 


/ /逐个 将 每 一 项 添加 到 args 对 象 中 

for (i=0; i < len; I++){ 
item items[i].split("="); 
name decodeURIComponent (item[0]); 
value = decodeURIComponent (item[1]); 


if (name.length) { 
args[name] = value; 
} 
} 


return args; 


LocationExample01.htm 


这 个 函数 的 第 一 步 是 先 去 掉 查 询 字 符 串 开头 的 问号 。 当 然 ， 前 提 是 location.search 中 必须 要 
包含 一 或 多 个 字符 。 然 后 ， 所 有 参数 将 被 保存 在 args 对 象 中 ， 该 对 象 以 字面 量 形式 创建 。 接 下 来 ， 
根据 和 号 ( & ) 来 分 割 查询 字符 串 ， 并 返回 name=value 格式 的 字符 串 数 组 。 下 面 的 for 循环 会 迭代 
这 个 数组 ， 然 后 再 根据 等 于 号 分 割 每 一 项 ， 从 而 返回 第 一 项 为 参数 名 ， 第 二 项 为 参数 值 的 数组 。 青 使 
用 decodeURIComponent () 分 别 解码 name 和 value ( 因为 查询 字符 串 应 该 是 被 编码 过 的 )。 最 后 ， 
将 name 作为 args 对 象 的 属性 ， 将 value 作为 相应 属性 的 值 。 下 面 给 出 了 使 用 这 个 函数 的 示例 。 


// 假 设 查询 字符 串 是 ?q=javascript&num=10 

































































Var args = getQueryStringArgs () ; 


alert (args["q"]); //"javascript" 
alert (args["num"]); //"10" 


可 见 ， 每 个 查询 字符 串 参 数 都 成 了 返回 对 象 的 属性 。 这 样 就 极 大 地 方便 了 对 每 个 参数 的 访问 。 


8.2.2 位置 操作 


使 用 location 对 象 可 以 通过 很 多 方式 来 改变 浏览 器 的 位 置 。 首先 , 也 是 最 常用 的 方式 , 就 是 使 用 
assign() 方 法 并 为 其 传递 一 个 URL， 如 下 所 示 。 


location.assign("http://www.wrox.com"); 

这 样 , 就 可 以 立即 打开 新 URL 并 在 浏览 器 的 历史 记录 中 生成 一 条 记录 。 如 果 是 将 location .href 
或 window.location 设置 为 一 个 URL 值 ， 也 会 以 该 值 调 用 assign() 方 法 。 例如， 下 列 两 行 代码 与 
显 式 调用 assign() 方 法 的 效果 完全 一 样 。 


window.location = "http://www.wrox.com"; 
location.href = "http://www.wrox.com"; 


在 这 些 改变 浏览 器 位 置 的 方法 中 ， 最 常用 的 是 设置 location.href 属性 。 
另外 ,修改 1ocation 对象 的 其 他 属性 也 可 以 改变 当前 加 载 的 页 面 ,下 面 的 例子 展示 了 通过 将 hash、 
search、hostname、pathname 和 port 属性 设置 为 新 值 来 改变 URL。 
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// 假 设 初始 URL 为 http://www.wrox.com/WileyCDA/ 


// 将 URL 修改 为 "http://www.wrox.com/WileyCDA/#section1l" 
location.hash = "#sectionl"; 


// 将 URL 修改 为 "http://www.wrox.com/WileyCDA/?q=javascript" 
location.search = "?gq=javascript"; 


// 将 URL 修改 为 "http://www.yahoo.com/WileyCDA/" 
location.hostname = "www.yahoo.com"; 


// 将 URL 修改 为 "http://www.yahoo.com/mydir/" 
location.pathname = "mydir"; 








// 将 URL 修改 为 "http://www.yahoo.com:8080/WileyCDA/" 
location.port = 8080; 








每 次 修改 location 的 属性 (hash 除外 )， 页 面 都 会 以 新 URL 重新 加 载 。 











在 IE8、Firefox 1、Safari 2+、Opera 9+ 和 Chrome 中 ,修改 hash 的 值 会 在 浏览 
器 的 历史 记录 中 生成 一 条 新 记录 ,在 I 的 早期 版 本 中 ,hash 属性 不 会 在 用 户 单 击 “ 后 
退 ” 和 和 “前进” 按钮 时 被 更 新 ， 而 只 会 在 用 户 单 击 包含 hash 的 URL 时 才 会 被 更 新 。 






当 通 过 上 述 任 何 一 种 方式 修改 URL 之 后 ,浏览 器 的 历史 记录 中 就 会 生成 一 条 新 记录 ， 因 此 用 户 通 

过 单 击 “ 后 退 ” 按 钮 都 会 导航 到 前 一 个 页 面 。 要 禁用 这 种 行为 ， 可 以 使 用 replace() 方 法 。 这 个 方法 

只 接受 一 个 参数 , 即 要 导航 到 的 URL; 结果 虽然 会 导致 浏览 器 位 置 改变 , 但 不 会 在 历史 记录 中 生成 新 记 
录 。 在 调用 replace() 方 法 之 后 ， 用 户 不 能 回 到 前 一 个 页 面 ， 来 看 下 面 的 例子 : 


<!DOCTYPE html> 
C9 <html> 


<head> 
<title>You won't be able to get back here</title> 
</head> 
<body> 
<p>Enjoy this page for a second, because you won't be coming back here.</p> 
<script type="text/javascript"> 
































setTimeout (function () { 
location.replace("http://www.wrox.com/"); 
Fi .000); 
</script> 
</body> 
</html> 


LocationReplaceExample01.htm 


如 果 将 这 个 页 面 加 载 到 浏览 器 中 ,浏览 器 就 会 在 1 秒 钟 后 重新 定向 到 www.wrox.com。 然 后 ,“ 后 退 
按钮 将 处 于 禁用 状态 ， 如 果 不 重新 输入 完 URL， 则 无 法 返回 示例 页 面 。 

与 位 置 有 关 的 最 后 一 个 方法 是 reload() ， 作 用 是 重新 加 载 当 前 显示 的 页 面 。 如 果 调 用 reload () 
时 不 传递 任何 参数 ， cm 也 就 是 说 ， 如 果 页 面 自 上 次 请 求 以 来 并 没有 改 
变 过 ， 页 面 就 会 从 浏览 器 缓存 中 重新 加 载 。 如 果 要 强制 从 服务 器 重新 加 载 ， 则 需要 像 下 面 这 样 为 该 方法 
传递 参数 trueo 
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location.reload(); / /重新 加 载 (有 可 能 从 缓存 中 加 载 ) 
location.zreload(true) ; // 重 新 加 载 (从 服务 器 重新 加 载 ) 








位 于 *eload() 调 用 之 后 的 代码 可 能 会 也 可 能 不 会 执行 ， 这 要 取决 于 网 络 延 迟 或 系统 资源 等 因素 。 
为 此 ， 最 好 将 reload () 放 在 代码 的 最 后 一 行 。 


8.3 navigator 对 象 


最 早 由 Netscape Navigator 2.0 引 入 的 navigator 对 象 ， 现 在 已 经 成 为 识别 客户 
寸 其 他 方式 提供 了 相同 或 相似 的 信息 
mation 和 Opera 中 的 window.opera )， 但 navigator 对 象 却 是 所 有 支持 JavaScript 的 浏览 器 所 共 





准 。 虽 然 其 他 浏览 需 也 通过 

















端 浏览 絮 的 事实 标 
(例如 , 正中 的 window.clientInfor- 














































































































Netscape Navigator 4 癌 后 兼容 而 保留 下 来 

















的 。 与 其 他 BOM 对 象 的 情况 一 样 ， 每 个 浏览 器 中 的 navigator 对 象 也 都 有 一 套 自己 的 属性 。 下 表 列 
出 了 存在 于 所 有 浏览 句 中 的 属性 和 方法 ， 以 及 支持 它们 的 浏览 器 版 本 。 
属性 或 方法 说 明 IE Firefox ey Opera 
rome 

appCodeName 浏览 器 的 名 称 。 通 常 都 是 Mozilla， 即 3.0+ 1.0+ 1.0+ 7.0+ 
使 在 非 Mozilla 浏 览 器 中 也 是 如 此 

appMinorVersion 次 版 本 信息 4.0+ 过 二 9.5+ 

appName 完整 的 浏览 器 名 称 3.0+ 1.0+ 1.0+ 7.0+ 

appVersion 浏览 器 的 版 本 。_- 般 不 与 实际 的 浏览 器 3.0+ 1.0+ 1.0+ 7.0+ 
版 本 对 应 

builgdID 浏览 器 编译 版 本 = 2.0+ 和 对 

cookieEnabled 表示 cookie 是 否 启用 4.0+ 1.0+ 1.0+ 7.0+ 

cpuclass 客户 端 计算 机 中 使 用 的 CPU 类 型 (x86、 4.0+ _ - 
68K、Alpha、PPC 或 Other ) 

javaEnabled() 表示 当前 浏览 器 中 是 否 启用 了 Java 4.0+ 1.0+ 1.0+ 7.0 

language 浏览 器 的 主语 言 二 1.0+ 1.0+ 7.0+ 

mimeTypes 在 浏览 器 中 注册 的 MIME 类 型 数组 4.0 1.0+ 1.0 7.0 

onLine 表示 浏览 器 是 否 连接 到 了 因特网 4.0+ 1.0+ - 9.5 

opsProfile 似乎 早 就 不 用 了 。 查 不 到 相关 文档 4.0+ = - 一 

oscpu 客户 端 计算 机 的 操作 系统 或 使 用 的 CPU 一 1.0+ - 一 

Platform 浏览 器 所 在 的 系统 平台 4.0+ 1.0+ 1.0 7.0+ 

dd 浏览 器 中 安装 的 插件 信息 的 数组 4.0+ 1.0+ 10 7.0+ 

Preference () 设置 用 户 的 首选 项 .5 二 加 

product 产品 名 称 (如 Gecko ) 一 1.0+ 1.0 二 

progductSub 关于 产品 的 次 要 信息 (如 Gecko 的 版 本 ) 。 - 1.0+ 1.0+ - 

和 ee 针对 特定 的 MIME 类 型 将 一 个 站 点 注册 = 2.0+ 一 = 
为 处 理 程序 
人 针对 特定 的 协议 将 一 个 站 点 注册 为 处 = 2.0 这 

理 程序 

SecurityPolicy 已 经 废弃 。 安 全 策略 的 名 称 。 为 了 与 一 1.0+ 吕 = 
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( 续 ) 
属性 或 方法 说 明 IE Firefox rn Opera 
rome 

systemLanguage 操作 系统 的 语言 4.0+ a a es 
taintEnabled() 已 经 废弃 。 表 示 是 否 人 允许 变量 被 修改 4.0+ 1.0+ 到 7.0+ 

(taint ) 。 为 了 与 Netscape Navigator 3 向 后 

兼容 而 保留 下 来 
userAgent 浏览 器 的 用 户 代理 字符 串 3.0+ 1.0+ 1.0+ 7.0+ 
userLanguage 操作 系统 的 默认 语言 4.0+ e 7.0+ 
userProfile 借以 访问 用 户 个 人 信息 的 对 象 4.0+ = 去 
vendor 浏览 器 的 品牌 二 1.0+ 1.0+ 到 
vendorSub 有 关 供 应 商 的 次 要 信息 1.0+ 1.0+ = 

















表 中 的 这 些 navigator 对 象 的 属性 通常 用 于 检测 显示 网 页 的 浏览 器 类 型 (第 9 章 会 详细 讨论 )。 
8.3.1 检测 插件 


检测 浏览 器 中 是 否 安装 了 特定 的 插件 是 一 种 最 常见 的 检测 例 程 。 对 于 非 下 浏览 器 ， 可 以 使 用 
plugins 数组 来 达到 这 个 目的 。 该 数组 中 的 每 一 项 都 包含 下 列 属性 。 
口 name: 插件 的 名 字 。 
口 description: 插件 的 描述 。 
口 filename: 插件 的 文件 名 。 
口 length: 插件 所 处 理 的 MIME 类 型 数量 。 


一 般 来 说 ，name 属性 中 会 包含 检测 插件 必需 的 所 有 信息 ,但 有 时 候 也 不 完全 如 此 。 在 检测 插件 时 ， 
需要 像 下 面 这 样 循环 迭代 每 个 插件 并 将 插件 的 name 与 给 定 的 名 字 进 行 比较 。 EE 


/ /检测 插件 (在 正中 无 效 ) 
CY) function hasPlugin (name){ 
name = name.toLowerCase(); 
for (var i=0; i < navigator.plugins.length; i++)f{ 
if (navigator. plugins [i] .name.toLowerCase() 
return true; 

































































.indexOof (name) > -1)f{ 


} 
} 


return false; 


} 


// 检 测 Flash 
alert (hasPlugin ("Flash")); 


// 检 测 QuickTime 


alert (hasPludgin("ouickTime") ) ; 


PluginDetectionExample01.htm 
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这 个 hasPlugin () 函数 接受 一 个 参数 : 要 检测 的 插件 名 。 第 一 步 是 将 传人 的 名 称 转换 为 小 写 形式 ， 
以 便于 比较 。 然 后 ， 迭 代 plugins 数组 ， 通 过 indqexof () 检 测 每 个 name 属性 ， 以 确定 传人 的 名 称 是 
否 出 现在 字符 串 的 某 个 地 方 。 比 较 的 字符 串 都 使 用 小 写 形式 可 以 避免 因 大 小 写 不 一 致 导致 的 错误 。 而 传 
人 的 参数 应 该 尽 可 能 具体 , 以 避免 混淆 。 应 该 说 , 像 Flash 和 ouickTime 这 样 的 字符 串 就 比较 具体 了 ， 
不 容易 导致 混淆 。 在 Firefox、Safari、Opera 和 Chrome 中 可 以 使 用 这 种 方法 来 检测 插件 。 
























































每 个 插件 对 象 本 身 也 是 一 个 MimeType 对 象 的 数组 , 这 些 对 象 可 以 通过 方 括号 语 
法 来 访问 。 每 个 MimeType 对 象 有 4 个 属性 : 包含 MIME 类 型 描述 的 description、 
回 指 插件 对 象 的 enabledPlugin、 表 示 与 MIME 类 型 对 应 的 文件 扩展 名 的 字符 串 
suffixes ( 以 去 号 分 隔 ) 和 表示 完整 MIME 类 型 字符 串 的 type。 










检测 正中 的 插件 比较 麻烦 ， 因 为 下 不 支持 Netscape 式 的 插件 。 在 I 中 检测 插件 的 唯一 方式 就 是 
使 用 专 有 的 ActivexobJject 类 型 ， 并 尝试 创建 一 个 特定 插件 的 实例 。IE 是 以 COM 对 象 的 方式 实现 插 
件 的 ， 而 COM 对 象 使 用 唯一 标识 符 来 标识 。 因 此 ， 要 想 检查 特定 的 插件 ， 就 必须 知道 其 COM 标识 符 。 
例如 ，Flash 的 标识 符 是 shockwaveFlash.ShockwaveFlash。 知 道 唯一 标识 符 之 后 ,就 可 以 编写 类 似 
下 面 的 函数 来 检测 正中 是 否 安 装 相应 插件 了 。 


// 检 测 契 中 的 插件 
function hasIEPlugin (name){ 
try { 
new ActivexObject (name); 
return true; 
} catch (ex){ 
return false; 























} 
} 


// 检 测 Flash 
alert (hasIEPlugin ("ShockwaveFlash.ShockwaveFlash")); 


// 检 测 QuickTime 
alert (hasIEPlugin("QuickTime.QuickTime")); 


PluginDetectionExample02.htm 


在 这 个 例子 中 ， 函 数 hasIEPlugin () 只 接收 一 个 COM 标识 符 作为 参数 。 在 函数 内 部 ， 首 先 会 尝 
试 创建 一 个 COM 对 象 的 实例 。 之 所 以 要 在 try-catch 语句 中 进行 实例 化 , 是 因为 创建 未 知 COM 对 象 
会 导致 抛 出 错误 。 这 样 ， 如 果实 例 化 成 功 ， 则 函数 返回 true; 和 否则， 如 果 抛 出 了 错误 ， 则 执行 catch 
块 ， 结 果 就 会 返回 false。 例 子 最 后 检测 IE 中 是 否 安 装 了 Flash 和 QuickTime 插件 。 

鉴于 检测 这 两 种 插件 的 方法 差别 太 大 ， 因此 典型 的 做 法 是 针对 每 个 插件 分 别 创建 检测 函数 ， 而 不 是 
使 用 前 面 介绍 的 通用 检测 方法 。 来 看 下 面 的 例子 。 

// 检 测 所 有 浏览 器 中 的 Flash 

function hasFlash(){ 

Var result = hasPlugin("Flash"); 


if (!result)t{ 
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash"); 






































} 
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return result; 


} 


// 检 测 所 有 浏览 器 中 的 QuickTime 
function hasQuickTime()f{ 
Var result = hasPlugin("QuickTime"); 
if (!result){ 
result = hasIEPlugin("QuickTime.QuickTime"); 





} 
return result; 


} 


// 检 测 Flash 
alert (hasFlash()); 


// 检 测 QuickTime 
alert (hasQuickTime()); 


PluginDetectionExample03.htm 


上 上 面 代码 中 定义 了 两 个 函数 : hasElash() 和 hasouickTime ()。 每 个 函数 都 是 先 党 试 使 用 不 针对 
IE 的 插件 检测 方法 。 如 果 返 回 了 false(〈 在 正中 会 这 样 )， 那 么 再 使 用 针对 IE 的 插件 检测 方法 。 如 果 
IE 的 插件 检测 方法 再 返回 false， 则 整个 方法 也 将 返回 false。 只 要 任何 一 次 检测 返回 true， 整 个 方 
法 都 会 返回 trueo 






































plugins 集合 有 一 个 名 叫 refresh() 的 方法 , 用 于 刷新 plugins 以 反映 最 新 安 
装 的 插件 。 这 个 方法 接收 一 个 参数 : 表示 是 否 应 该 重新 加 载 页 面 的 一 个 布尔 值 。 如 果 
将 这 个 值 设 置 为 true， 则 会 重新 加 载 包含 插件 的 所 有 页 面 ; 否则 ， 只 更 新 plugins 
集合 ， 不 重新 加 载 页面 。 


8.3.2 ”注册 处 理 程序 


Firefox 2 为 navigator 对 象 新 增 了 registerContentHandler() 和 registerProtocolHandler() 方 
法 (这 两 个 方法 是 在 HTML5 中 定义 的 ， 相 关内 容 将 在 第 22 章 讨论 )。 这 两 个 方法 可 以 让 一 个 站 点 指明 
它 可 以 处 理 特定 类 型 的 信息 。 随 着 RSS 阅读 器 和 在 线 电子 邮件 程序 的 兴起 , 注册 处 理 程序 就 为 像 使 用 桌 
面 应 用 程序 一 样 默认 使 用 这 些 在 线 应 用 程序 提供 了 一 种 方式 。 
其 中 , registerContentHandler() 方 法 接收 三 个 参数 : 要 处 理 的 MIME 类 型 .可 以 处 理 该 MIME 
类 型 的 页 面 的 URL 以 及 应 用 程序 的 名 称 。 举 个 例子 ， 要 将 一 个 站 点 注册 为 处 理 RSS 源 的 处 理 程序 ， 可 
以 使 用 如 下 代码 。 


navigator .registerContentHandler ("application/rss+xml", 
"http://www.somereader.com?feed=%s", "Some Reader"); 


第 一 个 参数 是 RSS 源 的 MIME 类 型 。 第 二 个 参数 是 应 该 接收 RSS 源 URL 的 URL， 其 中 的 $s 表示 
RSS 源 URL， 由 浏览 器 自动 插入 。 当 下 一 次 请 求 RSS 源 时 ， 浏 览 器 就 会 打开 指定 的 URL， 而 相应 的 
Web 应 用 程序 将 以 适当 方式 来 处 理 该 请 求 。 
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Firefox 4 及 之 前 版 本 只 允许 在 registerContentHandler() 方 法 中 使 用 三 个 
MIME 类 型 . application/rss+xml、application/atom+xml 和 application/ 
vnd.mozilla.maybe. feed。 这 三 个 MIME 类 型 的 作用 都 一 样 ， 即 为 RSS 或 ATOM 
新 闻 源 ( feed ) 注册 处 理 程序 。 







类 似 的 调用 方式 也 适用 于 registerProtocolHandler () 方 法 ， 它 也 接收 三 个 参数 : 要 处 理 的 协 
议 (例如 ，mailto 或 ftp )、 处 理 该 协议 的 页 面 的 URL 和 应 用 程序 的 名 称 。 例 如 ， 要 想 将 一 个 应 用 程 
序 注册 为 默认 的 邮件 客户 端 ， 可 以 使 用 如 下 代码 。 


navigator.registerProtocolHandler ("mailto", 
"http://www.somemailclient.com?cmd=%s", "Some Mail Client"); 


这 个 例子 注册 了 一 个 mailto 协议 的 处 理 程序 ,该 程序 指向 一 个 基于 Web 的 电子 邮件 客户 端 。 同 样 ， 
第 二 个 参数 仍然 是 处 理 相 应 请 求 的 URL ， 而 ss 则 表示 原始 的 请 求 。 





Firefox 2 虽然 实现 了 registerProtocolHandler()， 但 该 方法 还 不 能 用 。 


Firefox 3 完整 实现 这 个 方法 。 





8.4 screen 对象 

JavaScript 中 有 几 个 对 象 在 编程 中 用 处 不 大 ,而 screen 对 象 就 是 其 中 之 一 。screen 对 象 基本 上 只 
用 来 表明 客户 端的 能 力 ， 其 中 包括 浏览 器 窗口 外 部 的 显示 器 的 信息 ， 如 像素 宽度 和 高 度 等 。 每 个 浏览 器 
中 的 screen 对 象 都 包含 着 各 不 相同 的 属性 ， 下 表 列 出 了 所 有 属性 及 支持 相应 属性 的 浏览 





















































Safari/ 




























































































属 性 说 明 IE Firefox Chrome Opera 
availHeight 屏幕 的 像素 高 度 减 系 统 部 件 高 度 之 后 的 值 ( 只 读 ) y y y y 
availLeft 未 被 系统 部 件 占用 的 最 左 侧 的 像素 值 (只 读 ) y y 
availTop 未 被 系统 部 件 占 用 的 最 上 方 的 像素 值 ( 只 读 ) y y 
availwidth 屏幕 的 像素 宽度 减 系 统 部 件 宽度 之 后 的 值 (只 读 ) y y y y 
bufferDepth 读 、 写 用 于 呈现 屏 外 位 图 的 位 数 y 
colorDepth 用 于 表现 颜色 的 位 数 ; 多 数 系统 都 是 32 ( 只 读 ) y y y y 
deviceXDPI 屏幕 实 际 的 水 平 DPI ( 只 读 ) y 
deviceYDPI 屏幕 实际 的 垂直 DPI ( 只 读 ) y 

ee 表示 是 否 启用 了 字体 平滑 ( 只 读 ) y 
height 屏幕 的 像素 高 度 y y y y 
left 当前 屏幕 距 左 边 的 像素 距离 y 
logicalXDPI 屏幕 逻辑 的 水 平 DPI ( 只 读 ) y 
logicalYyDPI 屏幕 逻辑 的 垂直 DPI ( 只 读 ) y 
pixelDepth 屏幕 的 位 深 ( 只 读 ) y y y 
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( 续 ) 
属 性 说 明 IE Firefox I Opera 
top 当前 屏幕 距 上 边 的 像素 距离 y 
updateInterval 。” 读 、 写 以 毫秒 表示 的 屏幕 刷新 时 间 间 隔 1 
width 屏幕 的 像素 宽度 1 1 1 1 









































这 些 信息 经 常 集中 出 现在 测定 客户 端 能 力 的 站 点 跟踪 工具 中 , 但 通常 不 会 用 于 影响 功能 。 不 过 ， 有 
时 候 也 可 能 会 用 到 其 中 的 信息 来 调整 浏览 器 窗口 大 小 ， 使 其 占据 屏幕 的 可 用 空间 ， 例 如 : 

window.resizeTo(screen.availWidth, screen.availHeight); 

前 面 曾经 提 到 过 , 许多 浏览 絮 都 会 禁用 调整 浏览 器 窗口 大 小 的 能 力 ， 因此 上 面 这 行 代码 不 一 定 在 所 
有 环境 下 都 有 效 。 

涉及 移动 设备 的 屏幕 大 小 时 ， 情 况 有 点 不 一 样 。 运 行 iOS 的 设备 始终 会 像 是 把 设备 竖 着 拿 在 手 里 一 
样 ,因此 返回 的 值 是 768 x 1024。 而 Android 设备 则 会 相应 调用 screen.width 和 screen.height 的 值 。 



























































8.5 history 对 象 


history 对 象 保存 着 用 户 上 网 的 历史 记录 , 从 窗口 被 打开 的 那 一 刻 算 起 。 因 为 history 是 window 
对 象 的 属性 ， 因 此 每 个 浏览 器 窗口 、 每 个 标签 页 乃至 每 个 框架 ,都 有 自己 的 history 对 象 与 特定 的 
window 对 象 关联 。 出 于 安全 方面 的 考虑 ， 开 发 人 员 无 法 得 知 用 户 浏 览 过 的 URL。 不 过 , 借 由 用 户 访问 
过 的 页 面 列表 ， 同 样 可 以 在 不 知道 实际 URL 的 情况 下 实现 后 退 和 前 进 。 
使 用 go () 方 法 可 以 在 用 户 的 历史 记录 中 任意 跳 转 , 可 以 向 后 也 可 以 向 前 。 这 个 方法 接受 一 个 参数 ， 
表示 向 后 或 向 前 跳 转 的 页 面 数 的 一 个 整数 值 。 负数 表示 向 后 跳 转 (类似 于 单 击 浏览 器 的 “后 退 ” 按 钮 )， 
正 数 表示 向 前 跳 转 ( 类似 于 单 击 浏览 器 的 “前 进 ” 按 钮 )。 来 看 下 面 的 例子 。 


// 后 退 一 页 
history.go(-1); 


















































/ /前进 一 页 
istory go(l)s 


/ /前进 两 页 

history.go(2); 

a go () 方 法 传递 一 个 字符 串 参 数 ， 此 时 浏览 器 会 跳 转 到 历史 记录 中 包含 该 字符 串 的 第 一 个 
位 后退 ， 也 可 能 前 进 ， 具 体 要 看 哪个 位 置 最 近 。 如 果 历 史记 录 中 不 包含 该 字符 串 ， 那么 这 个 
方法 什么 也 不 做 例如 : 


// 跳 转 到 最 近 的 wrox.com 页 面 
history.go ("wrox.com"); 


























// 跳 转 到 最 近 的 nczonline.net 页 面 
history.go("'nczonline.net"); 


另外 ， 还 可 以 使 用 两 个 简写 方法 pack () 和 forward() 来 代替 go () 。 顾 名 思 义 ， 这 两 个 方法 可 以 
模仿 浏览 器 的 “后 退 ” 和 “前 进 ” 按 钮 。 
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/ /后 退 一 页 

history.back(); 

// 前 进 一 页 

history.forward(); 

除了 上 述 几 个 方法 外 ，history 对 象 还 有 一 个 length 属性 ,保存 着 历史 记录 的 数量 。 这 个 数量 
包括 所 有 历史 记录 ， 即 所 有 向 后 和 向 前 的 记录 。 对 于 加 载 到 窗口 、 标 签 页 或 框架 中 的 第 一 个 页 面 而 言 ， 
history.length 等 于 0。 通 过 像 下 面 这 样 测试 该 属性 的 值 ， 可 以 确定 用 户 是 否 一 开始 就 打开 了 你 的 
页 面 。 


if (history.length == 0){ 
// 这 应 该 是 用 户 打 开 窗 口 后 的 第 一 个 页 面 






































} 
虽然 nistory 并 不 常用 ,但 在 创建 自 定义 的 “后 退 ” 和 “前 进 ” 按 钮 ， 以 及 检测 当前 页 面 是 不 是 
用 户 历 史记 录 中 的 第 一 个 页 面 时 ， 还 是 必须 使 用 它 。 



























当 页 面 的 URL 改变 时 ， 就 会 生成 一 条 历史 记录 。 在 IE8 及 更 高 版 本 、Opera、 
Firefox 、Safari 3 及 更 高 版 本 以 及 Chrome 中 , 这 里 所 说 的 改变 包括 URL 中 hash 的 变 
化 (因此 ,设置 location.hash 会 在 这 些 浏览 器 中 生成 一 条 新 的 历史 记录 ) 。 






8.6 小 结 


浏览 器 对 象 模型 BOM ) 以 window 对 象 为 依托 , 表示 浏览 器 窗口 以 及 页 面 可 见 区 域 。 同 时 , window 
对 象 还 是 ECMAScript 中 的 Global 对 象 ， 因 而 所 有 全 局 变量 和 函数 都 是 它 的 属性 ， 且 所 有 原生 的 构造 
函数 及 其 他 函数 也 都 存在 于 它 的 命名 空间 下 。 本 章 讨论 了 下 列 BOM 的 组 成 部 分 。 
口 在 使 用 框架 时 ， 每 个 框架 都 有 自己 的 window 对 象 以 及 所 有 原生 构造 函数 及 其 他 函数 的 副本 。 
每 个 框架 都 保存 在 frames 集合 中 ， 可 以 通过 位 置 或 通过 名 称 来 访问 。 
口 有 一 些 窗口 指针 ， 可 以 用 来 引用 其 他 框架 ， 包 括 父 框架 。 
口 top 对 象 始终 指向 最 外 围 的 框架 ， 也 就 是 整个 浏览 器 窗口 。 
口 parent 对 象 表 示 包 含 当前 框架 的 框架 ， 而 self 对 象 则 回 指 window。 
口 使 用 location 对 象 可 以 通过 编程 方式 来 访问 浏览 器 的 导航 系统 。 设 置 相 应 的 属性 ， 可 以 逐 段 
或 整体 性 地 修改 浏览 器 的 URL。 
口 调用 *eplace () 方 法 可 以 导航 到 一 个 新 URL， 同 时 该 URL 会 替换 浏览 器 历史 记录 中 当前 显示 
的 页 面 。 
口 navigator 对 象 提供 了 与 浏览 器 有 关 的 信息 。 到 底 提供 哪些 信息 ,很 大 程度 上 取决 于 用 户 的 浏 

览 器 ; 不 过 ， 也 有 一 些 公共 的 属性 ( 如 useragent ) 存在 于 所 有 浏览 器 中 。 

BOM 中 还 有 两 个 对 象 : screen 和 history, 但 它们 的 功能 有 限 。screen 对 象 中 保存 着 与 客户 端 
显示 器 有 关 的 信息 ， 这 些 信息 一 般 只 用 于 站 点 分 析 。history 对 象 为 访问 浏览 器 的 历史 记录 开 了 一 个 
小 缝 险 ， 开 发 人 员 可 以 据 此 判断 历史 记录 的 数量 ， 也 可 以 在 历史 记录 中 向 后 或 向 前 导航 到 任意 页 面 。 
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第 中 间 
客户 端 检 测 


本 章 内 容 

口 使 用 能 力 检 测 

口 用 户 代理 检测 的 历史 
口 选择 检测 方式 














WU 种 浏览 器 都 有 各 自 
/全 JJ 的 长 处 ， 也 都 有 各 自 的 缺点 。 即 使 是 那些 跨 平台 的 浏览 器 ， 虽 然 从 技术 上 看 版 本 相同 ， 也 照 
样 存在 不 一 致 性 问题 。 面 对 普遍 存在 的 不 一 致 性 问题 ， 开 发 人 员 要 么 采取 迁就 各 方 的 “最 小 公分 母 ” 策 
略 ， 要 么 〈 也 是 更 常见 的 ) 就 得 利用 各 种 客户 端 检 测 方法 ， 来 突破 或 者 规避 种 种 局 限 性 。 

迄今 为 止 ， 客 户 端 检 测 仍然 是 Web 开发 领域 中 一 个 饱 受 争议 的 话题 。 一 谈 到 这 个 话题 ， 人 们 总 会 
不 约 而 同 地 提 到 浏览 右 应 该 支持 一 组 最 常用 的 公共 功能 。 在 理想 状态 下 ,确实 应 该 如 此 。 但 是 ,在 现实 
当中 ,浏览 器 之 间 的 差异 以 及 不 同 浏览 右 的 “怪兽 ”quirk )， 多 得 简直 不 胜 枚 举 。 因 此 ,客户 端 检 测 除 
了 是 一 种 补救 措施 之 外 ， 更 是 一 种 行 之 有 效 的 开发 策略 。 

检测 Web 客户 端的 手段 很 多 ， 而 且 各 有 利弊 。 但 最 重要 的 还 是 要 知道 ， 不 到 万 不 得 已 ， 就 不 要 使 
用 客户 端 检测 。 只 要 能 找到 更 通用 的 方法 ， 就 应 该 优先 采用 更 通用 的 方法 。 一 言 以 丽 之 ， 先 设计 最 通用 
的 方案 ,然后 再 使 用 特定 于 浏览 器 的 技术 增强 该 方案 。 


9.1 能力 检测 




























































































最 常用 也 最 为 人 们 广泛 接受 的 客户 端 检 测 形式 是 能 力 检测 ( 又 称 特性 检测 )。 能 力 检 测 的 目标 不 是 
识别 特定 的 浏览 絮 ， 而 是 识别 浏览 带 的 能 力 。 采 用 这 种 方式 不 必 顾 及 特定 的 浏览 器 如 何如 何 ， 只 要 确定 
浏览 器 支持 特定 的 能 力 ， 就 可 以 给 出 解决 方案 。 能 力 检测 的 基本 模式 如 下 : 


if (object.propertyInQuestion)f{ 
// 使 用 object.propertyInQuestion 




















} 
举例 来 说 , IE5.0 之 前 的 版 本 不 支持 document .getElementById() 这 个 DOM 方法 。 尽管 可 以 使 
用 非 标准 的 aocument .all 属性 实现 相同 的 目的 , 但 正 的 早期 版 本 中 确实 不 存在 document .get- 
ElementById()。 于 是 ,也 就 有 了 类 似 下 面 的 能 力 检 测 代码 : 
function getElement (id)f{ 
if (document.getElementById)t 
return document .getElementById(id); 


} else if (document.all){ 
return document.all[id]; 
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} else { 
throw new Error("No way to retrieve element!"); 











这 里 的 getElement () 函数 的 用 途 是 返回 具有 给 定 IDD 的 元 素 。 因 为 document .getElementById() 
是 实现 这 一 目的 的 标准 方式 ， 所 以 一 开始 就 测试 了 这 个 方法 。 如 果 该 函数 存在 〈 不 是 未 定义 )， 则 使 用 
该 函数 。 否 则 ， 就 要 继续 检测 aocument .all 是 否 存 在 ， 如 果 是 ， 则 使 用 它 。 如 果 上 述 两 个 特性 都 不 
存在 (很 有 可 能 )， 则 创建 并 抛 出 错误 ， 表示 这 个 函数 无 法 使 用 。 

要 理解 能 力 检 测 ， 首 先 必须 理解 两 个 重要 的 概念 。 如 前 所 述 ， 第 一 个 概念 就 是 先 检测 达成 目的 的 最 常 
用 的 特性 。 对 前 面 的 例子 来 说 , 就 是 要 先 检 测 document .getElementById() ,后 检测 document .all。 
先 检 测 最 常用 的 特性 可 以 保证 代码 最 优化 ， 因 为 在 多 数 情况 下 都 可 以 避免 测试 多 个 条 件 。 

第 二 个 重要 的 概念 就 是 必须 测试 实际 要 用 到 的 特性 。 一 个 特性 存在 , 不 一 定 意味 着 另 一 个 特性 也 存 
在 。 来 看 一 个 例子 : 

function getWindowWidth()t 

if (document.all)t{ // 假 设 是 正 
return document .documentElement .clientWwidth; // 错 误 的 用 法 | 1 | 


} else { 
return window.innerWidth; 













































































} 
} 


这 是 一 个 错误 使 用 能 力 检测 的 例子 。getwindowWidtn () 函数 首先 检查 document .all 是 否 存在 ， 
如 果 是 则 返回 document .documentElement .clientwidth。 第 8 章 曾 经 讨论 过 ，IE8 及 之 前 版 本 确 
实 不 支持 window.innerwidth 属性 。 但 问题 是 document .all 存在 也 不 一 定 表 示 浏 览 器 就 是 下 。 实 
际 上 ， 也 可 能 是 Opera; Opera 支持 document .al1， 也 支持 window.innerWiath。 


9.1.1 更 可 靠 的 能 力 检测 


能 力 检测 对 于 想 知 道 某 个 特性 是 否 会 按照 适当 方式 行事 ( 而 不 仅仅 是 某 个 特性 存在 ) 非常 有 用 。 上 
一 节 中 的 例子 利用 类 型 转换 来 确定 某 个 对 象 成 员 是 否 存 在 ,但 这 样 你 还 是 不 知道 该 成 员 是 不 是 你 想 要 
的 。 来 看 下 面 的 函数 ， 它 用 来 确定 一 个 对 象 是 否 支 持 排序 。 







































































// 不 要 这 样 做 ! 这 不 是 能 力 检测 一 一 只 检测 了 是 否 存在 相应 的 方法 
function isSortable(object)t{ 
return !!object.sort; 





} 

这 个 函数 通过 检测 对 象 是 否 存 在 sort () 方 法 , 来 确定 对 象 是 否 支持 排序 。 问 题 是 , 任何 包含 sort 
属性 的 对 象 也 会 返回 true。 

Var result = isSortable({ sort: true }); 


检测 某 个 属性 是 否 存在 并 不 能 确定 对 象 是 否 支 持 排序 。 更 好 的 方式 是 检测 sort 是 不 是 一 个 函数 。 



























































/ /这样 更 好 : 检查 sort 是 不 是 函数 
function isSortable(object)t{ 
return typeof object.sort == "function"; 


} 
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合理 的 值 。 最 令 人 发 指 的 如 
存在 时 ， 都 会 返回 true。 





万 儿 就 发 和 9 








这 里 的 typeof 操作 符 用 于 确定 sort 的 确 是 一 个 函数 ， 因 此 可 以 调 月 
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// 在 IE8 及 之 前 版 本 中 不 行 
function hasCreate 


} 





Element (){ 
return typeof document.create 





Element 


过 COM 而 非 JScript 实现 的 。 因 此 ，document .create] 


typeof 才 会 返回 "object"。IE9 纠正 了 这 个 问题 ， 对 所 有 DOM 方法 都 返 
为 差异 很 大 。 例 如 ， 不 使 月 


























FE 


月 typeof 测试 某 个 


心 ” 上 昌 
头 征 





if 








EE 





Pe 
性 会 导致 错误 ， 如 下 所 示 。 
Var xhr = new ActiveXObject ("Microsoft.XMLHttp"); 
(xhr.open)t{ // 这 里 会 发 生 错 误 
/ /执行 操作 
} 


像 这 村 


TK 








直接 把 函数 作为 属性 访问 会 导致 JavaScript 错误 。 使 月 
对 typeof xhr.open 会 返 
存在 ， 要 使 用 下 I 














j 这 个 函数 。 
// 作 者 : Peter Michaux 





Var t = 


| | 
(!! (t=='object' 


'unknown'; 





function isHostMethod (object, property) 


typeof object[property]; 


{ 
} 


result 


&& object [property])) || 
可 以 像 下 面 这 样 使 用 这 个 函数 : 


= isHostMethod (xhr， 
result = isHostMethod (xhr， 


"open"); //true 

"EG ) //false 
目前 使 用 isHostMethod () 方 法 还 是 比较 可 靠 的 ， 
意 ， 宿 主 对 象 没 有 义务 保持 目前 的 实现 方式 不 变 


能 的 风险 作出 理性 的 估计 。 


因为 它 考虑 到 了 浏览 絮 的 怪异 行为 。 不 过 也 要 注 
数 一 一 以 及 其 他 类 似 函数 ， 都 不 能 百分之百 地 保证 永远 可 靠 。 作 为 开发 人 员 ， 必须 对 自己 要 使 用 某 个 功 









也 不 一 定 会 模仿 已 有 宿主 对 象 的 行为 。 所 以 ， 这 个 函 








articles/feature-detection-state-of-the-art-browser-Scripting。 


要 想 深入 了 解围 绕 JavaScript 中 能 力 检 测 的 一 些 观点 ,请 参考 Peter Michaux 的 文 
章 “Feature Detection: State ofthe Art Browser Scripting”, 网 址 为 http://peter.michaux.ca/ 
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在 可 能 的 情况 下 ,要 尽量 使 用 typeof 进行 能 力 检 测 。 特 别 是 ， 宿 主 对 象 没有 义务 让 typeof 返回 


E 在 正 中。 大 多 数 浏 览 融 在 检测 到 aocument . createElement () 


"EWCtLOn" 
在 IE8 及 之 前 版 本 中 ， 这 个 函数 返回 false， 因 为 typeof document .createl 


"object"， 而 不 是 "function"。 如 前 所 述 ，DOM 对 象 是 宿主 对 象 ， 卫 及 更 早 版 本 中 的 宿主 对 象 是 通 


Element 返回 的 是 
Element ( ) 函数 和 
关于 typeof 的 行为 不 标准 ,IE 中 还 可 以 举 出 例子 来 。ActiveX 对 象 (只 有 下 支持 ) 与 ] 
// 在 I 正中 会 导致 错误 


日 它 对 数据 进行 排序 。 





通 
个 COM 对 象 ， 所 以 


回 "function"。 





其 他 对 象 的 行 


日 typeof 操作 符 会 更 靠 谱 一 点 ,但 正 
回 "unknown"。 这 就 意味 着 ,在 浏览 器 环境 下 测试 任何 对 象 的 某 个 特性 是 否 
return t=='function' 
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9.1.2 能力 检测 ， 不 是 浏览 器 检测 


检测 某 个 或 某 几 个 特性 并 不 能 够 确定 浏览 器 。 下 面 给 出 的 这 段 代码 (或 与 之 差不多 的 代码 ) 可 以 在 








许多 网 站 中 看 到 ， 这 种 “浏览 器 检测 ”代码 就 是 错误 地 依赖 能 力 检 测 的 典型 示例 。 


// 错 误 ! 还 不 够 具体 


Var isFirefox = !! (navigator.vendor && navigator.vendorSub); 


// 错 误 ! 假设 过 头 了 
Var isIE = !!(document.all && document .uniqueID); 


这 两 行 代码 代表 了 对 能 力 检 测 的 典型 误 用 。 以 前 ,确实 可 以 通过 检测 navigator.vendor 和 











navigator .vendorSub 来 确定 Firefox 浏览 器 。 但是, Safari 也 依 葫芦 画 球 地 实现 了 相同 的 属性 。 于 是 ， 
这 段 代码 就 会 导致 人 们 作出 错误 的 判断 。 为 检测 正 ， 代 码 测试 了 document.all 和 document . 


uniqueID。 这 就 相当 于 假设 卫 将 来 的 版 本 中 仍然 会 继续 存在 这 两 个 属性 ， 同 时 还 假设 其 他 浏览 器 都 不 
会 实现 这 两 个 属性 。 最 后 ， 这 两 个 检测 都 使 用 了 双 逮 辑 非 操作 符 来 得 到 布尔 值 ( 比 先 存储 后 访问 的 效果 








i 








四 








更 好 )。 


实际 上 , 根据 浏览 器 不 同 将 能 力 组 合 起 来 是 更 可 取 的 方式 。 如 果 你 知道 自己 的 应 用 程序 需要 使 用 某 








些 特定 的 浏览 器 特性 ， 那 么 最 好 是 一 次 性 检测 所 有 相关 特性 ， 而 不 要 分 别 检测 。 看 下 面 的 例子 。 


3， 


// 确 定 浏 览 器 是 否 支持 Netscape 风格 的 插件 


var hasNSPlugins = !! (navigator.plugins && navigator.plugins.length); 


/ /确定 浏览 器 是 否 具 有 DOM1 级 规定 的 能 力 
Var hasDOM1L = !! (document .getElementById && document.createElement && 
document .getElementsByTagName); 





CapabilitiesDetectionExample01.htm 
以 上 例子 展示 了 两 个 检测 : 一 个 检测 浏览 器 是 否 支 持 Netscapte 风格 的 插件 ; 另 一 个 检测 浏览 器 是 
否 具备 DOMI1 级 所 规定 的 能 力 。 得 到 的 布尔 值 可 以 在 以 后 继续 使 用 ， 从 而 节省 重新 检测 能 力 的 时 间 。 


在 实际 开发 中 ， 应 该 将 能 力 检测 作为 确定 下 一 步 解决 方案 的 依据 ， 而 不 是 用 它 来 


b 
月 已 
判断 用 户 使 用 的 是 什么 浏览 器 。 





9.2 怪癖 检测 

与 能 力 检 测 类 似 ， 怪 癖 检 测 ( quirks detection ) 的 目标 是 识别 浏览 器 的 特殊 行为 。 但 与 能 力 检测 确 
认 浏 览 器 支持 什么 能 力 不 同 ,怪癖 检测 是 想 要 知道 浏览 器 存 在 什么 缺陷 〈" 怪 癖 ” 也 就 是 bug )。 这 通常 
需要 运行 一 小 段 代 码 ， 以 确定 某 一 特性 不 能 正常 工作 。 例 如 ，IE8 及 更 早 版 本 中 存在 一 个 bug， 即 如 果 
某 个 实例 属性 与 [[Enumerable]] 标 记 为 false 的 某 个 原型 属性 同名 ， 那 么 该 实例 属性 将 不 会 出 现在 


fon-in 循环 当中 。 可 以 使 用 如 下 代码 来 检测 这 种 “怪癖 ”。 


var hasDontEnumQuirk = function()t{ 











Var oO = { toString : function(){} }; 
for (var prop in o)f{ 
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于 二 (DEGD: == TOString) 
return false; 
} 
} 


return true; 


} (0); 


QuirksDetectionExample01.htm 
以 上 代码 通过 一 个 匿名 函数 来 测试 该 “ 怪 阁 ”， 函 数 中 创建 了 一 个 带 有 tostring () 方 法 的 对 象 。 
在 正确 的 ECMAScript 实现 中 ，tostring 应 该 在 for-in 循环 中 作为 属性 返回 。 
男 一 个 经 常 需要 检测 的 “ 怪 阁 ”是 Safari 3 以 前 版 本 会 枚 举 被 隐藏 的 属性 。 可 以 用 下 面 的 函数 来 检 
测 该 “怪癖 ”。 


var hasEnumShadowsQuirk = function()f{ 












































var o = { toString : function(){} }; 
Var count = 0; 
for (var prop in o)f{ 
EE (DEOB 3 "toString™){ 
Countt++y 
} 
} 


return (count > 1); 


QuirksDetectionExample01.htm 





如 果 浏 览 絮 存在 这 个 bug， 那 么 使 用 for-in 循环 枚 举 带 有 自 定义 的 tostring() 方 法 的 对 象 ， 就 
会 返回 两 个 tostring 的 实例 。 

一 般 来 说 ,“ 怪 阁 ” 都 是 个 别 浏览 右 所 独 有 的 ,而 且 通 常 被 归 为 bug。 在 相关 浏览 带 的 新 版 本 中 ， 这 
些 问题 可 能 会 也 可 能 不 会 被 修复 。 由 于 检测 “ 怪 闸 ”涉及 运行 代码 ， 因 此 我 们 建议 仅 检测 那些 对 你 有 直 
接 影响 的 “ 怪 阁 "， 而 且 最 好 在 脚本 一 开始 就 执行 此 类 检测 ， 以 便 尽 早 解 决 问题 。 


9.3 ”用户 代理 检测 


第 三 种 , 也 是 争议 最 大 的 一 种 客户 端 检测 技术 叫做 用 户 代 理 检 测 。 用 户 代理 检测 通过 检测 用 户 代 理 
字符 串 来 确定 实际 使 用 的 浏览 器 ,在 每 一 次 HITP 请 求 过 程 中 , 用 户 代理 字符 串 是 作为 响应 首部 发 送 的 ， 
而 且 该 字符 串 可 以 通过 JavaScript 的 navigator.userAgent 属性 访问 。 在 服务 器 端 , 通过 检测 用 户 代 
理 字符 串 来 确定 用 户 使 用 的 浏览 器 是 一 种 常用 而 且 广 为 接受 的 做 法 。 而 在 客户 端 , 用 户 代 理 检测 一 般 被 
当 作 一 种 万 不 得 已 才 用 的 做 法 ， 其 优先 级 排 在 能 力 检 测 和 ( 或 ) 怪癖 检测 之 后 。 

提 到 与 用 户 代 理 字符 串 有 关 的 争议 ,就 不 得 不 提 到 电子 欺骗 ( spoofing )。 所 谓 电子 欺骗 ， 就 是 指 浏 
览 絮 通过 在 自己 的 用 户 代 理 字 符 串 加 入 一 些 错 误 或 误导 性 信息 ,来 达到 欺骗 服务 器 的 目的 。 要 弄 清楚 这 
个 问题 的 来 龙 去 脉 ， 必 须 从 Web 问世 初期 用 户 代 理 字符 串 的 发 展 讲 起 。 
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9.3.1 用 户 代 理 字符 串 的 历史 
HTTP 规范 (包括 1.0 和 1.1 版 ) 明确 规定 ,浏览 器 应 该 发 送 简 短 的 用 户 代 理 字 符 串 ， 指 明 浏览 器 的 
































名 称 和 版 本 号 。RFC 2616〈 即 HTTP 1.1 协议 规范 ) 是 这 样 描述 用 户 代 理 字符 串 的 : 
“D00000000000000000000000000000000000000 
UUOUO0OUO0O00000000000000000000000000000000000 
D00000000000000000000 










































































上 述 规范 进一步 规定 ， 用 户 代理 字符 串 应 该 以 一 组 产品 的 形式 给 出 ， 字 符 串 格式 为 : 标识 符 /产品 
但 是 ， 现 实 中 的 用 户 代 理 字符 串 则 绝 没 有 如 此 简单 。 
1. 早期 的 浏览 器 
1993 年 ， 美国 NCSA (National Center for Supercomputing Applications ， 国 家 超级 计算 机 中 心 ) 发 布 
了 世界 上 第 一 款 Web 浏览 器 Mosaic。 这 款 浏览 需 的 用 户 代理 字符 串 非 常 简单 ， 类 似 如 下 所 示 。 


Mosaic/0.9 


尽管 这 个 字符 串 在 不 同 操作 系统 和 不 同 平台 下 会 有 所 变化 , 但 其 基本 格式 还 是 简单 明了 的 。 正 斜 杠 
前 面 的 文本 表示 产品 名 称 ( 有 时 候 会 出 现 NCSA Mosaic 或 其 他 类 似 字样 )， 而 斜 杠 后 面 的 文本 是 产品 的 
版 本 号 。 

Netscape Communications 公司 介入 浏览 器 开发 领域 后 , 遂 将 自己 产品 的 代号 定名 为 Mozilla ( Mosaic 
Killer 的 简写 ， 意 即 Mosaic 杀手 )。 该 公司 第 一 个 公开 发 行 版 ，Netscape Navigator 2 的 用 户 代理 字符 串 
具有 如 下 格式 。 

Mozilla/ 版 本 号 [语言 ] (平台 ; 加 密 类 型 ) 

Netscape 在 坚持 将 产品 名 和 版 本 号 作为 用 户 代 理 字符 串 开头 的 基础 上 ， 又 在 后 面 依 次 添加 了 下 列 
信息 。 

口 语言 : 即 语言 代码 ， 表 示 应 用 程序 针对 哪 种 语言 设计 。 

口 平台 : 即 操作 系统 和 (或) 平台 ,表示 应 用 程序 的 运行 环境 。 

口 加 密 类 型 . 即 安全 加 密 的 类 型 。 可 能 的 值 有 U (128 位 加 密 )、I( 40 位 加 密 ) 和 N (未 加 密 )。 
典型 的 Netscape Navigator 2 的 用 户 代 理 字符 串 如 下 所 示 。 

Mozilla/2.02 [fr] (WinNT; I) 

这 个 字符 串 表 示 浏 览 器 是 Netscape Navigator 2.02， 为 法 语 国家 编译 ， 运 行 在 Windows NT 平台 下 ， 
加 密 类 型 为 40 位 。 那 个 时 候 ， 通 过 用 户 代理 字符 串 中 的 产品 名 称 ， 至 少 还 能 够 轻易 地 确定 用 户 使 用 的 
是 什么 浏览 


2. Netscape Navigator 3 和 Internet Explorer 3 


1996 年 ，Netscape Navigator 3 发 布 ， 随 即 超越 Mosaic 成 为 当时 最 流行 的 Web 浏览 器 。 而 用 户 代 理 
字符 串 只 作 了 一 些小 的 改变 ,删除 了 语言 标记 ,同时 允许 添加 操作 系统 或 系统 使 用 的 CPU 等 可 选 信息 。 
于 是 ,格式 变 成 如 下 所 示 。 

Mozilla/ 版 本 号 (平台 ; 加 密 类 型 [; 操作 系统 或 CPU 说 明 ]) 

运行 在 Windows 系统 下 的 Netscape Navigator 3 的 用 户 代理 字符 串 大 致 如 下 。 


Mozilla/3.0 (Win95; U) 
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这 个 字符 串 表 示 Netscape Navigator 3 运行 在 Windows 95 中 ， 采 用 了 128 位 加 密 技 术 。 可 见 ， 在 
Windows 系统 中 ， 字 符 串 中 的 操作 系统 或 CPU 说 明 被 省 略 了 。 
Netscape Navigator 3 发 布 后 不 久 ， 微 软 也 发 布 了 其 第 一 款 赢得 用 户 广泛 认可 的 Web 浏览 器 ， 即 


Internet Explorer 3。 


























日 于 Netscape 浏览 器 在 当时 占 绝对 市 场 份 笑 ， 许 多 服务 器 在 提供 网 页 之 前 都 要 专门 














检测 该 浏览 锅 。 如 果 用 户 通过 IE 打 不 开 相 关 网 页 ， 那 么 这 个 新 生 的 浏览 器 很 可 能 就 会 天 折 。 于 是 ， 微 
软 决定 将 下 的 用 户 代理 字符 串 修 改 成 兼容 Netscape 的 形式 ， 结 果 如 下 : 


Mozilla/2.0 ( 


例如 ，Windows 95 平台 下 的 Internet Explorer 3.02 带 有 如 下 用 户 代理 字符 串 ; 


Mozilla/2.0 ( 




















浏览 器 标识 的 惯例 。 











compatible; MSIE 版 本 号 ; 操作 系统 ) 





Ud 





compatible; MSIE 3.02; Windows 95) 


1 于 当时 的 大 多 数 浏览 器 嗅 探 程序 只 检测 用 户 代 理 字符 串 中 的 产品 名 称 部 分 ， 结 果 正 就 成 功 地 将 
自己 标识 为 Mozilla， 从 而 伪装 成 Netscape Navigator。 微 软 的 这 一 做 法 招致 了 很 多 批评 ， 因 为 它 违 反 了 








更 不 规范 的 是 ,下 将 真正 的 浏览 器 版 本 号 插入 到 了 字符 串 的 中 间 。 


字符 串 中 另外 一 个 有 趣 的 地 方 是 标识 符 Mozilla 2.0( 而 不 是 3.0 )。 毕 竟 ， 当 时 的 主流 版 本 是 3.0， 
改 成 3.0 应 该 对 微软 更 有 利 才 对 。 但 真正 的 谜底 到 现在 还 没有 揭 开 一 一 但 很 可 能 只 是 人 为 琉 忽 所 致 。 

3. Netscape Communicator 4 和 IE4~IE8 

1997 年 8 月 ，Netscapte Communicator 4 发 布 (这 一 版 将 浏览 器 名 字 中 的 Navigator 换 成 了 Commu- 
nicator )。Netscape 继续 遵循 了 第 3 版 时 的 用 户 代理 字 符 串 格式 : 


Mozilla/ 版 本 号 (平台 ; 加 密 类 型 [; 操作 系统 或 CPU 说 明 ] ) 





Mozilla/4.0 

















因此 ，Windows 98 平 台中 第 4 版 的 用 户 代 理 字符 串 如 下 所 示 : 


(Win98; I) 











Netscape 在 发 布 补丁 时 ， 子 版 本 号 也 会 相应 提高 ， 用 户 代理 字符 串 如 下 面 的 4.79 版 所 示 : 


Mozilla/4.79 





(Win98; I) 





但 是 ,微软 在 发 布 Internet Explorer 4 时， 顺便 将 用 户 代 理 字 符 串 修改 成 了 如 下 格式 : 


Mozilla/4.0 (compatible; MSIE 版 本 号 ; 操作 系统 ) 


换 句 话说 ， 对 于 Windows 98 中 运行 的 IE4 而 言 ， 其 用 户 代 理 字 符 串 为 : 


Mozilla/4.0 


经 过 此 番 修 改 ，Mozilla 版 本 号 就 与 实际 的 正版 本 号 一 至 了， 为 识别 它们 的 第 四 代 浏 览 絮 提供 了 方 
便 。 但 令 人 遗憾 的 是 , 两 者 的 一 致 性 仅 限于 这 一 个 版 本 。 在 Internet Explorer 4.5 发 布 时 ( 只 针对 Macs )， 

















(compatible; MSIE 4.0; Windows 98) 


虽然 Mozilla 版 本 号 还 是 4, 但 IE 版 本 号 则 改 成 了 如 下 所 示 : 


Mozilla/4.0 


compatible; MSIE 4.5; Mac_ PowerPC) 


此 后 ,IE 的 版 本 一 直到 7 都 沿袭 了 这 个 模式 : 


Mozilla/4.0 


compatible; MSIE 7.0; Windows NT 5.1) 


而 IE8 的 用 户 代 理 字符 串 中 添加 了 呈现 引 警 (Trident ) 的 版 本 号 : 


Mozilla/4.0 

















compatible; MSIE 版 本 号 ; 操作 系统 ; Trident/Trident 版 本 号 ) 
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例如 : 
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) 


这 个 新 增 的 Trident 记号 是 为 了 让 开发 人 员 知 道 IE8 是 不 是 在 兼容 模式 下 运行 。 如 果 是 , 则 MSIE 的 
版 本 号 会 变 成 7, 但 Trident 及 版 本 号 还 会 留 在 用 户 代 码 字 符 串 中 : 

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0) 

增加 这 个 记号 有 助 于 分 辨 浏览 器 到 底 是 IE7 (没有 Trident 记号 )， 还 是 运行 在 兼容 模式 下 的 IE8。 

IE9 对 字符 串 格式 做 了 一 点 调整 。Mozilla 版 本 号 增加 到 了 5.0, 而 Trident 的 版 本 号 也 升 到 了 5.0。 IE9 
默认 的 用 户 代 理 字符 串 如 下 : 

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0) 


如 果 IE9 运行 在 兼容 模式 下 ， 字 符 串 中 的 Mozilla 版 本 号 和 MSIE 版 本 号 会 恢复 旧 的 值 , 但 Trident 
的 版 本 号 仍然 是 5.0。 例 如 ， 下 面 就 是 正 9 运行 在 正 7 兼容 模式 下 的 用 户 代 理 字符 串 : 

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0) 

所 有 这 些 变化 都 是 为 了 确保 过 去 的 用 户 代 理 检 测 脚本 能 够 继续 发 挥 作用 , 同时 还 能 给 新 脚本 提供 更 
丰富 的 信息 。 

4. Gecko 

Gecko 是 Firefox 的 呈现 引擎 。 当 初 的 Gecko 是 作为 通用 Mozilla 浏览 器 的 一 部 分 开发 的 ， 而 第 一 个 
采用 Gecko 引擎 的 浏览 器 是 Netscape 6。 为 Netscape 6 编写 的 一 份 规范 中 规定 了 未 来 版 本 中 用 户 代理 
符 串 的 构成 。 这 个 新 格式 与 4.x 版 本 中 相对 简单 的 字符 串 相 比 ， 有 着 非常 大 的 区 别 ， 如 下 所 示 : 


Mozilla/Mozilla 版 本 号 (平台 ; 加 密 类 型 ; 操作 系统 或 CPU; 语言 ; 预先 发 行 版 本 ) 
Gecko/Gecko 版 本 号 应 用 程序 或 产品 /应 用 程序 或 产品 版 本 号 


这 个 明显 复杂 了 很 多 的 用 户 代 理 字 符 串 中 殖 含 很 多 新 想法 。 下 表 列 出 了 字符 串 中 各 项 的 用 意 。 





















































































































































































































































字符 串 项 必需 吗 说 明 

Mozilla 版 本 号 是 Mozilla 的 版 本 号 

平台 是 浏览 器 运行 的 平台 。 可 能 的 值 包括 Windows、Mac 和 X11 ( 指 Unix 的 
X 窗 口 系统 ) 

加 密 类 型 是 加 密 技 术 的 类 型 : U 表 示 128 位 、I 表 示 40 位 、N 表 示 未 加 密 

操作 系统 或 CPU 是 浏览 器 运行 的 操作 系统 或 计算 机 系统 使 用 的 CPU。 在 Windows 平 台 
中 ,这 一 项 指 Windows 的 版 本 ( 如 WinNT、Win95， 等 等 ) 。 如 果 平 台 
是 Macintosh, 这 一 项 指 CPU (针对 PowerPC 的 68K、PPC, 或 MacIntel ) 。 
如 果 平 台 是 X11， 这 一 项 是 Unix 操 作 系 统 的 名 称 ， 与 使 用 Unix 命 令 
uname-sm 得 到 的 名 称 相 同 

语言 是 浏览 器 设计 时 所 针对 的 目标 用 户 语言 

预先 发 行 版 本 否 最 初 用 于 表示 Mozilla 的 预先 发 行 版 本 , 现在 则 用 来 表示 Gecko 呈 现 引 
擎 的 版 本 号 

Gecko 版 本 号 是 Gecko 呈 现 引 警 的 版 本 号 ， 但 由 yyyymmdd 格 式 的 日 期 表示 

应 用 程序 或 产品 否 使 用 Gecko 的 产品 名 。 可 能 是 Netscape 、Firefox 等 

应 用 程序 或 产品 版 本 号 否 应 用 程序 或 产品 的 版 本 号 ; 用 于 区 分 Mozilla 版 本 号 和 Gecko 版 本 号 
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为 了 帮助 读者 更 好 地 理解 Gecko 的 用 户 代 理 字符 串 ,下面 我 们 来 看 儿 个 从 基于 Gecko 的 浏览 器 中 取 
得 的 字符 串 。 
Windows XP 下 的 Netscape 6.21: 








Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1 
Linux 下 的 SeaMonkey 1.1a: 

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a 
Windows XP 下 的 Firefox 2.0.0.11: 

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 
Mac OS 义 下 的 Camino 1.5.1: 

Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.6) Gecko/20070809 Camino/1.5.1 


以 上 这 些 用 户 代 理 字符 串 都 取 自 基于 Gecko 的 浏览 器 ( 只 是 版 本 有 所 不 同 )。 很 多 时 候 , 检测 特定 的 
浏览 需 还 不 如 搞 清 楚 它 是 否 基于 Gecko 更 重要 。 每 个 字符 串 中 的 Mozilla 版 本 都 是 5.0， 自 从 第 一 个 基于 
Gecko 的 浏览 器 发 布 时 修改 成 这 个 样子 ， 至 今 就 没有 改变 过 ; 而 且 ， 看 起 来 以 后 似乎 也 不 会 有 什么 变化 。 

随 着 Firefox 4 发 布 ，Mozilla 简化 了 这 个 用 户 代理 字符 串 。 主 要 改变 包括 以 下 几 方面 。 

口 删除 了 “语言 ”记号 〈 例 如 ， 前 面 例子 中 的 “en-US”)。 

口 在 浏览 器 使 用 强加 密 (默认 设置 ) 时 , 不 显示 “加 密 类 型 "。 也 就 是 说 ，Mozilla 用 户 代理 字符 是 
中 不 会 青 出 现 “U”， 而 “I” 和 “N” 还 会 照常 出 现 。 

口 “ 平 台 ” 记 号 从 Windows 用 户 代理 字符 串 中 删除 了 ,“ 操 作 系 统 或 CPU” 中 始终 都 包含 
“Windows” 字 符 串 。 

口 “Gecko 版 本 号 ”固定 为 “Gecko/20100101”。 

最 后 ，Firefox 4 用 户 代 理 字符 串 变 成 了 下 面 这 个 样子 : 

Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox 4.0.1 

5. WebKit 

2003 年 ，Apple 公司 宣布 要 发 布 自己 的 Web 浏览 器 , 名 字 定 为 Safari。Safari 的 呈现 引擎 叫 WebKit， 
是 Linux 平 台中 Konqueror 浏览 器 的 呈现 引擎 KHTML 的 一 个 分 支 。 几 年 后 ，WebKit 独立 出 来 成 为 了 一 
个 开源 项 目 ， 专 注 于 呈现 引擎 的 开发 。 

这 款 新 浏览 姻 和 呈现 引 敬 的 开发 人 员 也 遇 到 了 与 Internet Explorer 3.0 类 似 的 问题 : 如 何 确保 这 款 浏 
览 髓 不 被 流行 的 站 点 拒 之 门 外 ? 答案 就 是 向 用 户 代 理 字符 串 中 放 入 足够 多 的 信息 , 以 便 站 点 能 够 信任 它 
与 其 他 流行 的 浏览 器 是 兼容 的 。 于 是 ，WebKit 的 用 户 代 理 字符 串 就 具备 了 如 下 格式 : 

Mozilla/5.0 (00;0000; 00000 cev; U0) ApplewWebKit/AppleWebKit [| [0] 

(KHTML, like Gecko) Safari/Safari[] [D0 


以 下 就 是 一 个 示例 : 


Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML，1ike Gecko) 
Safari/125.1 


显然 , 这 又 是 一 个 很 长 的 用 户 代 理 字 符 串 。 其 中 不 仅 包 含 了 Apple WebKit 的 版 本 号 , 也 包含 了 Safari 
的 版 本 号 。 出 于 兼容 性 的 考虑 ， 有 关 人 员 很 快 就 决定 了 将 Safari 标识 为 Mozilla。 至 今 ， 基 于 WebKit 的 
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所 有 浏览 器 都 将 自己 标识 为 Mozilla 5.0， 与 基于 Gecko 的 浏览 器 完全 一 样 。 但 Safari 的 版 本 号 则 通常 是 
浏览 器 的 编译 版 本 号 ， 不 一 定 与 发 布 时 的 版 本 号 对 应 。 换 句 话 说， 虽然 Safari 1.25 的 用 户 代理 字符 串 中 
包含 数字 125.1， 但 两 者 却 不 一 一 对 应 。 

Safari 预 发 行 1.0 版 用 户 代理 字符 串 中 最 耐人寻味 ， 也 是 最 饱 受 诉 病 的 部 分 就 是 字符 串 " (KHTML， 
like Gecko)"。Apple 因此 收 到 许多 开发 人 员 的 反馈 ， 他 们 认为 这 个 字符 串 明显 是 在 欺骗 客户 端 和 服 
务 器 ， 实 际 上 是 想 让 它们 把 Safari 当成 Gecko( 好 像 光 添加 Mozilla/5.0 还 嫌 不 够 )。Apple 的 回应 与 
微软 在 IE 的 用 户 代理 字符 串 遭 到 责难 时 如 出 一 入 : Safari 与 Mozilla 兼容 ， 因 此 网 站 不 应 该 将 Safari 用 
户 拒 之 门 外 ， 否 则 用 户 就 会 认为 自己 的 浏览 器 不 受 支 持 。 

到 了 Safari 3.0 发 布 时 ， 其 用 户 代 理 字符 串 又 稍微 变 长 了 一 点 。 下 面 这 个 新 增 的 Version 记号 一 直到 
现在 都 被 用 来 标识 Safari 实际 的 版 本 号 : 


Mozilla/5.0 (Macintosh; U; PPC Mac OS XxX; en) AppleWebKRKit/522.15.5 (KHTML, like 
Gecko) Version/3.0.3 Safari/522.15.5 


需要 注意 的 是 ， 这 个 变化 只 在 Safari 中 有 ， 在 WebKit 中 没有 。 换 句 话 说 ， 其 他 基于 WebKit 的 浏 
览 器 可 能 没有 这 个 变化 。 一 般 来 说 ， 确 定 浏览 器 是 否 基于 WebKit 要 比 确定 它 是 不 是 Safari 更 有 价值 ， 
就 像 针 对 Gecko 一 样 。 

6. Konqueror 

与 KDE Linux 集成 的 Konqueror， 是 一 款 基 于 KHTML 开源 呈现 引擎 的 浏览 管 Konqueror 只 
能 在 Linux 中 使 用 ,但 它 也 有 数量 可 观 的 用 户 。 为 确保 最 大 限度 的 兼容 性 ， nn 本 IE 选择 了 如 
下 用 户 代理 字符 串 格式 : 


Mozilla/5.0 (compatible; Konqueror/ 版 本 号 ; 操作 系统 或 CPU ) 


不 过 ,为 了 与 WebKit 的 用 户 代 理 字符 串 的 变化 保持 一 臻 ，Konqueror 3.2 又 有 了 变化 ， 以 如 下 格式 
将 自己 标识 为 KHTML: 





































































































































































































Mozilla/5.0 (compatible; Konqueror/ 版 本 号 ; 操作 系统 或 CPU) KHTML/ KHTML 版 本 号 (like Gecko) 
下 面 是 一 个 例子 : 
Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko) 


其 中 ,Konqueror 与 KHTML 的 版 本 号 比较 一 致 ,即使 有 差别 也 很 小 ,例如 Konqueror 3.5 使 用 KHTML 
3;3.1s 

7. ne 

谷歌 公司 的 Chrome 浏览 器 以 WebKit 作为 呈现 引擎 ,但 使 用 了 不 同 的 JavaScript 引擎 ,在 Chrome 0.2 
这 个 最 初 的 beta 版 中 , 用 户 代理 字符 串 完全 取 自 WebKit， 只 添加 了 一 段 表示 Chrome 版 本 号 的 信息 , 格 
式 如 下 : 


Mozilla/5.0 ( 平台 ; 加 密 类 型 ; 操作 系统 或 CPU; 语言 ) AppleWebKit/AppleWebKit 版 本 号 (KHTML， 
like Gecko) Chrome/ Chrome 版 本 号 Safari/ Safari 版 本 


Chrome 7 的 完整 的 用 户 代 理 字符 串 如 下 : 


Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 (KHTML, 
like Gecko) Chrome/7.0.517.44 Safari/534.7 


其 中 ，WebKit 版 本 与 Safari 版 本 看 起 来 似乎 始终 会 保持 一 致 ， 尽 管 没有 十 分 的 把 握 。 
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8. Opera 

仅 就 用 户 代 理 字符 串 而 言 ，Opera 应 该 是 最 有 争议 的 一 款 浏 览 器 了 。Opera 默认 的 用 户 代理 字符 串 
是 所 有 现代 浏览 器 中 最 合理 的 一 一 正确 地 标识 了 自身 及 其 版 本 号 。 在 Opera 8.0 之 前 ， 其 用 户 代理 字符 
串 采用 如 下 格式 : 

Opera/ 版 本 号 (操作 系统 或 CPU; 加 密 类 型 ) [语言 ] 

Windows XP 中 的 Opera 7.54 会 显示 下 面 的 用 户 代 理 字符 串 : 

Opera/7.54 (Windows NT 5.1; U) [en] 

Opera 8 发 布 后 ， 用 户 代理 字符 串 的 “语言 ”部 分 被 移 到 圆 括号 内 ， 以 便 更 好 地 与 其 他 浏览 器 匹配 ， 
如 下 所 示 : 

Opera/ 版 本 号 (操作 系统 或 CPU; 加 密 类 型 ; 语言 ) 

Windows XP 中 的 Opera 8 会 显示 下 面 的 用 户 代 理 字符 串 : 

Opera/8.0 (Windows NT 5.1; U; en) 

默认 情况 下 ，Opera 会 以 上 面 这 种 简单 的 格式 返回 一 个 用 户 代 理 字符 串 。 目 前 来 看 ，Opera 也 是 主 
要 浏览 器 中 唯一 一 个 使 用 产品 名 和 版 本 号 来 完全 彻底 地 标识 自身 的 浏览 器 。 可 是 ， 与 其 他 浏览 器 一 样 ， 
Opera 在 使 用 自己 的 用 户 代理 字符 串 时 也 遇 到 了 问题 。 即 使 技术 上 正确 ， 但 因特网 上 仍然 有 不 少 浏览 器 
嗅 探 代码 ， 只 钟情 于 报告 Mozilla 产品 名 的 那些 用 户 代 理 字符 串 。 另 外 还 有 相当 数量 的 代码 则 只 对 下 或 
Gecko 感 兴趣 。Opera 没有 选择 通过 修改 自身 的 用 户 代 理 字符 串 来 迷惑 嗅 探 代 码 ， 而 是 干脆 选择 通过 修 
改 自身 的 用 户 代 理 字符 串 将 自身 标识 为 一 个 完全 不 同 的 浏览 器 。 

Opera9 以 后 ， 出 现 了 两 种 修改 用 户 代 理 字符 串 的 方式 。 一 种 方式 是 将 自身 标识 为 男 外 一 个 浏览 
如 Firefox 或 者 卫 。 在 这 种 方式 下 ， 用 户 代理 字符 串 就 如 同 Firefox 或 IE 的 用 户 代 理 字符 串 一 样 ， 只 不 
过 末尾 追加 了 字符 串 opera 及 Opera 的 版 本 号 。 下 面 是 一 个 例子 : 


Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.50 














































































































Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50 


第 一 个 字符 串 将 Opera 9.5 标识 为 Firefox 2， 同 时 带 有 Opera 版 本 信息 。 第 二 个 字符 串 将 Opera 9.5 9 
标识 为 耻 6， 也 包含 了 Opera 版 本 信息 。 这 两 个 用 户 代 理 字符 串 可 以 通过 针对 Firefox 或 下 的 大 多 数 测 
试 ， 不 过 还 是 为 识别 Opera 留 下 了 余地 。 
Opera 标识 自身 的 男 一 种 方式 , 就 是 把 自己 装扮 成 Firefox 或 了 正 。 在 这 种 隐瞒 真实 身份 的 情况 下 , 用 
户 代理 字 符 串 实际 上 与 其 他 浏览 器 返回 的 相同 一 一 既 没有 opera 字样 ， 也 不 包含 Opera 版 本 信息 。 换 
名 话说 ， 在 启用 了 身份 隐瞒 功能 的 情况 下 ， 无 法 将 Opera 和 其 他 浏览 器 区 别 开 来 。 另 外 ， 由 于 Opera 喜 
欢 在 不 告知 用 户 的 情况 下 针对 站 点 来 设置 用 户 代理 字符 串 ， 因 此 问题 就 更 复杂 化 了 。 例如， 打开 My 
Yahoo! 站 点 (http://my.yahoo.com ) 会 自动 导致 Opera 将 自己 装扮 成 Firefox。 如 此 一 来 ,要 想 识 别 Opera 
就 难 上 加 难 了 。 















































在 Opera7 以 前 的 版 本 中 ,Opera 会 解析 Windows 操作 系统 字符 串 的 含义 。 例 如 ， 
Windows NT 5.1 实际 上 就 是 Windows XP， 因 此 Opera 会 在 用 户 代理 字符 串 中 包含 
Windows XP 而 非 Windows NT5.1。 为 了 与 其 他 浏览 器 更 兼容 ，Opera7 开始 包含 正式 
的 操作 系统 版 本 ， 而 非 解析 后 的 版 本 。 
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Opera 10 对 代理 字符 串 进 行 了 修改 。 现 在 的 格式 是 : 
Opera/9.80 (操作 系统 或 CPU; 加 密 类 型 ) 语言 ) Presto/Presto 版 本 号 Version/ 版 本 号 


注意 ,初始 的 版 本 号 Opera/9.80 是 固定 不 变 的 。 实 际 并 没有 Opera 9.8, 但 工程 师 们 担心 写 得 不 好 的 
浏览 器 嗅 探 脚 本 会 将 Opera/10.0 错误 的 解释 为 Opera 1, 而 不 是 Opera 10。 因 此 , Opera 10 又 增加 了 Presto 
记号 (Presto 是 Opera 的 呈现 引擎 ) 和 Version 记号 ， 后 者 用 以 保存 实际 的 版 本 号 。 以 下 是 Windows7 中 
Opera 10.63 的 用 户 代 理 字符 串 : 

Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63 

9. iOS 和 Android 

移动 操作 系统 iOS 和 Android 默认 的 浏览 器 都 基于 WebKit, 而 且 都 像 它们 的 桌面 版 一 样 ,共享 相同 
的 基本 用 户 代 理 字 符 串 格式 。iOS 设备 的 基本 格式 如 下 : 

Mozilla/5.0 (00; 0000;00000 cpu like Mac os x; 00) 
AppleWebKit/ApplLewebKitD0O0OD (KHTML, like Gecko) Version/D0000O 
Mobile/D0DD0UD safari/safari[] 00 

注意 用 于 辅助 确定 Mac 操作 系统 的 "Like Mac os xX" 和 额外 的 Mobile 记号 。 一 般 来 说 ，Mobile 
记号 的 版 本 号 (移动 版 本 号 ) 没什么 用 ， 主 要 是 用 来 确定 WebKit 是 移动 版 ， 而 非 桌面 版 。 而 平台 则 可 


能 是 "iPhone" 、"iPod" 或 "ipPad"。 例 如 ; 






































Mozilla/5.0 (iPhone; U; CPU iPhone OS 3 0 like Mac OS X; en-us) 
AppleWebKRKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 


在 iOS 3 之 前 ， 用 户 代理 字符 串 中 不 会 出 现 操 作 系统 版 本 号 。 
Android 浏览 器 中 的 默认 格式 与 iOS 的 格式 相似 ， 没 有 移动 版 本 号 (但 有 Mobile 记号 )。 例 如 : 


Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) 
AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 


这 是 Google Nexus One 手机 的 用 户 代 理 字 符 串 。 不 过 ， 其 他 Android 设备 的 模式 也 一 样 。 


9.3.2 ”用 户 代 理 字 符 串 检测 技术 

考虑 到 历史 原因 以 及 现代 浏览 器 中 用 户 代理 字符 串 的 使 用 方式 , 通过 用 户 代理 字符 串 来 检测 特定 的 
浏览 器 并 不 是 一 件 轻松 的 事 。 因 此 ， 首 先 要 确定 的 往往 是 你 需要 多 么 具体 的 浏览 器 信息 。 一 般 情 况 下 ， 
知道 呈现 引擎 和 最 低 限 度 的 版 本 就 足以 决定 正确 的 操作 方法 了 。 例 如 ,我们 不 推荐 使 用 下 列 代码 ; 


if (isIE6 || isIE7) { // 不 推荐 !!! 
// 代 码 






































} 

这 个 例子 是 想 要 在 浏览 器 为 IE6 或 了 E7 时 执行 相应 代码 。 这 种 代码 其 实 是 很 脆弱 的 ， 因 为 它 要 依据 
特定 的 版 本 来 决定 做 什么 。 如 果 是 IE8 怎么 办 呢 ? 只 要 三 有 新 版 本 出 来 ， 就 必须 更 新 这 些 代 码 。 不 过 ， 
像 下面 这 样 使 用 相对 版 本 号 则 可 以 避免 此 问题 : 


if (ieVver >=6){ 
// 代 码 














} 
这 个 例子 首先 检测 正 的 版 本 号 是 否 至 少 等 于 6, 如 果 是 则 执行 相应 操作 。 这 样 就 可 以 确保 相应 的 代 
码 将 来 照样 能 够 起 作用 。 我 们 下 面 的 浏览 器 检测 脚本 就 将 本 着 这 种 思路 来 编写 。 
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1. 识别 呈现 引擎 

如 前 所 述 ， 确 切 知道 浏览 器 的 名 字 和 版 本 号 不 如 确切 知道 它 使 用 的 是 什么 呈现 引擎。 如 果 Firefox、 
Camino 和 Netscape 都 使 用 相同 版 本 的 Gecko， 那 它们 一 定 支 持 相同 的 特性 。 类 似 地 ， 不 管 是 什么 浏览 
器 ， 只 要 它 跟 Safari 3 使 用 的 是 同一 个 版 本 的 WebKit， 那 么 该 浏览 器 也 就 跟 Safari 3 具备 同样 的 功能 。 
因此 ， 我 们 要 编写 的 脚本 将 主要 检测 五 大 呈现 引擎 : IE、Gecko、WebKit、KHTML 和 Opera。 

为 了 不 在 全 局 作用 域 中 添加 多 余 的 变量 , 我们 将 使 用 模块 增强 模式 来 封装 检测 脚本 。 检 测 脚本 的 基 
本 代码 结构 如 下 所 示 : 


Var Client = function(){ 



























































Var engine = { 


// 呈 现 引擎 
ie: 0, 
gecko: 0, 
webkit: 0, 
khtmls: 0, 
opera: 0， 


/ /具体 的 版 本 号 
ver: null 


下 
// 在 此 检测 呈现 引 掌 、 平 台 和 设备 


return { 
engine : engine 
}3 
局 
这 里 声明 了 一 个 名 为 client 的 全 局 变量 ,用 于 保存 相关 信息 。 匿 名 函数 内 部 定义 了 一 个 局 部 变量 
engine， 它 是 一 个 包含 默认 设置 的 对 象 字 面 量 。 在 这 个 对 象 字 面 量 中 ， 每 个 呈现 引擎 都 对 应 着 一 个 属 
性 ， 属 性 的 值 默 认为 0。 如果 检测 到 了 哪个 呈现 引擎 ， 那 么 就 以 浮 点 数值 形式 将 该 引擎 的 版 本 号 写 和 人 相 
应 的 属性 。 而 呈现 引擎 的 完整 版 本 ( 是 一 个 字符 串 )， 则 被 写 入 ver 属性 。 作 这 样 的 区 分 可 以 支持 像 下 9 
面 这 样 编写 代码 : 
if (client.engine.ie) { // 如 果 是 IE，client.ie 的 值 应 该 大 于 0 
// 针 对 IE 的 代码 
} else if (client.engine.gecko > 1.5){ 


if (client.engine.ver == "1.8.1"){ 


/7 针对 这 个 版 本 执行 全 此 操作“ 






































} 

} 

在 检测 到 一 个 呈现 引 警 之后， 其 client .engine 中 对 应 的 属性 将 被 设置 为 一 个 大 于 0 的 值 ， 该 值 
可 以 转换 成 布尔 值 true。 这样, 就 可 以 在 if 语句 中 检测 相应 的 属性 ， 以 确定 当前 使 用 的 呈现 引擎 ， 连 
具体 的 版 本 号 都 不 必 考 虑 。 鉴 于 每 个 属性 都 包含 一 个 浮 点 数值 ， 因 此 有 可 能 丢失 某 些 版 本 信息 。 例 如 ， 
将 字符 串 "1.8.1" 传 人 parseFloat () 后 会 得 到 数值 1.8。 不 过 ， 在 必要 的 时 候 可 以 检测 ver 属性 ， 该 
属性 中 会 保存 完整 的 版 本 信息 。 

要 正确 地 识别 呈现 引擎 ， 关 键 是 检测 顺序 要 正确 。 由 于 用 户 代 理 字 符 串 存在 诸多 不 一 致 的 地 方 ， 如 
果 检 测 顺序 不 对 ， 很 可 能 会 导致 检测 结果 不 正确 。 为 此 ， 第 一 步 就 是 识别 Opera， 因 为 它 的 用 户 代理 字 
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符 串 有 可 能 完全 模仿 其 他 浏览 器 。 我 们 不 相信 Opera， 是 因为 (任何 情况 下 ) 其 用 户 代理 字符 串 (都 ) 
不 会 将 自己 标识 为 Opera。 

要 识别 Opera， 必 须 得 检测 window .opera 对 象 。Opera 5 及 更 高 版 本 中 都 有 这 个 对 象 ， 用 以 保存 
与 浏览 器 相关 的 标识 信息 以 及 与 浏览 器 直接 交互 。 在 Opera 7.6 及 更 高 版 本 中 ,调用 version () 方 法 可 
以 返回 一 个 表示 浏览 融 版 本 的 字符 串 ,而 这 也 是 确定 Opera 版 本 号 的 最 佳 方式 .要 检测 更 早 版 本 的 Opera， 
可 以 直接 检查 用 户 代 理 字符 串 ， 因 为 那些 版 本 还 不 支持 隐瞒 身份 。 不 过 ，2007 底 Opera 的 最 高 版 本 已 经 
是 9.5 了 ， 所 以 不 太 可 能 有 人 还 在 使 用 7.6 之 前 的 版 本 。 那 么 ， 检 测 呈 现 引擎 代码 的 第 一 步 ， 就 是 编写 
如 下 代码 : 

if (window.opera)t{ 


engine.ver = window.opera.version(); 
engine.opera = parseFloat (engine.ver); 






































} 

这 里 ， 将 版 本 的 字符 串 表 示 保 存在 了 engine.ver 中 ， 将 浮 点 数值 表示 的 版 本 保存 在 了 
engine.opera 中 。 如 果 浏 览 絮 是 Opera， 测试 window .opera 就 会 返回 true; 和 否则， 就 要 看 看 是 其 
他 的 什么 浏览 器 了 。 

应 该 放 在 第 二 位 检测 的 呈现 引擎 是 WebKit。 因 为 WebKit 的 用 户 代 理 字符 串 中 包含 "Gecko" 和 
"KHTML" 这 两 个 子 字 符 串 ， 所 以 如 果 首 先 检测 它们 ， 很 可 能 会 得 出 错误 的 结论 。 

不 过 , WebKit 的 用 户 代理 字符 串 中 的 "ApplewebKit" 是 独一无二 的 , 因此 检测 这 个 字符 串 最 合适 。 
下 面 就 是 检测 该 字符 串 的 示例 代码 : 


var ua = navigator.userAgent; 









































if (window.opera)t{ 
engine.ver = window.opera.version(); 
engine.opera = parseFloat (engine.ver); 
} else if (/AppleWebKit\/(\S+)/.test (ua))t{ 
engine .ver = RegExp["$1"]; 
engine .Webkit = parseFloat (engine.ver); 
} 


代码 首先 将 用 户 代 理 字 符 串 保存 在 变量 ua 中 。 然 后 通过 正则 表达 式 来 测试 其 中 是 否 包 含 字符 串 
"ApplewebKit" ， 并 使 用 捕获 组 来 取得 版 本 号 。 由 于 实际 的 版 本 号 中 可 能 会 包含 数字 、 小 数 点 和 字母 ， 
所 以 捕获 组 中 使 用 了 表示 非 空格 的 特殊 字符 (\gs )。 用 户 代理 字符 串 中 的 版 本 号 与 下 一 部 分 的 分 隔 符 是 
一 个 空格 ， 因 此 这 个 模式 可 以 保证 捕获 所 有 版 本 信息 。test () 方 法 基于 用 户 代理 字符 串 运 行 正则 表达 
式 。 如 果 返 回 true， 就 将 捕获 的 版 本 号 保存 在 engine.ver 中 ， 而 将 版 本 号 的 浮 点 表示 保存 在 
engine .webkit 中 。WebKit 版 本 与 Safari 版 本 的 详细 对 应 情况 如 下 表 所 示 。 








































































































Safari 版 本 号 最 低 限 度 的 WebKit 版 本 号 Safari 版 本 号 最 低 限 度 的 WebKit 版 本 号 
1.0 至 1.0.2 85.7 1.3 312.1 
1.0.3 85.8.2 1.3.1 312.5 
1.1 至 1.1.1 100 1.3.2 312.8 
1.2.2 125.2 2.0 412 
1.2.3 125.4 2.0.1 412.7 
1.2.4 125.5.5 2.0.2 416.11 
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( 续 ) 
Safari 版 本 号 最 低 限 度 的 WebKit 版 本 号 Safari 版 本 号 最 低 限 度 的 WebKit 版 本 号 
2.0.3 417.9 3.0.4 523.10 
2.0.4 418.8 3.1 525 











有 了 时候， Safari 版 本 并 不 会 与 WebKit 版 本 严格 地 一 一 对 应 ,也 可 能 会 存在 某 些 小 


版 本 上 的 差异 。 这 个 表 中 只 是 列 出 了 最 可 能 的 WebKit 版 本 ， 但 不 保证 精确 。 





接 下 来 要 测试 的 呈现 引擎 是 KHTML。 同 样 ，KHTML 的 用 户 代理 字符 串 中 也 包含 "Gecko" ， 因 此 
在 排除 KHTML 之 前 ， 我 们 无 法 准确 检测 基于 Gecko 的 浏览 器 。KHTML 的 版 本 号 与 WebKit 的 版 本 号 
在 用 户 代 理 字符 串 中 的 格式 差不多 ， 因 此 可 以 使 用 类 似 的 正则 表达 式 。 此 外 ， 由 于 Konqueror 3.1 及 更 
早 版 本 中 不 包含 KHTML 的 版 本 ， 故 而 就 要 使 用 Konqueror 的 版 本 来 代替 。 下 面 就 是 相应 的 检测 代码 。 


var ua = navigator.userAgent; 











if (window.opera)t{ 
engine.ver = window.opera.version(); 
engine.opera = parseFloat (engine.ver); 
} else if (/AppleWebKit\/(\S+)/.test(ua))t 
engine.ver = RegExp["$1"]; 
engine.webkit = parseFloat (engine.ver); 
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test (ua)){ 
engine .ver = RegExp["$1"]; 
engine.khtml = parseFloat (engine.ver); 





} 


与 前 面 一 样 ,由 于 KHTML 的 版 本 号 与 后 继 的 标记 之 间 有 一 个 空格 ,因此 仍然 要 使 用 特殊 的 非 空格 
字符 来 取得 与 版 本 有 关 的 所 有 字符 。 然 后 , 将 字符 串 形式 的 版 本 信息 保存 在 engine.ver 中 , 将 浮 点 数 
值 形式 的 版 本 保存 在 engin .khtml 中 。 如 果 KHTML 不 在 用 户 代理 字符 串 中 , 那么 就 要 匹配 Konqueror 
后 跟 一 个 斜 杠 ， 再 后 跟 不 包含 分 号 的 所 有 字符 。 
在 排除 了 WebKit 和 KHTML 之 后 ,就 可 以 准确 地 检测 Gecko 了 。 但 是 , 在 用 户 代理 字符 串 中 , Gecko 9 
的 版 本 号 不 会 出 现在 字符 串 "Gecko" 的 后 面 ， 而 是 会 出 现在 字符 串 "rv: "的 后 面 。 这 样 ， 我 们 就 必须 合 
用 一 个 比 前 面 复杂 一 些 的 正则 表达 式 ， 如 下 所 示 。 


var ua = navigator.userAgent; 




















if (window.opera)t{ 
engine.ver = window.opera.version(); 
engine.opera = parseFloat (engine.ver); 
} else if (/AppleWebKRKit\/(\S+)/.test(ua))t 
engine.ver = RegExp["$1"]; 
engine.webkit = parseFloat (engine.ver); 
} else if (/KHTML\/(\S+)/.test(ua)) { 
engine.ver = RegExp["$1"]; 
engine.khtml]l = parseFloat (engine.ver); 
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test (ua)){ 
engine.ver = RegExp["$1"]; 
engine.gecko = parseFloat (engine.ver); 
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Gecko 的 版 本 号 位 于 字符 串 "rv: "与 一 个 闭 括号 之 间 ， 因 此 为 了 提取 出 这 个 版 本 号 ， 正 则 表达 式 要 


查找 所 有 不 是 财 括号 的 字符 ， 还 要 查找 字符 串 "Gec 








ko/ "后 跟 8 个 数字 。 如 果 上 述 模式 匹配 ， 就 提取 出 


版 本 号 并 将 其 保存 在 相应 的 属性 中 。Gecko 版 本 号 与 Firefox 版 本 号 的 对 应 关系 如 下 表 所 示 。 








Firefox 版 本 号 最 低 限 度 的 Gecko 版 本 号 Firefox 版 本 号 最 低 限 度 的 Gecko 版 本 号 
1.0 1.7.5 3.5 1.9.1 
1.5 1.8.0 3.6 1.9.2 
2.0 1.8.1 4.0 2.0.0 


3.0 


1.9.0 












最 后 一 个 要 检测 的 呈现 引擎 就 是 万 了。 了 IE 的 版 本 号 位 于 字符 


因此 相应 的 正则 表达 式 非 常 简 单 ， 如 下 所 示 : 


navigator.userAgent; 


Var Ua 


if (window.opera)t{ 
engine.ver window.opera.version(); 
engine.opera parseFloat (engine.ver 
else if (/AppleWebKit\/(\S+)/.test (ua) 
engine.ver RegExp["s$1"]; 
engine.webkit parseFloat (engine.ve 
} else if (/KHTML\/(\S+)/.test(ua)) { 
engine.ver RegExp["$1"]; 
engine.khtml parseFloat (engine.ver 
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/. 
engine.ver RegExp["$1"]; 
engine.gecko parseFloat (engine.ver 
} else if (/MSIE ([^;]+)/.test(ua))t 


} 








与 Safari 跟 WebKit 一样 ，Firefox 与 Gecko 的 版 本 号 也 不 一 定 严格 对 应 。 








串 "MSIE" 的 后 面 、 一 个 分 号 的 前 面 ， 





) 汉 
) { 


的 


5 
test (ua) ) { 


)3 














engine.ver = RegExp["$1"]; 
engine.ie = parseFloat (engine.ver); 
} 
以 上 呈现 引擎 检测 脚本 的 最 后 一 部 分 , 就 是 在 正则 表达 式 中 使 用 取 反 的 字符 类 来 取得 不 是 分 号 的 所 
有 字符 ,I 通常 会 保证 以 标准 浮 点 数值 形式 给 出 其 版 本 号 ,但 有 时 候 也 不 一 定 。 因 此 , 取 反 的 字符 类 [^;] 











可 以 确保 取得 多 个 小 数 点 以 及 任何 可 能 的 字符 。 


2. 识别 浏览 器 














大 多 数 情况 下 ,识别 了 浏览 器 的 呈现 引擎 就 是 以 为 我 们 采取 正确 的 操作 提供 依据 了 。 可 是 ， 只 有 呈 





现 引擎 还 不 能 说 明 存在 所 需 的 JavaScript 功能 。 苹 玉 
使 用 WebKit 作为 呈现 引擎 ， 但 它们 的 JavaScript 引 
都 会 返回 非 0 值 ， 但 仅 知 道 这 一 点 恕 怕 还 不 够 。 对 于 
新 的 属性 


Var client = function(){ 








[e) 


人‘ 


var engine 


会 
果 公 


它们 ， 有 必要 像 下 钙 


司 的 Safari 浏览 器 和 谷歌 公司 的 Chrome 浏览 器 都 
敬 却 不 一 样 。 在 这 两 款 浏览 器 中 ，client .webkit 
| 这 样 为 client 对 象 再 添加 一 些 
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/ /呈现 引 掌 
ilies 0, 
gecko: 0 
webkit: 
khtmls Os 
opera: 0， 


0， 


/ /具体 的 版 本 


ver: null 


Var browser = { 


// 浏 览 器 
ie: 0， 
firefox: 0, 
safari: 0, 
konq: 0, 
opera: 0, 
chrome: 0, 


// 具 体 的 版 本 


ver: null 
}; 
// 在 此 检测 呈现 引 掌 、 平 台 和 设备 


return { 
engine: engine, 
browser: browser 


}3 
J 
代码 中 又 添加 了 私有 变量 prowser， 用 于 保存 每 个 主要 浏览 器 的 属性 























el 


EF, 与 engine 变 





再 





了 当前 使 用 的 浏览 器 , 其 他 
点 数值 形式 的 版 本 号 。 同 样 ，vez 属性 


多 数 浏 览 器 与 其 
在 一 起 的 。 





{呈现 引擎 密 


中 在 必要 时 将 会 包 合 














/ /检测 呈现 引擎 及 浏览 器 


var ua = navigator.userAgent; 


if (window.opera)t{ 
engine.ver = browser.ver = window.opera.version(); 
engine.opera = browser.opera = parseFloat (engine.ver); 
} else if (/AppleWebKit\/(\S+)/.test(ua))t 





engine.ver = RegExp["$1"] 
engine.webkit = parseFloat (engine.ver); 


// 确 定 是 Chrome 还 是 Safari 
if (/Chrome\/(\S+)/.test(ua) ){ 
browser .ver = RegExp["$1"]; 
browser .chrome = parseFloat (browser .ver) 
} else if (/VersionN\/(\S+)/.test(ua) ){ 
browser .ver = RegExp["$1"]; 
browser .safari = parseFloat (browser .ver) 
} else { 
// 近 似 地 确定 版 本 号 


var SafariVersion = 1; 
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属性 的 值 将 保持 为 0; 如 果 是 当前 使 用 的 浏览 器 , 则 这 个 属性 中 保存 的 是 浮 
字符 串 形 式 的 浏览 老 完 整 版 本 号 。 由 于 大 
切 相 关 ， 所 以 下 面 示例 中 检测 浏览 器 的 代码 与 检测 呈现 引擎 的 代码 是 混合 
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} 


} else if 
engine.ver = 


if (engine.webkit < 100){ 


safariVversion = 1; 

} else if (engine.webkit < 312){ 
safariVversion = 1.2; 

} else if (engine.webkit < 412){ 
safariVversion = 1.3; 

} else { 
safariVversion = 2; 

} 

browser.safari = browser.ver = safariVversion; 


(/KHTML\/ (\S+)/.test (ua 
browser.ver = Re 


engine.khtml = browser.konq = 


} else if 


(/rv: ([^\)]+)\) Gecko\/ 





engine.ver = RegExp["$1"]; 


engine.gecko = 


parseFloat (eng 


// 确 定 是 不 是 Firefox 
if (/Fizrefox\/(\S+)/.test(ua) ){ 


} 


} else if 
engine.ver = 
engine.ie = browser.ie = 


} 


browser.ver = RegExp["$1" 
browser.firefox = 
(/MSIE ([^;]+)/.test(ua 
browser.ver = 


) || /Konqueror\/([^;]+)/.test(ua))t 


gExp["$1"] ? 
parseFloat (engine .ver); 
\d{8}/.test (ua)){ 


ine.ver); 


]; 


parseFloat (browser .ver); 


) ) { 


RegExp["$1"]; 
parseFloat (engine .ver); 


对 Opera 和 下 而 言 , browser 对 象 中 的 值 等 于 engine 对 象 中 的 值 , 对 Konqueror 而 言 , browser. 


kond 和 browser .ver 属性 分 别 等 于 engine.khtml 和 engine.ver 属 怕 





Lo 


为 了 检测 Chrome 和 Safari, 我 们 在 检测 引擎 的 代码 中 添加 了 站 语 句 。 提 取 Chrome 的 版 本 号 时 ， 需 


要 查找 字符 串 "chrome/ "并 取得 该 字符 
"Version/" 并 取得 其 后 的 数值 。 





有 了 上 再 
































TF 
TE 


} else 


} 


} else if 


于 在 


} else { 
执行 针对 其 他 Gecko 浏览 器 的 代码 


} 


(client.engine.webkit) 


/ /执行 针对 
i 


风行 针对 


Chrome 的 代码 
ff Safari 的 代码 


client.engine.gecko)t{ 


(client.browser.firefox)t{ 


/ /执行 针 对 Firefox 的 代码 








AX 





(client.browser.safari)t{ 


后 面 的 数值 。 而 提取 Safari 的 版 本 号 时 ， 则 需要 查找 字符 串 
日 于 这 种 方式 仅 适用 于 Safari 3 及 更 高 版 本 ， 因 此 需要 一 些 备 用 的 代 
码 ， 将 WebKit 的 版 本 号 近似 地 映射 为 Safari 的 版 本 号 (参见 上 一 小 节 中 的 表格 )。 

在 检测 Firefox 的 版 本 时 ,首先 要 找到 字符 
本 号 )。 当 然 ， 只 有 呈现 引 敬 被 判别 为 Gecko 时 才 会 这 样 做 。 
j 这 些 代 码 之 后 ， 我 们 就 可 以 编写 下 面 的 逻辑 。 


{ //if it’s WebKit 
(client.browser.chrome)t{ 


"Firefox/", 然后 提取 出 该 字符 串 后 面 的 数值 ( 即 版 
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3. 识别 平台 

很 多 时 候 ， 只 要 知道 呈现 引擎 就 足以 编写 出 适当 的 代码 了 。 但 在 某 些 条 件 下 , 平台 可 能 是 必须 关注 
的 问题 。 那 些 具 有 各 种 平台 版 本 的 浏览 器 (如 Safari、Firefox 和 Opera ) 在 不 同 的 平台 下 可 能 会 有 不 同 
的 问题 。 目 前 的 三 大 主流 平台 是 Windows、Mac 和 Unix ( 包括 各 种 Linux )。 为 了 检测 这 些 平 台 ， 还 需 
要 像 下 面 这 样 再 添加 一 个 新 对 象 。 


Var Client = function(){ 

















var engine = { 


// 呈 现 引擎 
LE 0 
gecko: 0, 
webkit: 0, 
kKhtml: 0; 
opera: 0， 


/ /具体 的 版 本 号 


ver: null 


var browser = { 


// 浏 览 器 

ie: 0, 
firefoR: (0, 
safazis 0, 
kong: 0， 
opera: 0， 
chrome: 0, 


// 有 具体 的 版 本 号 


Ver : null 


Var system = { 
win: false, 
mac: false, 
x11: false 

}; 





// 在 此 检测 呈现 引 掌 、 平 台 和 设备 


return { 
engine: engine, 
browser: browser, 
system: system 


}; 
上 
显然 ， 上 面 的 代码 中 又 添加 了 一 个 包含 3 个 属性 的 新 变量 system。 其 中 ,win 属性 表示 是 否 为 
Windows 平台 ，mac 表示 Mac， 而 x11 表示 Unix。 与 呈现 引擎 不 同 ， 在 不 能 访问 操作 系统 或 版 本 的 
情况 下 , 平台 信息 通常 是 很 有 限 的 。 对 这 三 个 平台 而 言 , 浏览 器 一 般 只 报告 Windows 版 本 。 为 此 ,新 
变量 system 的 每 个 属性 最 初 都 保存 着 布尔 值 fal1se， 而 不 是 像 呈 现 引 敬 属 性 那样 保存 着 数字 值 。 
在 确定 平台 时 ， 检测 navigator .platform 要 比 检测 用 户 代理 字符 串 更 简单 ， 后 者 在 不 同 浏览 
中 会 给 出 不 同 的 平台 信息 。 而 navigator.platform 属性 可 能 的 值 包括 "Win32" 、"Win64"、 
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"MacPPC"、"MacIntel"、"X11" 和 "Linux i686"， 这 些 值 在 不 同 的 浏览 器 中 都 是 一 致 的 。 检 测 平台 
的 代码 非常 直观 ， 如 下 所 示 : 


Var p = navigator.platform; 





system.win = p.indexOof ("Win") == 0; 
system.mac = p.indexOof ("Mac") == 0; 
SYSstem.x11 = (p.indexOof ("X11") == 0) || (p.indexof ("Linux") == 0); 














以 上 代码 使 用 ingexof () 方 法 来 查找 平台 字符 串 的 开始 位 置 。 虽然 "win32" 是 当前 浏览 器 唯一 支 
持 的 Windows 字符 串 ， 但 随 着 向 64 位 Windows 架构 的 迁移 ， 将 来 很 可 能 会 出 现 "win64" 平 台 信息 值 。 
为 了 对 此 有 所 准备 , 检测 平台 的 代码 中 查找 的 只 是 字符 串 "win" 的 开始 位 置 。 而 检测 Mac 平台 的 方式 也 
类 似 ， 同 样 是 考虑 到 了 MacPPC 和 MacIntel。 在 检测 Unix 时 ， 则 同时 检查 了 字符 串 "Xx11" 和 "Linux" 
在 平台 字符 串 中 的 开始 位 置 ， 从 而 确保 了 代码 能 够 向 前 兼容 其 他 变 体 。 






























Gecko 的 早期 版 本 在 所 有 Windows 平 台中 都 返回 字符 串 "Windows", 在 所 有 Mac 平 
台中 则 都 返回 字符 串 "Macintosh"。 不 过 ， 这 都 是 Firefox 1 发 布 以 前 的 事 了 ，Firefox 1 
确定 了 navigator.platform 的 值 。 






4. 识别 Windows 操作 系统 

在 Windows 平 台 下 ， 还 可 以 从 用 户 代 理 字 符 串 中 进一步 取得 具体 的 操作 系统 信息 。 在 Windows XP 
之 前 ，Windows 有 两 种 版 本 ， 分 别针 对 家 庭 用 户 和 商业 用 户 。 针 对 家 庭 用 户 的 版 本 分 别 是 Windows 95、 
98 和 Windows ME。 而 针对 商业 用 户 的 版 本 则 一 直 叫 做 Window NT, 最 后 由 于 市 场 原 因 改 名 为 Windows 
2000。 这 两 个 产品 线 后 来 又 合并 成 一 个 由 Windows NT 发 展 而 来 的 公共 的 代码 基 , 代 表 产 品 就 是 Windows 
XP。 随 后 ， 微 软 在 Windows XP 基础 上 又 构建 了 Windows Vista。 

只 有 了 解 这 些 信 息 , 才能 搞 清 楚 用 户 代理 字符 串 中 Windows 操作 系统 的 具体 版 本 。 下 表 列 出 了 不 同 
浏览 需 在 表示 不 同 的 Windows 操作 系统 时 给 出 的 不 同 字 符 串 。 





















































Windows 版 本 IE 4+ Gecko Opera<7 Opera 7+ Webkit 

95 "Windows 95" "Win95" "Windows 95" "Windows 95" n/a 

98 "Windows 98" "Win98" "Windows 98" "Windows 98" n/a 

NT4.0 "Windows NT" "WinNT4.0" "Windows NT 4.0" "Windows NT 4.0" n/a 

2000 "Windows NT 5.0" "Windows NT 5.0" "Windows 2000" "Windows NT 5.0" n/a 

ME "Win 9x 4.90" "Win 9x 4.90" "Windows ME" "Win 9x 4.90" n/a 

XP "Windows NT 5.1" "Windows NT 5.1" "Windows XP" "Windows NT 5.1" "Windows NT 5.1" 
Vista "Windows NT 6.0" "Windows NT 6.0" n/a "Windows NT 6.0" "Windows NT 6.0" 

J "Windows NT 6.1" "Windows NT 6.1" n/a "Windows NT 6.1" "Windows NT 6.1" 
由 于 用 户 代 理 字符 串 中 的 Windows 操作 系统 版 本 表示 方法 各 异 , 因 此 检测 代码 并 不 十 分 直观 ,好 在 ， 








从 Windows 2000 开始 ， 表 示 操 作 系统 的 字符 串 大 部 分 都 还 相同 ， 只 有 版 本 号 有 变化 。 为 了 检测 不 同 的 
Windows 操作 系统 ， 必 须要 使 用 正则 表达 式 。 由 于 使 用 Opera 7 之 前 版 本 的 用 户 已 经 不 多 了 ， 因 此 我 们 
可 以 忽略 这 部 分 浏览 
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第 一 步 就 是 匹配 Windows 95 和 Windows 98 这 两 个 字符 串 。 对 这 两 个 字符 串 ， 只 有 Gecko 与 其 他 浏 
览 器 不 同 , 即 没 有 "dows", 而 且 "win" 与 版 本 号 之 间 没 有 空格 。 要 匹配 这 个 模式 ,可 以 使 用 下 面 这 个 简 
单 的 正则 表达 式 。 


/Win(?:dows )?([^do]{2})/ 

这 个 正则 表达 式 中 的 捕获 组 会 返回 操作 系统 的 版 本 。 由 于 版 本 可 能 是 任何 两 个 字符 编码 ( 例如 95、 
98、9x、NT、ME 及 XP )， 因 此 要 使 用 两 个 非 空格 字符 。 

Gecko 在 表示 Windows NT 时 会 在 未 尾 添 加 "4.0"， 与 其 查找 实际 的 字符 串 ， 不 如 像 下 面 这 样 查找 
小 数值 更 合适 。 

/Win(?:dows )?([^do]l{2}) (\d+\.\d+)?/ 

这 样 ， 正 则 表达 式 中 就 包含 了 第 二 个 捕获 组 ， 用 于 取得 NT 的 版 本 号 。 由 于 该 版 本 号 对 于 Windows 
95 和 Windows 98 而 言 是 不 存在 的 ， 所 以 必须 设置 为 可 选 。 这 个 模式 与 Opera 表示 Windows NT 的 字符 
串 之 间 唯 一 的 区 别 ， 就 是 "NT" 与 "4.0" 之 间 的 空格 ， 这 在 模式 中 很 容易 添加 。 

/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/ 


经 过 一 番 修 改 之 后 , 这 个 正则 表达 式 也 可 以 成 功 地 匹配 Windows ME、Windows XP 和 Windows Vista 
的 字符 串 了 。 具 体 来 说 ， 第 一 个 捕获 组 将 会 匹配 95、98、9x、NT、ME 或 XP。 第 二 个 捕获 组 则 只 针对 
Windows ME 及 所 有 Windows NT 的 变 体 。 这 个 信息 可 以 作为 具体 的 操作 系统 信息 保存 在 system.win 
属性 中 ， 如 下 所 示 。 
if (system.win)t{ 
if (/Win(?:dows )?([^do]l{2})\s?(\d+\.\d+)?/.test(ua))t{ 
if (RegExp["$1"] == "NT"){ 
switch (RegExp["$2"])t{ 
Case "5.0": 













































































system.win = "2000"; 
break; 
Case "5.1": 
system.win = "XP"; 
break; 
Case "6.0": 
system.win = "Vista"; 
break; 
case "6.1": 
system.win = "7"; 
break; 
default: 
system.win = "NT"; 
break; 
} 
} else if (RegExp["$1"] == "9x")f{ 
system.win = "ME"; 





} else { 
system.win = RegExp["$1"]; 





} 
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如 果 system.win 的 值 为 true ,那么 就 使 用 这 个 正则 表达 式 从 用 户 代理 字符 串 中 提取 具体 的 信息 。 
鉴于 Windows 将 来 的 某 个 版 本 也 许 不 能 使 用 这 个 方法 来 检测 ,所 以 第 一 步 应 该 先 检 测 用 户 代 理 字符 串 是 
否 与 这 个 模式 匹配 。 在 模式 匹配 的 情况 下 ,第 一 个 捕获 组 中 可 能 会 包含 "95" 、"98"、"9x" 或 "NT"。 如 
果 这 个 值 是 "NT" , 可 以 将 system.win 设置 为 相应 操作 系统 的 字符 串 ; 如 果 是 "9x" , 那么 system.win 
就 要 设置 成 "ME"; 如 果 是 其 他 值 , 则 将 所 捕获 的 值 直接 赋 给 system.win。 有 了 这 些 检测 平台 的 代码 后 ， 
我 们 就 可 以 编写 如 下 代码 。 


if (client.system.win)t{ 
































if (client.system.win == "XP") { 
// 说 明 是 XP 

} else if (client.system.win == "Vista")t{ 
// 说 明 是 Vista 

} 


} 


由 于 非 空 字符 串 会 转换 为 布尔 值 true， 因 此 可 以 将 client .system.win 作为 布尔 值 用 在 if 语 
句 中 。 而 在 需要 更 多 有 关 操 作 系 统 的 信息 时 ， 则 可 以 使 用 其 中 保存 的 字符 串 值 。 

5. 识别 移动 设备 

2006 年 到 2007 年 ,移动 设备 中 Web 浏览 器 的 应 用 呈 爆 炸 性 增长 。 四 大 主要 浏览 器 都 推出 了 手机 
版 和 在 其 他 设备 中 运行 的 版 本 。 要 检测 相应 的 设备 ， 第 一 步 是 为 要 检测 的 所 有 移动 设备 添加 属性 ， 如 
下 所 示 。 


Var client = function(){ 
































var engine = { 


/ /呈现 引 党 
Te "0, 
gecko: 0, 
webkit: 0, 
khtml: 0, 
opera: 0, 


/ /具体 的 版 本 号 


ver: null 


Var browser = { 


// 浏 览 器 
Tes 0; 
firefox: 0, 
safari: 0, 
konq: 0， 
opera: 0， 
chrome: 0, 


/ /具体 的 版 本 号 


ver: null 


var system = { 
win: false, 
mac: false, 
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X11: false, 


// 移 动 设备 

iphone: false, 

ipod: false, 

ipad: false, 

ios: false, 

android: false, 
nokiaN: false, 
winMobile: false }3 


/ /在 此 检测 呈现 引 掌 、 平 台 和 设备 


return { 
engine: engine, 
browser: browser, 
system: system 


}¥ 


} (0); 
然后 ， 通 常 简单 地 检测 字符 串 "iPhone"、"iPod" 和 "ipPad"， 就 可 以 分 别 设置 相应 属性 的 值 了 。 





system.iphone = ua.indexOf ("iPhone") > -1; 
system.ipod = ua.indexOf ("iPod") > -1; 
system.ipod = ua.indexOf ("iPad") > -1; 


除了 知道 iOS 设备 ,最 好 还 能 知道 iOS 的 版 本 号 ,在 iOS 3 之 前 ,用 户 代 理 字符 串 中 只 包含 "CPU 1ike 
Mac 0S"， 后 来 iPhone 中 又 改 成 "CPU iPhone 0S 3_0 like Mac 0S X"，iPad 中 又 改 成 "CPU 0S 3_2 
like Mac 0S X"。 也 就 是 说 ， 检 测 iOS 需要 正则 表达 式 反 映 这 些 变化 。 
// 检 测 iOS 版 本 
if (system.mac && ua.indexOf ("Mobile") > -1){ 
if (/CPU (?:iPhone )?0S (\d+_\d+)/.test(ua))t 
system.ios = parseFloat (RegExp.$1.replace("_", ".")); 


} else { 
system.ios = 2; // 不 能 真正 检测 出 来 ， 所 以 只 能 猜测 


} 

9 

检查 系统 是 不 是 Mac OS、 字 符 串 中 是 否 存在 "Mobile"， 可 以 保证 无 论 是 什么 版 本 ，system. ios 
中 都 不 会 是 0。 然 后， 再 使 用 正则 表达 式 确定 是 否 存在 iOS 的 版 本 号 。 如 果 有 , 将 system.ios 设置 为 
表示 版 本 号 的 浮 点 值 ; 否则 , 将 版 本 设置 为 2。( 因为 没有 办 法 确定 到 底 是 什么 版 本 , 所 以 设置 为 更 早 的 
版 本 比较 稳妥 。) 

检测 Android 操作 系统 也 很 简单 ， 也 就 是 搜索 字符 串 "android" 并 取得 紧 随 其 后 的 版 本 号 。 

// 检 测 Android 版 本 

if (/Android (\d+\.\d+)/.test(ua))t 

system.android = parseFloat (RegExp.$1); 
} 
由 于 所 有 版 本 的 Android 都 有 版 本 值 ， 因 此 这 个 正则 表达 式 可 以 精确 地 检测 所 有 版 本 ， 并 将 


system.androig 设置 为 正确 的 值 。 
诺基亚 N 系列 手机 使 用 的 也 是 WebKit, 其 用 户 代理 字符 串 与 其 他 基于 WebKit 的 手机 很 相似 , 例如: 


Mozilla/5.0 (Symbian0S/9.2; U; Series60/3.1 NokiaN95/11.0.026; Profile MIDP-2.0 
Configuration/CLDC-1.1) AppleWebKRKit/413 (KHTML, like Gecko) Safari/413 
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虽然 诺基亚 N 系列 手机 在 用 户 代 理 字符 串 中 声称 使 用 的 是 "Safari"， 但 实际 上 并 不 是 Safari， 尽 
管 确实 是 基于 WebKit 引 敬 。 只 要 像 下 面 检测 一 下 用 户 代理 字符 串 中 是 否 存在 "NokiaN"， 就 足以 确定 是 
不 是 该 系列 的 手机 了 。 


system.nokiaN = ua.indexOf ("NokiaN") > -1; 


在 了 解 这 些 设备 信息 的 基础 上 ， 就 可 以 通过 下 列 代码 来 确定 用 户 使 用 的 是 什么 设备 中 的 WebKit 来 
访问 网 页 : 


if (client.engine.webkit)t{ 
if (client.system. iOS){ 
//iOS 手机 的 内 容 
} else if (client.system.android)t{ 
//Android 手机 的 内 容 
} else if (client.system.nokiaN)t{ 


/ /诺基亚 手机 的 内 容 

















} 
} 


最 后 一 种 主要 的 移动 设备 平台 是 Windows Mobile ( 也 称 为 Windows CE )， 用 于 Pocket PC 和 
Smartphone 中 。 由 于 从 技术 上 说 这 些 平台 都 属于 Windows 平台 ， 因 此 Windows 平台 和 操作 系统 都 会 返 
回 正 确 的 值 。 对 于 Windows Mobile 5.0 及 以 前 版 本 , 这 两 种 设备 的 用 户 代理 字符 串 非 常 相 似 , 如 下 所 示 : 


Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; 


Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; 


第 一 个 来 自 Pocket PC 中 的 移动 Internet Explorer 4.01， 第 二 个 来 自 Smartphone 中 的 同一 个 浏览 
当 Windows 操作 系统 检测 脚本 检测 这 两 个 字符 串 时 ，system.win 将 被 设置 为 "cE"， 因此 在 检测 
Windows Mobile 时 可 以 使 用 这 个 值 : 




















PPC; 240x320) 
Smartphone; 176x220) 




















system.winMobile = (system.win == "CE"); 


不 建议 测试 字符 串 中 的 "PPC'" 或 "Smartphone", 因为 在 Windows Mobile 5.0 以 后 版 本 的 浏览 器 中 ， 
这 些 记号 已 经 被 移 除 了 。 不 过 ,一 般 情 况 下 ， 只 知道 某 个 设备 使 用 的 是 Windows Mobile 也 就 足够 了 。 
Windows Phone 7 的 用 户 代理 字符 串 稍 有 改进 ， 基 本 格式 如 下 : 


Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone 0S 7.0; Trident/3.1; IEMobile/7.0) 
Asus;Galaxy6 


其 中 ，Windows 操作 符 的 标识 符 与 已 往 完 全 不 同 ， 因 此 在 这 个 用 户 代理 中 client .system.win 
等 于 "Ph"。 从 中 可 以 取得 有 关系 统 的 更 多 信息 : 












































//windows mobile 





if (system.win == "CE"){ 
system.winMobile = system.win; 
} else if (system.win == "Ph")f{ 
if(/Windows Phone OS (\d+.\d+)/.test (ua)){; 
system.win = "Phone"; 





system.winMobile = parseFloat (RegExp["$1"]) 


} 














如 果 system.win 的 值 是 "C "CE" ， 就 说 明 是 老 版 本 的 Windows Mobile， 因 此 system.winMobile 
会 被 设置 为 相同 的 值 (只 能 知道 这 个 信息 )。 如 果 system.win 的 值 是 "Ph" ， 那 么 这 个 设备 就 可 能 是 











灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


9.3 用户 代理 检测 241 





Windows Phone 7 或 更 新 版 本 。 因 此 就 用 正则 表达 式 来 测试 格式 并 提取 版 本 号 ， 将 system.win 的 值 重 
"Phone" ， 而 将 system.winMobile 设置 为 版 本 号 。 
_ 识 别 游戏 系统 
a ， 视 频 游戏 系统 中 的 Web 浏览 器 也 开始 日 益 普及 。 任 天 堂 Wii 和 Playstation 3 或 
者 内 置 Web 浏览 器 ,或 者 提供 了 浏览 右 下 载 。Wii 中 的 浏览 器 实际 上 是 定制 版 的 Opera， 是 专门 为 Wii 
Remote 设计 的 。Playstation 的 浏览 器 是 自己 开发 的 , 没有 基于 前 面 提 到 的 任何 呈现 引擎 。 这 两 个 浏览 
中 的 用 户 代理 字符 串 如 下 所 示 : 


Opera/9.10 (Nintendo Wii;U; ; 1621; en) 
Mozilla/5.0 (PLAYSTATION 3; 2.00) 


第 一 个 字符 串 来 自 运 行 在 Wii 中 的 Opera, 它 忠 实地 继承 了 Opera 最 初 的 用 户 代理 字符 串 格式 ( Wii 
上 的 Opera 不 具备 隐瞒 身份 的 能 力 )。 第 二 个 字符 串 来 自 Playstation3 ， 虽 然 它 为 了 兼容 性 而 将 自己 标识 
为 Mozilla $5.0， 但 并 没有 给 出 太 多 信息 。 而 且 ， 设 备 名 称 居 然 全 部 使 用 了 大 写字 母 ， 让 人 觉得 很 奇怪 ; 
昌 烈 希望 将 来 的 版 本 能 够 改变 这 种 情况 。 

在 检测 这 些 设备 以 前 ， 我 们 必须 先 为 client .system 中 添加 适当 的 属性 ， 如 下 所 示 : 
























































Cu 











Var client = function()t{ 
var engine = { 


/ /呈现 引 掌 
ie: 0, 
gecko: 0, 
webkit: 0, 
kitmls 0. 
opera: 0， 


/ /具体 的 版 本 号 


ver: null 


var browser = { 


// 浏 览 器 

ie: 0, 
firefox: 0， 
Safatls. 0 
kong: 0, 
opera: 0， 
chrome: 0， 


/ /具体 的 版 本 号 


ver: null 


var system = { 
win: false, 
mac: false, 
X11: false, 


/ /移动 设备 
iphone: false, 
ipod: false, 
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下 


// 在 此 检测 呈现 引 掌 、 平 台 和 设备 


ipad: false, 

ios: false, 
android: false, 
nokiaN: false, 
winMobile: false, 
// 游 戏 系统 

wii: false, 

ps: false 


return { 


}0); 


engine: engine, 
browser: browser, 
system: system 


检测 前 述 游戏 系统 的 代码 如 下 : 


system.wii = ua.indexOf ("Wii") 


> 1 


system.ps = /playstation/i.test (ua); 


对 于 Wii， 只 要 检测 字符 串 "wii" 就 够 了 ， 而 其 他 代码 将 发 现 这 是 一 个 Opera 浏览 器 ， 并 将 正确 的 


版 本 号 保存 在 client .browser .opera 中 。 对 于 Playstation， 我 们 则 使 


写 的 方式 测试 用 户 代理 字符 捉 。 
9.3.3 完整 的 代码 


以 下 是 
和 游戏 系统 


O 


Var client = function(){ 


// 呈 现 引擎 


Var engine = { 
es 0 
gecko: 0, 
webkit: 0, 
khtml: 0, 
opera: 0， 
// 完 整 的 版 本 号 
Ver : null 

7 

// 浏 览 器 

var browser = { 
// 主 要 浏览 器 
ie: 0, 


firefox: 0, 
safari: 0, 
konq: 0， 
opera: 0, 


完整 的 用 户 代理 字符 串 检 测 脚 本 ,包括 检测 呈现 引擎 、 


YZ 人 


Hs 














用 正则 表达 式 来 以 不 区 分 大 小 





Windows 操作 系统 、 移 动 设备 
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chrome: 0, 


// 有 具体 的 版 本 号 


Ver : null 


/ /平台 、 设 备 和 操作 系统 
var system = { 
win: false, 
mac: false, 
X11: false, 


/ /移动 设备 

iphone: false， 
ipod: false, 
ipad: false, 

ios: false, 
android: false, 
nokiaN: false, 
winMobile: false， 


/ /游戏 系统 

wii: false, 

ps: false 
JJ 


/ /检测 呈现 引擎 和 浏览 器 
Var ua = navigator.userAgent; 
if (window.opera)t{ 
engine.ver = browser.ver = window.opera.version(); 
engine.opera = browser.opera = parseFloat (engine.ver); 
} else if (/AppleWebKit\/(\S+)/.test(ua))t{ 
engine.ver = RegExp["$1"]; 
engine.webkit = parseFloat (engine.ver); 





/ /确定 是 Chrome 还 是 Safari 
if (/Chrome\/(\S+)/.test(ua))t 
browser.ver = RegExp["s$1"]; 
browser.chrome = parseFloat (browser.ver); 
} else if (/Version\/(\S+)/.test(ua))t{ 
browser.ver = RegExp["s$1"]; 
browser.safari = parseFloat (browser.ver); 
} else { 
/ /近似 地 确定 版 本 号 
Var safariVersion = 1; 
if (engine.webkit < 100){ 
safariVersion = 1; 
} else if (engine.webkit < 312)f{ 
safariVersion = 1.2; 
} else if (engine.webkit < 412)f{ 
safariVersion = 1.3; 
} else { 
safariVersion = 2; 








} 


browser.safari = browser.ver = safariVersion; 
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} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua))t 
engine.ver = browser.ver = RegExp["$1"]; 
engine.khtml = browser.kondc = parseFloat (engine.ver); 
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test (ua)){ 
engine.ver = RegExp["$1"]; 
engine.gecko = parseFloat (engine.ver); 








/ /确定 是 不 是 Firefox 

if (/Firefox\/(\S+)/.test(ua))t 
browser.ver = RegExp["$1"]; 
browser.firefox = parseFloat (browser.ver); 





起 

} else if (/MSIE ([^;]+)/.test(ua) ){ 
engine.ver = browser.ver = RegExp["$1"]; 
engine.ie = browser.ie = parseFloat (engine.ver); 





} 


// 检 测 浏览 器 
browser.ie = engine.ie; 
browser.opera = engine.opera; 


/ /检测 平 台 

Var p = navigator.platform; 

system.win = p.indexOf ("Win") == 0; 

system.mac = p.indexOf ("Mac") == 0; 

system.x11 = (p == "X11") || (p.indexOof ("Linux") == 0); 


// 检 测 Windows 操作 系统 
if (system.win)f{ 

















if (/Win(?:dows )?([^do]l{2})\s?(\d+\.\d+)?/.test(ua))t 
1if. "(RegExBl SL] <a "NR.)}T 
switch (RegExp["$2"])t{ 
case "5.0": 
system.win = "2000"; 
break; 
case "5.1": 
system.win = "XP"; 
break; 
case "6.0": 
system.win = "Vista"; 
break; 
case "6.1": 
system.win = "7"; 
break; 
default: 
system.win = "NT"; 
break; 
} 
} else if (RegExp["$1"] == "9x"){ 
system.win = "ME"; 
} else { 
system.win = RegExp["s$1"]; 
} 
} 
} 
/ /移动 设备 
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system.iphone = ua.indexOf ("iPhone") > -1; 
system.ipod = ua.indexOf ("iPod") > -1; 
system.ipad = ua.indexOf ("iPad") > -1; 
system.nokiaN = ua.indexOf ("NokiaN") > -1; 


//windows mobile 





IE (system.win == "CE"){ 
system.winMobile = system.win; 
} else if (system.win == "Ph")t{ 
if(/Windows Phone OS (\d+.\d+)/.test(ua)){; 
system.win = "Phone"; 





system.winMobile = parseFloat (RegExp["$1"]); 
} 


// 检 测 iOS 版 本 
if (system.mac && ua.indexOf ("Mobile") > -1){ 
if (/CPU (?:iPhone )?0S (\d+_\d+)/.test(ua))t 
system.ios = parseFloat (RegExp.$1.replace("™_", ".")); 
} else { 
system.ios = 2; // 不 能 真正 检测 出 来 ， 所 以 只 能 猜测 





} 
} 


// 检 测 Android 版 本 

if (/Android (\d+\.\d+)/.test(ua))t 
system.android = parseFloat (RegExp.$1); 

} 


/ /游戏 系统 
system.wii = ua.indexOf ("Wii") > -1; 
system.ps = /playstation/i.test(ua); 





/ /返回 这 些 对 象 

return { 
engine: engine, 
browser: browser, 
system: system 

}3 


}(); 


client.js 


9.3.4 ”使 用 方法 


我 们 在 前 面 已 经 强调 过 了 ,用户 代 理 检测 是 客户 端 检测 的 最 后 一 个 选择 。 只 要 可 能 ， 都 应 该 优先 采 
用 能 力 检测 和 怪癖 检测 。 用 户 代理 检测 一 般 适 用 于 下 列 情形 。 
口 不 能 直接 准确 地 使 用 能 力 检测 或 怪 净 检 测 。 例 如 ， 某 些 浏览 器 实现 了 为 将 来 功能 预 留 的 存根 
(stub ) 函数 。 在 这 种 情况 下 ， 仅 测试 相应 的 函数 是 否 存在 还 得 不 到 足够 的 信息 。 
口 同一 款 浏览 器 在 不 同 平台 下 具备 不 同 的 能 力 。 这 时 候 ， 可 能 就 有 必要 确定 浏览 器 位 于 哪个 平 
台 下 。 
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口 为 了 跟踪 分 析 等 目的 需要 知道 确切 的 浏览 器 。 
9.4 小 结 


客户 端 检 测 是 JavaScript 开发 中 最 具 争 议 的 一 个 话题 。 由 于 浏览 器 间 存 在 差别 ， 通 常 需要 根据 不 同 
浏览 器 的 能 力 分 别 编写 不 同 的 代码 。 有 不 少 客户 端 检测 方法 ， 但 下 列 是 最 经 常 使 用 的 。 
口 能 力 检测 : 在 编写 代码 之 前 先 检测 特定 浏览 器 的 能 力 。 例 如 ， 脚 本 在 调用 某 个 函数 之 前 ， 可 能 
要 先 检测 该 函数 是 否 存 在 。 这 种 检测 方法 将 开发 人 员 从 考虑 具体 的 浏览 器 类 型 和 版 本 中 解放 出 
来 ， 让 他 们 把 注意 力 集中 到 相应 的 能 力 是 否 存在 上 。 能 力 检测 无 法 精确 地 检测 特定 的 浏览 器 和 
版 本 。 
口 怪癖 检测 : 怪癖 实际 上 是 浏览 器 实现 中 存在 的 bug， 例 如 早期 的 WebKit 中 就 存在 一 个 怪兽 ， 即 
它 会 在 for-in 循环 中 返回 被 隐藏 的 属性 。 怪 乌 检测 通常 涉及 到 运行 一 小 段 代 码 ， 然 后 确定 浏 
览 器 是 否 存 在 某 个 怪 阁 。 由 于 怪癖 检测 与 能 力 检 测 相 比 效率 更 低 ， 因 此 应 该 只 在 某 个 怪 阁 会 干 
扰 脚 本 运行 的 情况 下 使 用 。 怪 辛 检测 无 法 精确 地 检测 特定 的 浏览 絮 和 版 本 。 
口 用 户 代理 检测 : 通过 检测 用 户 代 理 字符 串 来 识别 浏览 器 。 用 户 代理 字符 串 中 包含 大 量 与 浏览 
有 关 的 信息 ， 包 括 浏览 器 、 平 台 、 操 作 系统 及 浏览 器 版 本 。 用 户 代理 字符 串 有 过 一 段 相当 长 的 
发 展 历史 ， 在 此 期 间 ， 浏 览 器 提供 商 试图 通过 在 用 户 代 理 字符 串 中 添加 一 些 欺 骗 性 信息 ， 坎 骗 
网 站 相信 自己 的 浏览 器 是 另外 一 种 浏览 器 。 用 户 代 理 检 测 需要 特殊 的 技巧 , 特别 是 要 注意 Opera 
会 隐瞒 其 用 户 代 理 字符 串 的 情况 。 即 便 如 此 ， 通 过 用 户 代理 字符 串 仍 然 能 够 检测 出 浏览 器 所 用 
的 呈现 引擎 以 及 所 在 的 平台 ， 包 括 移 动 设备 和 游戏 系统 。 
在 决定 使 用 哪 种 客户 端 检 测 方 法 时 ,一般 应 优先 考虑 使 用 能 力 检测 。 怪 癣 检测 是 确定 应 该 如 何 处 理 
代码 的 第 二 选择 。 而 用 户 代 理 检 测 则 是 客户 端 检测 的 最 后 一 种 方案 ,因为 这 种 方法 对 用 户 代 理 字符 串 具 
有 很 强 的 依赖 性 。 
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本 章 内 容 

口 理解 包含 不 同 层次 方 点 的 DOM 

口 使 用 不 同 的 节点 类 型 

口 克服 浏览 器 兼容 性 问题 及 各 种 陷阱 











下 
绘 了 一 个 层次 化 的 节点 树 ， 人 允许 开发 人 员 添 加 、 移 除 和 修改 页 面 的 某 一 部 分 。DOM 脱胎 于 
Netscape 及 微软 公司 创始 的 DHTML (动态 HTML ), 但 现在 它 已 经 成 为 表现 和 操作 页 面 标记 的 真正 的 跨 
平台 、 语 言 中 立 的 方式 。 

1998 年 10 月 DOM 1 级 规范 成 为 W3C 的 推荐 标准 ， 为 基本 的 文档 结构 及 查询 提供 了 接口 。 本 章 主 
要 讨论 与 浏览 器 中 的 HTML 页 面相 关 的 DOMI1 级 的 特性 和 应 用 ， 以 及 JavaScript 对 DOMI1 级 的 实现 。 
了 下、Firefox 、Safari 、Chrome 和 Opera 都 非常 完善 地 实现 了 DOM。 







































注意 ,本 中 的 所 有 DOM 对 象 都 是 以 COM 对 象 的 形式 实现 的 。 这 意味 着 IE 中 的 
DOM 对 象 与 原生 JavaScript 对 象 的 行为 或 活动 特点 并 不 一 致 。 本 章 将 较 多 地 谈 及 这 些 


10.1 节点 层次 


DOM 可 以 将 任何 HTML 或 XML 文档 描绘 成 一 个 由 多 层 节点 构成 的 结构 。 节 点 分 为 几 种 不 同 的 类 
型 ， 每 种 类 型 分 别 表示 文档 中 不 同 的 信息 及 (或 ) 标记。 每 个 节点 都 拥有 各 自 的 特点 、 数 据 和 方法 ， 另 
外 也 与 其 他 节点 存在 某 种 关系 。 节 点 之 间 的 关系 构成 了 层次 , 而 所 有 页 面 标记 则 表现 为 一 个 以 特定 节点 
为 根 节点 的 树 形 结构 。 以 下 面 的 HTML 为 例 : 


<html> 
<head> 
<title>Sample Page</title> 
</head> 
<body> 
<p>Hello World!</p> 
</body> 
</html> 


可 以 将 这 个 简单 的 HTML 文档 表示 为 一 个 层次 结构 ， 如 图 10-1 所 示 。 
文档 节点 是 每 个 文档 的 根 节 点 。 在 这 个 例子 中 ， 文 档 节 点 只 有 一 个 子 节点 ， 即 <htm1> 元 素 ， 我 们 
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称 之 为 文档 元 素 。 文 档 元 素 是 文档 的 最 外 层 元 素 , 文档 中 的 其 他 所 有 元 素 都 包含 在 文档 元 素 中 。 每 个 文 





档 只 能 有 一 个 文档 元 素 。 在 HTML 页 面 中 ,文档 元 素 始终 都 是 <html> 元 素 。 在 XML 中 ， 
的 元 素 ， 因 此 任何 元 素 都 可 能 成 为 文档 元 素 。 
每 一 段 标记 都 可 以 通过 树 中 的 一 个 节点 来 表示 : HTML 元 素 通过 元 素 节 点 表示 ， 特 性 





























没有 预定 义 


( attribute ) 


通过 特性 节点 表示 ， 文 档 类 型 通过 文档 类 型 节点 表示 ， 而 注释 则 通过 注释 节点 表示 。 总 共有 12 种 节点 





类 型 ， 这 些 类 型 都 继承 自 一 个 基 类 型 。 











| Document 














Element html 








Element head 














Element title 

















Text Sample Page 














Element body 


加 Element p 


Text Hello World! 


图 10-1 





























10.1.1 Node 类 型 


DOMI1 级 定义 了 一 个 Node 接口 ， 该 接口 将 由 DOM 中 的 所 有 节点 类 型 实现 。 这 个 Node 接口 在 





JavaScript 中 是 作为 Node 类 型 实现 的 ; 除了 IE 之 外 ， 在 其 他 所 有 浏览 器 中 都 可 以 访问 至 


I 这 个 类 型 。 











JavaScript 中 的 所 有 节点 类 型 都 继承 自 Node 类 型 ， 因 此 所 有 节点 类 型 都 共享 着 相同 的 基本 
































12 个 数值 常量 来 表示 ， 任 何 节 点 类 型 必 居 其 一 
Node .ELEMENT_NODE(1); 
Node .ATTRIBUTE_NODE(2); 
Node .TEXT_NODE(3); 
Node .CDATRA_SECTION_NODE(4); 
E 
E 


























Node. 





NTITY_ REFERENCE_NODE(S); 

Node .ENTITY_ NODE(6); 

Node .PROCESSING_INSTRUCTION_NODE(7); 
Node .COMMENT_NODE(8); 

















DOOOODODODO DO 








属性 和 方法 。 


每 个 节点 都 有 一 个 nodeType 属性 ,用 于 表明 节点 的 类 型 。 节 点 类 型 由 在 Node 类 型 中 定义 的 下 列 
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口 Node .DOCUMENT_NODE(9); 

口 Node .DOCUMENT_TYPE_NODE(10); 

口 Node .DOCUMENT_FRAGMENT_NODE(11); 

口 Node .NOTATION_NODE(12)。 

通过 比较 上 面 这 些 常量 ， 可 以 很 容易 地 确定 节点 的 类 型 ， 例 如 : 


if (someNode.nodeType == Nodqe .ELEMENT_NODE) { // 在 正中 无 效 
alert ("Node is an element."); 



















































































} 

这 个 例子 比较 了 someNode .nodeType 与 Node .ELEMENT_NODE 常量 。 如 果 二 者 相等 ， 则 意味 着 
someNode 确实 是 一 个 元 素 。 然 而 ， 由 于 下 没有 公开 Node 类 型 的 构造 函数 ， 因 此 上 面 的 代码 在 IE 中 
会 导致 错误 。 为 了 确保 跨 浏览 容 ， 最 好 还 是 将 nodeType 属性 与 数字 值 进 行 比较 ， 如 下 所 示 : 


if (someNode .nodeType == 1){ // 寺 用 于 所 有 浏览 器 
alert ("Node is an element."); 






























































} 

并 不 是 所 有 节点 类 型 都 受到 Web 浏览 器 的 支持 。 开 发 人 员 最 常用 的 就 是 元 素 和 文本 节点 。 本 章 后 
面 将 详细 讨论 每 个 节点 类 型 的 受 支 持 情况 及 使 用 方法 。 

1. nodeName 和 nodeValue 属性 

要 了 解 节点 的 具体 信息 ， 可 以 使 用 nodeName 和 nodqevalue 这 两 个 属性 。 这 两 个 属性 的 值 完全 取 
决 于 节点 的 类 型 。 在 使 用 这 两 个 值 以 前 ， 最 好 是 像 下 面 这 样 先 检测 一 下 节点 的 类 型 。 


if (someNode.nodeType == 1){ 
value = someNode.nodeName; //nodeName 的 值 是 元 素 的 标签 名 

































































} 


在 这 个 例子 中 , 首先 检查 节点 类 型 , 看 它 是 不 是 一 个 元 素 。 如 果 是 , 则 取得 并 保存 nodeName 的 值 。 
对 于 元 素 节点 ，nodeName 中 保存 的 始终 都 是 元 素 的 标签 名 ， 而 nodeValue 的 值 则 始终 为 nul1。 

2. 节点 关系 

文档 中 所 有 的 节点 之 间 都 存在 这 样 或 那样 的 关系 。 节 点 间 的 各 种 关系 可 以 用 传统 的 家 族 关 系 来 描 
述 , 相当 于 把 文档 树 比 喻 成 家 谱 。 在 HTML 中 , 可 以 将 <boqy> 元 素 看 成 是 <htm1> 元 素 的 子 元 素 ; 相应 
地 ， 也 就 可 以 将 <htm1l> 元 素 看 成 是 <body> 元 素 的 父 元 素 。 而 <head> 元 素 ， 则 可 以 看 成 是 <body> 元 素 
的 同胞 元 素 ， 因 为 它们 都 是 同一 个 父 元 素 <html> 的 直接 子 元素 。 
每 个 节点 都 有 一 个 chilgNodes 属性 , 其 中 保存 着 一 个 NodeList 对 象 。 NodeList 是 一 种 类 数组 
对 象 , 用 于 保存 一 组 有 序 的 节点 ， 可 以 通过 位 置 来 访问 这 些 节 点 。 请 注意 ， 虽 然 可 以 通过 方 括号 语法 来 
访问 NodeList 的 值 , 而且 这 个 对 象 也 有 length 属性 , 但 它 并 不 是 Array 的 实例 。 NodeList 对 象 的 
独特 之 处 在 于 ， 它 实际 上 是 基于 DOM 结构 动态 执行 查询 的 结果 ， 因 此 DOM 结构 的 变化 能 够 自动 反映 
在 NodeList 对 象 中 。 我们 常 说 ，NodeList 是 有 生命 、 有 呼吸 的 对 象 ， 而 不 是 在 我 们 第 一 次 访问 它们 
的 某 个 瞬间 拍摄 下 来 的 一 张 快照 。 

下 面 的 例子 展示 了 如 何 访问 保存 在 NodeList 中 的 节点 一 一 可 以 通过 方 括号 ， 也 可 以 使 用 item() 
方法 。 

Var firstChild = someNode.childNodes[0]; 


var secondChild = someNode.childNodes.item(1); 
Var count = someNode.childNodes.1length; 
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无 论 使 用 方 括号 还 是 使 用 item() 方 法 都 没有 问题 ， 但 使 用 方 括号 语法 看 起 来 与 访问 数组 相似 ， 
此 颇 受 一 些 开发 人 员 的 青睐 。 另 外 ,要 注意 length 属性 表示 的 是 访问 NodeList 的 那 一 刻 ， 其 中 包含 
的 节点 数量 。 我们 在 本 书 前 面 介绍 过 , 对 arguments 对 象 使 用 Array.prototype.slice() 方 法 可 以 
将 其 转换 为 数组 。 而 采用 同样 的 方法 ， 也 可 以 将 NodeList 对 象 转换 为 数组 。 来 看 下 面 的 例子 : 

// 在 IE8 及 之 前 版 本 中 无 效 

Var arrayOfNodes = Array.prototype.slice.call (someNode.childNodes,0); 

除 IE8 及 更 早 版 本 之 外 ， 这 行 代码 能 在 任何 浏览 器 中 运行 。 由 于 IE8 及 更 早 版 本 将 NodeList 
实现 为 一 个 COM 对 象 ， 而 我 们 不 能 像 使 用 JScript 对 象 那样 使 用 这 种 对 象 ， 因 此 上 面 的 代码 会 导致 
错误 。 要 想 在 下 中 将 NodeList 转换 为 数组 ， 必 须 手动 枚 举 所 有 成 员 。 下 列 代码 在 所 有 浏览 器 中 都 
可 以 运行 : 






















































































function convertToArray (nodes)t{ 
var array = null; 
try { 
array = Array.prototype.slice.call(nodes，0); // 针 对 非 契 浏览 器 
} catch (ex) { 
array = new Array(); 
for (var i=0, len=nodes.length; i < len; I++){ 
array.push (nodes[i]); 
} 
} 


return array; 


} 


这 个 convertToArray () 函数 首先 尝试 了 创建 数组 的 最 简单 方式 。 如 果 导 致 了 错误 ( 说 明 是 在 
IE8 及 更 早 版 本 中 ), 则 通过 try-catch 块 来 捕获 错误 , 然后 手动 创建 数组 。 这 是 男 一 种 检测 怪癖 的 
形式 。 
每 个 节点 都 有 一 个 parentNode 属性 , 该 属性 指向 文档 树 中 的 父 节 点 。 包 含 在 chilgNodes 列表 中 
的 所 有 节点 都 具有 相同 的 父 节 点 ， 因 此 它们 的 parentNode 属性 都 指向 同一 个 节点 。 此 外 ， 包含 在 
chilgNogdes 列表 中 的 每 个 节点 相互 之 间 都 是 同胞 节点 。 通 过 使 用 列表 中 每 个 节点 的 previousSibling 
和 nextsibling 属性 , 可 以 访问 同一 列表 中 的 其 他 节点 。 列 表 中 第 一 个 节点 的 previoussibling 属性 
值 为 aul1， 而 列表 中 最 后 一 个 节点 的 nextsibling 属性 的 值 同样 也 为 null1， 如 下 面 的 例子 所 示 : 




















































































































IE (someNode.nextSibling === null)t 
alert("Last node in the parent’'s childNodes list."); 
} else if (someNode.previousSibling === null)t{ 


alert ("First node in the parent’'s childNodes list."); 


} 


当然 ， 如 果 列 表 中 只 有 一 个 节点 ， 那么 该 节点 的 nextsibling 和 previoussibling 都 为 null。 

父 节点 与 其 第 一 个 和 最 后 一 个 子 节 点 之 间 也 存在 特殊 关系 。 父 节点 的 firstchild 和 lastchild 
属性 分 别 指向 其 chilgaNodes 列表 中 的 第 一 个 和 最 后 一 个 节点 。 其 中 ，someNode .firstchild 的 值 
始终 等 于 someNode.childNodes[0] ， 而 someNode.lastchild 的 值 始终 等 于 someNode. 
childNodes [someNode.childNodes.length-1]。 在 只 有 一 个 子 节点 的 情况 下 ，firstchilq 和 
lastchild 指向 同一 个 节点 。 如 果 没 有 子 节 点 ， 那么 firstchild 和 lastchilad 的 值 均 为 nul1。 明 
确 这 些 关系 能 够 对 我 们 查找 和 访问 文档 结构 中 的 节点 提供 极 大 的 便利 。 图 10-2 形象 地 展示 了 上 述 关 系 。 
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图 10-2 


在 反映 这 些 关系 的 所 有 属性 当中 ，chilgNodes 属性 与 其 他 属性 相 比 更 方便 一 些 ， 因 为 只 须 使 用 简 
单 的 关系 指针 ， 就 可 以 通过 它 访 问 文档 树 中 的 任何 节点 。 另 外 ，haschildNodes () 也 是 一 个 非常 有 用 
的 方法 ， 这 个 方法 在 节点 包含 一 或 多 个 子 节点 的 情况 下 返回 true; 应 该 说 ， 这 是 比 查 询 childNodes 
列表 的 length 属性 更 简单 的 方法 。 

所 有 节点 都 有 的 最 后 一 个 属性 是 ownerDocument， 该 属性 指向 表示 整个 文档 的 文档 节点 。 这 种 关 
系 表示 的 是 任何 节点 都 属于 它 所 在 的 文档 , 任何 节点 都 不 能 同时 存在 于 两 个 或 更 多 个 文档 中 。 通 过 这 个 
属性 ， 我 们 可 以 不 必 在 节点 层次 中 通过 层 层 回溯 到 达 顶 端 ， 而 是 可 以 直接 访问 文档 节点 。 












































虽然 所 有 节点 类 型 都 继承 自 Node， 但 并 不 是 每 种 节点 都 有 子 节点 。 本 章 后 面 将 


会 讨论 不 同 节点 类 型 之 间 的 差异 。 





3. 操作 节点 
因为 关系 指针 都 是 只 读 的 ， 所 以 DOM 提供 了 一 些 操作 节点 的 方法 。 其 中 ， 最 常用 的 方法 是 
appendchild() ， 用 于 向 chilgNodes 列表 的 末尾 添加 一 个 节点 。 添 加 节点 后 ，childNoaes 的 新 增 
节点 、 父 节点 及 以 前 的 最 后 一 个 子 节 点 的 关系 指针 都 会 相应 地 得 到 更 新 。 更 新 完成 后 , appendchild() 
返回 新 增 的 节点 。 来 看 下 面 的 例子 : 

var returnedNode = someNode.appendChild (newNode); 


alert (returnedNode == newNode); //true 
alert (someNode.lastChild == newNode); //true 


如 果 传 和 到 appendchila() 中 的 节点 已 经 是 文档 的 一 部 分 了 ， 那 结果 就 是 将 该 节点 从 原来 的 位 置 
转移 到 新 位 置 。 即 使 可 以 将 DOM 树 看 成 是 由 一 系列 指针 连接 起 来 的 ， 但 任何 DOM 节点 也 不 能 同时 出 
现在 文档 中 的 多 个 位 置 上 。 因 此 ， 如 果 在 调用 appendchilda() 时 传人 了 父 节 点 的 第 一 个 子 节点 ， 那 么 
该 节点 就 会 成 为 父 节 点 的 最 后 一 个 子 节 点 ， 如 下 面 的 例子 所 示 。 

//someNode 有 多 个 子 节 点 

Var returnedNode = someNode.appendChild(someNode.firstChild); 


alert (returnedNode == someNode.firstChild); //false 
alert (returnedNode == someNode.lastChild); //true 
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如 果 需 要 把 节点 放 在 childNodes 列表 中 某 个 特定 的 位 置 上 ， 而 不 是 放 在 末尾 ， 那 么 可 以 使 





insertBefore () 方 法 。 这 个 方法 接受 两 个 参数 : 要 插入 的 节点 和 作为 参照 的 节点 。 插 入 节点 后 ,被 插 
入 的 节点 会 变 成 参照 节点 的 前 一 个 同胞 节点 (previousSibling )， 同 时 被 方法 返回 。 如 果 参 照 节点 是 


null， 则 insertBefore() 与 appendchild() 执 行 相同 的 操作 ， 如 下 面 的 例子 所 示 。 


// 播 入 后 成 为 最 后 一 个 子 节点 
returnedNode = SomeNode.insertBefore (newNodqe，mnul1) ; 
alert (newNode == someNode.lastChild); //true 


/ /插入 后 成 为 第 一 个 子 节点 

Var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); 
alert (returnedNode == newNode); //true 

alert (newNode == someNode.firstChild); //true 


/ /插入 到 最 后 一 个 子 节点 前 面 
returnedNode = someNode.insertBefore(newNode, someNode.lastChild); 
alert (newNode == someNode.childNodes[someNode.childNodes.length-2]); //true 





























前 面 介绍 的 appendchild() 和 insertBefore() 方 法 都 只 插入 节点 ， 不 会 移 除 节点 。 而 下 面 要 
绍 的 replaceCchi1d() 方 法 接受 的 两 个 参数 是 : 要 插入 的 节点 和 要 替换 的 节点 。 要 替换 的 节点 将 由 这 
方法 返回 并 从 文档 树 中 被 移 除 ， 同 时 由 要 插入 的 节点 占据 其 位 置 。 来 看 下 面 的 例子 。 





























/ /替换 第 一 个 子 节点 
Var returnedNode = someNode.replaceChild (newNode, someNode.firstChild); 


/ /替换 最 后 一 个 子 节点 
returnedNode = someNode.replaceChild (newNode, someNode.lastChild); 


























来 。 尽 管 从 技术 上 讲 ， 被 替换 的 节点 仍然 还 在 文档 中 ， 但 它 在 文档 中 已 经 没有 了 自己 的 位 置 。 








LU 





目 


介 
个 


在 使 用 *eplacechilda() 插 和 人 一 个 节点 时 ， 该 节点 的 所 有 关系 指针 都 会 从 被 它 替 换 的 节点 复制 过 


如 果 只 想 移 除 而 非 蔡 换 节点 ， 可 以 使 用 removechild() 方 法 。 这 个 方法 接受 一 个 参数 ， 即 要 移 除 





二 


的 节点 。 被 移 除 的 节点 将 成 为 方法 的 返回 值 ， 如 下 面 的 例子 所 示 。 


// 移 除 第 一 个 子 节点 
Var formerFirstChild = someNode.removeChild!(someNode.firstChild); 





// 移 除 最 后 一 个 子 节点 
Var formerLastChild = someNode .emovechild(someNodqe.1Lastchildq) ; 


与 使 用 replacechild() 方 法 一 样 ,， 通过 removechild() 移 除 的 节点 仍然 为 文档 所 有 ， 只 不 过 在 


文档 中 已 经 没有 了 自己 的 位 置 。 





























4 日 人 入 二 


前 面 介 绍 的 四 个 方法 操作 的 都 是 某 个 节点 的 子 节点 ,也 就 是 说 ， 要 使 用 这 几 个 方法 必须 先 取 得 父 节 


点 (使 用 parentNoge 属性 )。 另 外 ， 并 不 是 所 有 类 型 的 节点 都 有 子 节 点 ， 如 果 在 不 支持 子 节 点 的 节点 

















上 调用 了 这 些 方法 ， 将 会 导致 错误 发 生 。 
4. 其 他 方法 


四 


























有 两 个 方法 是 所 有 类 型 的 节点 都 有 的 。 第 一 个 就 是 cloneNode () ， 用 于 创建 调用 这 个 方法 的 节点 
的 一 个 完全 相同 的 副本 。 cloneNode () 方 法 接受 一 个 布尔 值 参数 , 表示 是 否 执 行 深 复制 。 在 参数 为 true 
的 情况 下 ， 执 行 深 复制 ， 也 就 是 复制 节点 及 其 整个 子 节 点 树 ; 在 参数 为 false 的 情况 下 ， 执 行 浅 复制 ， 
即 只 复制 节点 本 身 。 复 制 后 返回 的 节点 副本 属于 文档 所 有 ,但 并 没有 为 它 指定 父 节 点 。 因 此 ， 这 个 节点 
副本 就 成 为 了 一 个 “孤儿 ”， 除 非 通过 appendchild() 、insertBefore() 或 replacechild() 将 它 
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添加 到 文档 中 。 例 如 ,假设 有 下 面 的 HTML 代码 。 


<ul> 
<l1i>item 1</1i> 
<l1i>item 2</1i> 
<lisitem 3</11i» 
</ul> 


如 果 我 们 已 经 将 <ul> 元 素 的 引用 保存 在 了 变量 myList 中 ， 那 么 通常 下 列 代码 就 可 以 看 出 使 用 
cloneNode() 方 法 的 两 种 模式 。 


Var deepList = myList.cloneNode (true); 
alert (deepList.childNodes.1length); //3 (IE < 9) 或 7 (其 他 浏览 器 ) 

















Var shallowList = myList.cloneNode (false); 
alert (shallowList.childNodes.length); //0 


在 这 个 例子 中 ，deepList 中 保存 着 一 个 对 myList 执行 深 复制 得 到 的 副本 。 因 此 ，deepList 中 
包含 3 个 列表 项 ， 每 个 列表 项 中 都 包含 文本 。 而 变量 shallowList 中 保存 着 对 myList 执行 浅 复 制 得 
到 的 副本 ， 因 此 它 不 包含 子 节点 。dqeepList.childNodes.1length 中 的 差异 主要 是 因为 IE8 及 更 早 版 
本 与 其 他 浏览 器 处 理 空白 字符 的 方式 不 一 样 。IE9 之 前 的 版 本 不 会 为 空白 符 创建 节点 。 

















cloneNode() 方 法 不 会 复制 添加 到 DOM 节点 中 的 JavaScript 属性 ， 例 如 事件 处 
理 程序 等 。 这 个 方法 只 复制 特性 、( 在 明确 指定 的 情况 下 也 复制 ) 子 节点 ， 其 他 一 切 
都 不 会 复制 。 正在 此 存在 一 个 bug， 即 它 会 复制 事件 处 理 程序 ， 所 以 我 们 建议 在 复制 
之 前 最 好 先 移 除 事件 处 理 程序 。 


我 们 要 介绍 的 最 后 一 个 方法 是 normalize (), 这 个 方法 唯一 的 作用 就 是 处 理 文档 树 中 的 文本 节点 。 
由 于 解析 器 的 实现 或 DOM 操作 等 原因 ， 可 能 会 出 现 文 本 节点 不 包含 文本 ,或 者 接连 出 现 两 个 文本 节点 
的 情况 。 当 在 某 个 节点 上 调用 这 个 方法 时 ， 就 会 在 该 节点 的 后 代 节 点 中 查找 上 述 两 种 情况 。 如 果 找 到 了 
室 文 本 节点 ， 则 删除 它 ; 如 果 找 到 相 邻 的 文本 节点 ， 则 将 它们 合并 为 一 个 文本 节点 。 本 章 后 面 还 将 进 一 
步 讨 论 这 个 方法 。 























10.1.2 “Document 类 型 


JavaScript 通过 Document 类 型 表示 文档 。 在 浏览 器 中 ，document 对 象 是 HTMLDocument (继承 
月 Document 类 型 ) 的 一 个 实例 ,表示 整个 HTML 页 面 。 而 且 ，qocument 对 象 是 window 对 象 的 一 个 
属性 ， 因 此 可 以 将 其 作为 全 局 对 象 来 访问 。Document 节点 具有 下 列 特征 : 
D nodeType 的 值 为 9; 
口 nodeName 的 值 为 "#document"; 
口 nodeValue 的 值 为 null; 
口 parentNode 的 值 为 nu1l; 
口 ornerDocument 的 值 为 null; 
口 其 子 节点 可 能 是 一 个 DocumentType( 最 多 一 个 )、Element (最 多 一 个 )、ProcessingInstruction 
或 Comment。 
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Document 类 型 可 以 表示 HTML 页 面 或 者 其 他 基于 XML 的 文档 。 不 过 ， 最 常见 的 应 用 还 是 作为 











HTMLDocument 实例 的 document 对 象 。 通 过 这 个 文档 对 象 , 不 仅 可 以 取得 与 页 面 有 关 的 信息 , 而 且 还 
能 操作 页 面 的 外 观 及 其 底层 结构 。 









在 Firefox、Safari、Chrome 和 Opera 中 ， 可 以 通过 脚本 访问 Document 类 型 的 构 
造 函 数 和 原型 ,但 在 所 有 浏览 器 中 都 可 以 访问 HTMLDocument 类 型 的 构造 函数 和 原型 ， 
包括 8 及 后 续 版 本 。 


1. 文档 的 子 节点 
虽然 DOM 标准 规定 Document 节点 的 子 节点 可 以 是 DocumentType、 Element、 ProcessingIn- 





struction 或 Comment, 但 还 有 两 个 内 置 的 访问 其 子 节点 的 快捷 方式 ,第 一 个 就 是 documentElement 


属性 


















































FE, 该 属性 始终 指向 HTML 页 面 中 的 <html> 元 素 。 另 一 个 就 是 通过 chilgNodes 列表 访问 文档 元 素 ， 
但 通过 documentElement 属性 则 能 更 快捷 、 更 直接 地 访问 该 元 素 。 以 下 面 这 个 简单 的 页 面 为 例 。 
<html> 
<body> 
</body> 
</html> 

















这 个 页 面 在 经 过 浏览 器 解析 后 ， 其 文档 中 只 包含 一 个 子 节 点 ， 即 <html> 元 素 。 可 以 通过 





documentElement 或 childNodes 列表 来 访问 这 个 元 素 ， 如 下 所 示 。 


元 圾 。 





var html = document.documentElement; // 取 得 对 <html> 的 引用 
alert (html === document.childNodes[0]); //true 
alert (html === document.firstChild); //true 





这 个 例子 说 明 ， documentElement、firstchild 和 childNodes [10] 的 值 相 同 ， 都 指向 <html> 








作为 HTMLDocument 的 实例 ，document 对 象 还 有 一 个 body 属性 ， 直 接 指向 <pody> 元 素 。 因 为 开 





发 人 员 经 常 要 使 用 这 个 元 素 ， 所 以 document .body 在 JavaScript 代码 中 出 现 的 频率 非常 高 ， 其 用 法 如 下 。 





var body = document .body; // 取 得 对 <body> 的 引用 








所 有 浏览 器 都 支持 document .documentElement 和 document .body 属性 。 
Document 另 一 个 可 能 的 子 节点 是 DocumentType。 通 常 将 <!1DOCTYPE> 标 签 看 成 一 个 与 文档 其 他 

















部 分 不 同 的 实体 ， 可 以 通过 aoctype 属性 (在 浏览 右 中 是 document .doctype ) 来 访问 它 的 信息 。 


Var doctype = document .doctype; // 取 得 对 <!DOCTYPE> 的 引用 

浏览 器 对 document .doctype 的 支持 差别 很 大 ， 可 以 给 出 如 下 总 结 。 

口 IE8 及 之 前 版 本 : 如 果 存 在 文档 类 型 声明 ， 会 将 其 错误 地 解释 为 一 个 注释 并 把 它 当 作 comment 

节点 ; 而 document .doctype 的 值 始终 为 null。 

口 IE9+ 及 Firefox: 如 果 存 在 文档 类 型 声明 ， 则 将 其 作为 文档 的 第 一 个 子 节 点 ; document .doctype 
是 一 个 DocumentType 节点 ,也 可 以 通过 aocument .firstchild 或 document .childNodes[0] 
访问 同一 个 节点 。 

口 Safari、Chrome 和 Opera: 如 果 存 在 文档 类 型 声明 , 则 将 其 解析 , 但 不 作为 文档 的 子 节点 。docu- 
ment .doctype 是 一 个 DocumentType 节点 , 但 该 节点 不 会 出 现在 document .chilgNodes 中 。 
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由 于 浏览 器 对 document .doctype 的 支持 不 一 致 ， 因 此 这 个 属性 的 用 处 很 有 限 。 
从 技术 上 说 ， 出 现在 <ntml> 元 素 外 部 的 注释 应 该 算是 文档 的 子 节点 。 然 而 ， 不 同 的 浏览 器 在 是 否 
解析 这 些 注释 以 及 能 否 正确 处理 它们 等 方面 ， 也 存在 很 大 差异 。 以 下 面 简单 的 HTML 页 面 为 例 。 
-第 一 条 注 类 


<html> 
<body> 

















</body> 

</html> 

<!-- 第 二 条 注释 --> 

看 起 来 这 个 页 面 应 该 有 3 个 子 节点 : 注释 、<htmlL> 元 素 、 注 释 。 从 逻辑 上 讲 ， 我 们 会 认为 
document .chilgNodes 中 应 该 包含 与 这 3 个 节点 对 应 的 3 项 。 但是， 现实 中 的 浏览 费 在 处 理 位 于 
<html> 外 部 的 注释 方面 存在 如 下 差异 。 

口 IE8 及 之 前 版 本 、Safari 3.1 及 更 高 版 本 、Opera 和 Chrome 只 为 第 一 条 注释 创建 节点 ， 不 为 第 二 
条 注释 创建 节点 。 结 果 ， 第 一 条 注释 就 会 成 为 aocument .chilgNogdes 中 的 第 一 个 子 节点 。 

口 IE9 及 更 高 版 本 会 将 第 一 条 注释 创建 为 document .chilgdNodes 中 的 一 个 注释 节点 ， 也 会 将 第 
二 条 注释 创建 为 aocument .childqNodes 中 的 注释 子 节点 。 

口 Firefox 以 及 Safari 3.1 之 前 的 版 本 会 完全 忽略 这 两 条 注释 。 

同样 ， 浏 览 器 间 的 这 种 不 一 致 性 也 导致 了 位 于 <html> 元 素 外 部 的 注释 没有 什么 用 处 。 

多 数 情 况 下 ， 我 们 都 用 不 着 在 document 对 象 上 调用 appendchild() 、removechild() 和 
replacechild() 方 法 ， 因 为 文档 类 型 ( 如 果 存 在 的 话 ) 是 只 读 的 ， 而 且 它 只 能 有 一 个 元 素 子 节点 (该 
节点 通常 早 就 已 经 存在 了 )。 

2. 文档 信息 

作为 HTMLDocument 的 一 个 实例 ，document 对 象 还 有 一 些 标准 的 Document 对 象 所 没有 的 属性 。 
这 些 属性 提供 了 document 对 象 所 表现 的 网 页 的 一 些 信息 。 其 中 第 一 个 属性 就 是 title， 包 含 着 
<title> 元 素 中 的 文本 显示 在 浏览 器 窗口 的 标题 栏 或 标签 页 上 。 通过 这 个 属性 可 以 取得 当前 页 面 的 
标题 , 也 可 以 修改 当前 页 面 的 标题 并 反映 在 浏览 器 的 标题 栏 中 。 修改 title 属性 的 值 不 会 改变 <title> 
元 素 。 来 看 下 面 的 例子 。 

// 取 得 文档 标题 


Var originalTitle = document.title; 
















































































// 设 置 文档 标题 

document.title = "New page title"; 

接 下 来 要 介绍 的 3 个 属性 都 与 对 网 页 的 请 求 有 关 ， 它 们 是 URL、domain 和 referrer。URL 属性 
中 包含 页 面 完整 的 URL ( 即 地 址 栏 中 显示 的 URL )，domain 属性 中 只 包含 页 面 的 域名 ， 而 referrer 
属性 中 则 保存 着 链接 到 当前 页 面 的 那个 页 面 的 URL。 在 没有 来 源 页 面 的 情况 下 ,referrer 属性 中 可 能 
会 包含 空 字符 串 。 所 有 这 些 信息 都 存在 于 请 求 的 HTTP 头 部 ， 只 不 过 是 通过 这 些 属 性 让 我 们 能 够 在 
JavaScrip 中 访问 它们 而 已 ， 如 下 面 的 例子 所 示 。 


// 取 得 完整 的 URL 
Var Url = document .URL; 









































// 取 得 域名 
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Var domain = document .domain; 


// 取 得 来 源 页 面 的 URL 

Var referrer = document .referrer; 

URL 与 domain 属性 是 相互 关联 的 ,例如 ,如 果 document .URL 等 于 http:/www.wrox.com/WileyCDA/， 
那么 document .domain 就 等 于 www.wrox.com。 

在 这 3 个 属性 中 ， 只 有 domain 是 可 以 设置 的 。 但 由 于 安全 方面 的 限制 ， 也 并 非 可 以 给 aomain 设 
置 任何 值 ,如 果 URL 中 包含 一 个 子 域名 ,例如 p2p.wrox.com ,那么 就 只 能 将 domain 设置 为 "wrox .com" 
(URL 中 包含 "www" ， 如 www.wrox.com 时 ， 也 是 如 此 )。 不 能 将 这 个 属性 设置 为 URL 中 不 包含 的 域 ， 
如 下 面 的 例子 所 示 。 


// 假 设 页 面 来 自 p2p.wrox.com 域 





















































document .domain = "wrox.com"; // 成 功 


document .domain = "nczonline.net"; // 出 错 ! 


当 页 面 中 包含 来 自 其 他 子 域 的 框架 或 内 和 坐 框架 时 , 能 够 设置 document .domain 就 非常 方便 了 。 
于 跨 域 安全 限制 ， 来自 不 同 子 域 的 页 面 无 法 通过 JavaScript 通信 。 而 通过 将 每 个 页 面 的 
document .domain 设置 为 相同 的 值 ， 这 些 页 面 就 可 以 互相 访问 对 方 包含 的 JavaScript 对 象 了 。 例 如 ， 
假设 有 一 个 页 面 加 载 自 www.wrox.com， 其 中 包含 一 个 内 网 框架 ， 框架 内 的 页 面 加 载 自 p2p.wrox.com。 
由 于 document .domain 字符 串 不 一 样 ， 内 外 两 个 页 面 之 间 无 法 相互 访问 对 方 的 JavaScript 对 象 。 但 如 
果 将 这 两 个 页 面 的 document .domain 值 都 设置 为 "wrox.com"， 它 们 之 间 就 可 以 通信 了 。 

浏览 器 对 aomain 属性 还 有 一 个 限制 ， 即 如 果 域 名 一 开始 是 “松散 的 ”( loose ), 那么 不 能 将 它 再 设 
置 为 “ 紧 绷 的 ”(tight )。 换 句 话 说， 在 将 document .domain 设置 为 "wrox.com" 之 后 ， 就 不 能 再 将 其 
设置 回 "p2p.wrox.com"， 和 否则 将 会 导致 错误 ， 如 下 面 的 例子 所 示 。 


// 假 设 页 面 来 自 于 p2p.wrox.com 域 
















































































document .domain = "wrox.com"; / /松散 的 (成功) 

document .domain = "p2p.wrox.com"; // 紧 绷 的 (出错 1 ) 

所 有 浏览 器 中 都 存在 这 个 限制 ,但 IE8 是 实现 这 一 限制 的 最 早 的 下 版 本 。 
3. 查找 元 素 


说 到 最 常见 的 DOM 应 用 , 恐怕 就 要 数 取 得 特定 的 某 个 或 某 组 元 素 的 引用 , 然后 再 执行 一 些 操作 了 。 
取得 元 素 的 操作 可 以 使 用 aocument 对 象 的 几 个 方法 来 完成 。 其 中 ，Document 类 型 为 此 提供 了 两 个 方 
法 : getElementById() 和 getElementsByTagName () 。 

第 一 个 方法 ，getElementById()， 接 收 一 个 参数 : 要 取得 的 元 素 的 ID。 如 果 找 到 相应 的 元 素 则 
返回 该 元 素 ， 如 果 不 存在 带 有 相应 ID 的 元 素 ， 则 返回 nul1。 注 意 ， 这 里 的 ID 必须 与 页 面 中 元 素 的 id 
特性 (attribute ) 严格 匹配 ， 包 括 大 小 写 。 以 下 面 的 元 素 为 例 。 


<div id="myDiv">Some text</div> 
可 以 使 用 下 面 的 代码 取得 这 个 元 素 : 


var div = document .getElementById("myDiv"); // 取 得 <div> 元 素 的 引用 
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但 是 ,下 面 的 代码 在 除 IE7 及 更 早 版 本 之 外 的 所 有 浏览 器 中 都 将 返回 null。 
var div = dqocument .getElementById("myadqiv" ) ; // 无 效 的 ID (在 IE7 及 更 早 版 本 中 可 以 ) 


IE8 及 较 低 版 本 不 区 分 ID 的 大 小 写 ， 因 此 "myDiv" 和 "mydiv" 会 被 当 作 相同 的 元 素 ID。 

如 果 页 面 中 多 个 元 素 的 ID 值 相同 , getElementById() 只 返回 文档 中 第 一 次 出 现 的 元 素 。IE7 及 较 
低 版 本 还 为 此 方法 添加 了 一 个 有 意思 的 “怪癖 ”: name 特性 与 给 定 ID 匹配 的 表单 元 素 ( <input>、 
<textarea> 、<button> 及 <select> ) 也 会 被 该 方法 返回 。 如 果 有 哪个 表单 元 素 的 name 特性 等 于 指 
定 的 ID, 而 且 该 元 素 在 文档 中 位 于 带 有 给 定 ID 的 元 素 前 面 , 那么 正 就 会 返回 那个 表单 元 素 。 来 看 下 面 
的 例子 。 


<input type= "text" name="myElement" Value="Text field"> 
<div id="myElement">A div</div> 


基于 这 段 HTML 代码 ， 在 IE7 中 调用 aocument . detElLementById ("myE1Lement ") ， 结果 会 返 
回 <input> 元 素 ; 而 在 其 他 所 有 浏览 絮 中 ,都 会 返回 对 <div> 元 素 的 引用 。 为 了 避免 正 中 存在 的 这 个 问 
题 ， 最 好 的 办 法 是 不 让 表单 字段 的 name 特性 与 其 他 元 素 的 ID 相同 。 

另 一 个 常用 于 取得 元 素 引 用 的 方法 是 getElementsByTagName () 。 这 个 方法 接受 一 个 参数 ， 即 要 
取得 元 素 的 标签 名 ， 而 返回 的 是 包含 零 或 多 个 元 素 的 NodeList。 在 HTML 文档 中 ,这 个 方法 会 返回 一 
个 HTMLCollection 对 象 ， 作 为 一 个 “动态 ”集合 ， 该 对 象 与 NodeList 非常 类 似 。 例 如 ， 下 列 代码 
会 取得 页 面 中 所 有 的 <img> 元 素 ， 并 返回 一 个 HTMLCollection。 

var images = document .getElementsByTagName ("img"); 

这 行 代码 会 将 一 个 HTMLCollection 对 象 保存 在 images 变量 中 。 与 NodeList 对 象 类 似 ， 可 以 
使 用 方 括号 语法 或 item() 方 法 来 访问 HTMLCollection 对 象 中 的 项 。 而 这 个 对 象 中 元 素 的 数量 则 可 以 
通过 其 1ength 属性 取得 ， 如 下 面 的 例子 所 示 。 
































































































































alert (images.length); // 输 出 图 像 的 数量 
alert (images [0] .src); // 输 出 第 一 个 图 像 元 素 的 src 特性 
alert (images.item(0) .src); // 输 出 第 一 个 图 像 元 素 的 src 特性 





HTMLCollection 对 象 还 有 一 个 方法 ， 叫 做 namedaItem() ， 使 用 这 个 方法 可 以 通过 元 素 的 name 
特性 取得 集合 中 的 项 。 例 如 ， 假 设 上 面 提 到 的 页 面 中 包含 如 下 <img> 元 素 : 

<img src="myimage.gif" name="myImage"> 

那么 就 可 以 通过 如 下 方式 从 images 变量 中 取得 这 个 <img> 元 素 : 

Var myImage = images.namedItem("myImage" ) ; 


在 提供 按 索 引 访 问 项 的 基础 上 , HTMLCollection 还 支持 按 名 称 访问 项 , 这 就 为 我 们 取得 实际 想 要 
的 元 素 提 供 了 便利 。 而 且 ， 对 命名 的 项 也 可 以 使 用 方 括号 语法 来 访问 ， 如 下 所 示 : 

var myImage = images["myImage"]; 

对 HTMLCollection 而 言 ， 我 们 可 以 向 方 括号 中 传人 数值 或 字符 串 形 式 的 索引 值 。 在 后 台 ， 对 数 
值 索 引 就 会 调用 item() ， 而 对 字符 串 索 引 就 会 调用 namedItem() 。 

要 想 取 得 文档 中 的 所 有 元 素 , 可 以 向 getElementsByTagName () 中 传人 "*"。 在 JavaScript 及 CSS 
中 ， 星 号 (* ) 通常 表示 “全 部 ”。 下 面 看 一 个 例子 。 


Var allElements = document .getElementsByTagName ("*"),; 
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仅 此 一 行 代 码 返 回 的 HTMLCollection 中 ， 就 包含 了 整个 页 面 中 的 所 有 元 素 一 一 按照 它们 出 现 的 
先后 顺序 。 换 句 话说 ,第 一 项 是 <htm1l> 元 素 , 第 二 项 是 <headq> 元 素 , 以 此 类 推 。 由 于 正 将 注释 (comment ) 
实现 为 元 素 ( Element )， 因 此 在 正中 调用 getElementsByTagName("*") 将 会 返回 所 有 注释 节点 。 

























虽然 标准 规定 标签 名 需要 区 分 大 小 写 ， 但 为 了 最 大 限度 地 与 婚 有 HTML 页 面 兼 
容 , 传 给 getElementsByTagName () 的 标签 名 是 不 需要 区 分 大 小 写 的 。 但 对 于 XML 
页 面 而 言 (包括 XHTML ) ，getElLementsByTagName () 方法 就 会 区 分 大 小 写 。 














第 三 个 方法 ， 也 是 只 有 HTMLDocument 类 型 才 有 的 方法 ， 是 getElementsByName () 。 顾 名 思 义 ， 
这 个 方法 会 返回 带 有 给 定 name 特性 的 所 有 元 素 。 最 常 使 用 getElementsByName() 方 法 的 情况 是 取得 
单 选 按钮 ; 为 了 确保 发 送 给 浏览 器 的 值 正 确 无 误 ， 所 有 单 选 按钮 必须 具有 相同 的 name 特性 ， 如 下 面 的 
例子 所 示 。 


<fieldset> 
<legend>Which color do you prefer?</legend> 
<ul> 
<l1i><input type="radio" value="red" name="color" id="colorRed"> 
<label for="colorRed">Red</label></1i> 
<l1i><input type="radio" value="green" name="color" id="colorGreen"> 
<label for="colorGreen">Green</label></1i> 
<l1i><input type="radio" value="blue" name="color" id="colorBlue"> 
<label for="colorBlue">Blue</label></1i> 


















































</ul> 
</fieldset> 


如 这 个 例子 所 示 ， 其 中 所 有 单 选 按钮 的 name 特性 值 都 是 "color"， 但 它们 的 ID 可 以 不 同 。DD 的 
作用 在 于 将 <1abe1> 元 素 应 用 到 每 个 单 选 按钮 ， 而 name 特性 则 用 以 确保 三 个 值 中 只 有 一 个 被 发 送 给 浏 
览 器 。 这 样 ， 我 们 就 可 以 使 用 如 下 代码 取得 所 有 单 选 按钮 : 

var radios = document .getElementsByName ("color"); 

与 getElementsByTagName () 类 似 ，getElementsByName () 方 法 也 会 返回 一 个 HTMLCollectioin。 
但 是 ， 对 于 这 里 的 单 选 按钮 来 说 ，nameqItem() 方 法 则 只 会 取得 第 一 项 〈 因为 每 一 项 的 name 特性 都 相同 )。 

4. 特殊 集合 

除了 属性 和 方法 ，document 对 象 还 有 一 些 特殊 的 集合 。 这 些 集合 都 是 HrMLCollection 对 象 ， 
为 访问 文档 常用 的 部 分 提供 了 快捷 方式 ， 包 括 : 

口 document .anchors， 包 含 文档 中 所 有 带 name 特性 的 <a> 元 素 ; 

口 document .applets， 包 含 文档 中 所 有 的 <applet> 元 素 ， 因 为 不 再 推荐 使 用 <applet> 元 素 ， 
所 以 这 个 集合 已 经 不 建议 使 用 了 ; 
口 document . forms, 包含 文档 中 所 有 的 <form> 元 素 , 与 document .getElementsByTagName ("form") 
得 到 的 结果 相同 ; 

口 aocument .images， 包含 文 档 中 所 有 的 <img> 元 素 , 与 document .getElementsByTagName 
("img") 得 到 的 结果 相同 ; 

口 document .1inks， 包含 文档 中 所 有 带 href 特性 的 <a> 元 素 。 

这 个 特殊 集合 始终 都 可 以 通过 HTMLDocument 对 象 访问 到 , 而 且 , 与 HTMLCollection 对 象 类 似 ， 
集合 中 的 项 也 会 随 着 当前 文档 内 容 的 更 新 而 更 新 。 
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5. DOM 一 致 性 检测 





























由 于 DOM 分 为 多 个 级 别 ， 也 包含 多 个 部 分 ， 因 此 检测 浏览 器 实现 了 DOM 的 哪些 部 分 就 十 分 必要 


了 了。document .implementation 属性 就 是 为 此 提供 相应 信息 和 功能 的 对 象 , 与 浏览 右 对 DOM 的 实现 











方法 返回 true， 如 下 面 的 例子 所 示 : 





Var hasXmlDom = document.implementation.hasFeature("XML", "1.0"); 


下 表 列 出 了 可 以 检测 的 不 同 的 值 及 版 本 号 。 


直接 对 应 。DOMI 级 只 为 document .implementation 规定 了 一 个 方法 ， 即 hasFeature() 。 这 个 方 
法 接受 两 个 参数 : 要 检测 的 DOM 功能 的 名 称 及 版 本 号 。 如 果 浏 览 絮 支持 给 定名 称 和 版 本 的 功能 ， 


则 该 

















































































































功 能 版 本 号 说 明 
Core 1.0、2.0、3.0 基本 的 DOM， 用 于 描述 表现 文档 的 节点 树 
XML 1.0、2.0、3.0 Core 的 XML 扩展 ， 添 加 了 对 CDATA 、 处 理 指 令 及 实体 的 支持 
HTML 1.0、2.0 XML 的 HTML 扩 展 ， 添 加 了 对 HTML 特 有 元 素 及 实体 的 支持 
Views 2.0 基于 某 些 样式 完成 文档 的 格式 化 
StyleSheets 2.0 将 样式 表 关 联 到 文档 
CSS 2.0 对 层 释 样 式 表 1 级 的 支持 
CSS2 2.0 对 层 半 样式 表 2 级 的 支持 
Events 2.0, 3.0 常规 的 DOM 事 件 
UIEvents 2.0，3.0 用 户 界 面 事件 
MouseEvents 2.0，3.0 由 鼠标 引发 的 事件 ( click、mouseover 等 ) 
MutationEvents 2.0，3.0 DOM 树 变化 时 引发 的 事件 
HTMLEvents 2.0 HTML4.01 事 件 
Range 2.0 用 于 操作 DOM 树 中 某 个 范围 的 对 象 和 方法 
Traversal 2.0 遍历 DOM 树 的 方法 
LS 3.0 文件 与 DOM 树 之 间 的 同步 加 载 和 保存 
LS-Async 3.0 文件 与 DOM 树 之 间 的 异步 加 载 和 保存 
Validation 3.0 在 确保 有 效 的 前 提 下 修改 DOM 树 的 方法 








尽管 使 用 hasFeature () 确实 方便 ， 但 也 有 缺点 。 因 为 实现 者 可 以 自行 决定 是 否 与 DOM 规范 的 不 
同 部 分 保持 一 致 。 事 实 上 ， 要 想 让 hasFearture () 方 法 针对 所 有 值 都 返回 true 很 容易 ,但 返回 true 





有 时 候 也 











意味 着 实现 与 规范 一 致 。 例 如 ，Safari 2.x 及 更 早 版 本 会 在 没有 完全 实现 某 些 DOM 功能 的 情 


况 下 也 返回 true。 为 此 ， 我 们 建议 多 数 情况 下 ， 在 使 用 DOM 的 某 些 特殊 的 功能 之 前 ， 最 好 除了 检测 


hasFeature() 之 外 ， 还 同时 使 用 能 力 检测 。 
6. 文档 写 入 
有 一 个 document 对 象 的 功能 
体现 在 下 列 4 个 方法 中 : write()、 


Writeln()、 








经 存在 很 多 年 了 , 那 就 是 将 输出 流 写 人 到 网 页 中 的 能 
open() 和 close()。 其 中 ,write() 和 writeln() 


。 这 个 能 力 


方法 都 接受 一 个 字符 串 参 数 ， 即 要 写 和 到 输出 流 中 的 文本 。write() 会 原样 写 人 ， 而 writeln() 则 会 
在 字符 串 的 末尾 添加 一 个 换行 符 (\n )。 在 页 面 被 加 载 的 过 程 中 ， 可 以 使 用 这 两 个 方法 向 页 面 中 动态 地 











加 入 内 容 ， 如 下 面 的 例子 所 示 。 
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<html> 
C9 <head> 


9 


<title>document .write() Example</title> 
</head> 
<body> 

<p>The current date and time is: 





<script type="text/javascript"> 
document .write("<strong>" + (new Date()) .toString() + "</strong>"); 
</script> 
</p> 
</body> 
</html> 


DocumentWriteExample01.htm 


个 例子 展示 了 在 页 面 加 载 过 程 中 输出 当前 日 期 和 时 间 的 代码 。 其 中 , 日 期 被 包含 在 一 个 <strong> 
元 素 就 像 在 HTML 页 面 中 包含 普通 的 文本 一 样 。 这 样 做 会 创建 一 个 DOM 元 素 , 而 且 可 以 在 将 来 访 
问 该 元 素 。 通 过 write() 和 writeln() 输 出 的 任何 HTML 代码 都 将 如 此 处 理 。 
此 外 , 还 可 以 使 用 write() 和 writeln() 方 法 动态 地 包含 外 部 资源 , 例如 JavaScript 文件 等 。 在 包 
含 JavaScript 文件 时 ， 必 须 注意 不 能 像 下 面 的 例子 那样 直接 包含 字符 串 "</script>"， 因 为 这 会 导致 该 
字符 串 被 解释 为 脚本 块 的 结束 ， 它 后 面 的 代码 将 无 法 执行 。 


<html> 
<head> 

<title>document .write() Example 2</title> 
</head> 
<body> 

<script type="text/javascript"> 

document .write("<script type=\"text/javascript\" src=\"file.js\">" + 
"</script>"); 

</script> 
</body> 
</html> 
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即使 这 个 文件 看 起 来 没 错 ， 但 字符 串 "</script>" 将 被 解释 为 与 外 部 的 <script> 标 签 匹 配 ， 结 
文本 ") ;将 会 出 现在 页 面 中 。 为 避免 这 文 个 问题 ， 只 需 加 入 转 义 字符 \ 即 可 ; 第 2 章 也 曾经 提 及 这 个 问题 ， 
解决 方案 如 下 。 


<html> 
<head> 

<title>document .write() Example 3</title> 
</head> 
<body> 

<script type="text/javascript"> 

document .write("<script type=\"text/javascript\" src=\"file.js\">" + 
"<\/script>"); 

</script> 
</body> 
</html> 











DocumentWriteExample03.htm 
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字符 串 "<\/script>" 不 会 被 当 作 外 部 <script> 标 签 的 关闭 标签 ， 因 而 页 面 中 也 就 不 会 出 现 多 余 
的 内 容 了 。 

前 面 的 例子 使 用 aocument .write() 在 页 面 被 呈现 的 过 程 中 直接 向 其 中 输出 了 内 容 。 如 果 在 文档 
加 载 结束 后 再 调用 document .write() ， 那 么 输出 的 内 容 将 会 重 写 整个 页 面 ， 如 下 面 的 例子 所 示 : 


<html> 
<head> 

<title>document .write() Example 4</title> 
</head> 
<body> 

<p>This is some content that you won't get to see because it will be overwritten.</p> 

<script type="text/javascript"> 

window.onload = function(){ 
document .write("Hello world!"); 




















}3 
</script> 
</body> 
</html> 
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在 这 个 例子 中 , 我 们 使 用 了 window. onloag 事件 处 理 程序 (事件 将 在 第 13 章 讨论 )， 等 到 页 面 完 
全 加 载 之 后 延迟 执行 函数 。 函 数 执行 之 后 ， 字 符 串 "Hello world!" 会 重 写 整 个 页 面 内 容 。 

方法 open () 和 close() 分 别 用 于 打开 和 关闭 网 页 的 输出 流 。 如 果 是 在 页 面 加 载 期 间 使 用 write () 
或 writeln() 方 法 ， 则 不 需要 用 到 这 两 个 方法 。 











严格 型 XHTML 文档 不 支持 文档 写 入 ,对 于 那些 按照 application/xml+xhtml 


内 容 类 型 提供 的 页 面 ， 这 两 个 方法 也 同样 无 效 。 





10.1.3 ”ELement 类 型 


除了 pocument 类 型 之 外 ，Element 类 型 就 要 算是 Web 编程 中 最 常用 的 类 型 了 。Element 类 型 用 
于 表现 XML 或 HTML 元素 ,提供 了 对 元 素 标签 名 、 子 节点 及 特性 的 访问 。Element 节点 具有 以 下 特征 : 
DQ nodeType 的 值 为 1; 
口 nodeName 的 值 为 元 素 的 标签 名 ; 
口 nodeValue 的 值 为 null; 
口 barentNode 可 能 是 Document 或 Element; 






























































口 其 子 市 点 可 能 是 Element、Text、Comment、ProcessingInstruction、CDATASection 或 





EntityReferenceo 

要 访问 元 素 的 标签 名 ， 可 以 使 用 nodeName 属性 ， 也 可 以 使 用 tagName 属性 ; 这 两 个 属性 会 返回 
相同 的 值 (使 用 后 者 主要 是 为 了 清晰 起 见 )。 以 下 面 的 元 素 为 例 : 

<div id="myDiv"></div> 

可 以 像 下 面 这 样 取得 这 个 元 素 及 其 标签 名 : 


var div = document.getElementById("myDiv"); 
alert (div.tagName); TDLEY" 
alert (div.tagName == div.nodeName); //true 
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这 里 的 元 素 标 签名 是 aiv， 它 拥有 一 个 值 为 "myDiv" 的 ID。 可 是 ，aiv.tagName 实际 上 输出 的 是 
"DIV" 而 非 "aiv"。 在 HTML 中 ,标签 名 始终 都 以 全 部 大 写 表示 ; 而 在 XML (有 了 时候 也 包括 XHTML ) 
中 ,标签 名 则 始终 会 与 源 代码 中 的 保持 一 致 。 假 如 你 不 确定 自己 的 脚本 将 会 在 HTML 还 是 XML 文档 中 
执行 ， 最 好 是 在 比较 之 前 将 标签 名 转换 为 相同 的 大 小 写 形 式 ， 如 下 面 的 例子 所 示 : 



































if (element.tagName == "div"){ // 不 能 这 样 比较 , 很 容易 出 错 1 
// 在 此 执行 某 些 操作 

} 

if (element.tagName.toLowerCase() == "div"){ // 这 样 最 好 (适用 于 任何 文档 ) 
// 在 此 执行 某 些 操作 


} 

这 个 例子 展示 了 围绕 tagName 属性 的 两 次 比较 操作 。 第 一 次 比较 非常 容易 出 错 ， 因 为 其 代码 在 
HTML 文档 中 不 管用 。 第 二 次 比较 将 标签 名 转换 成 了 全 部 小 写 ， 是 我 们 推荐 的 做 法 ， 因 为 这 种 做 法 适用 
于 HTML 文档， 也 适用 于 XML 文档 。 





















DUOU0O000 下 8 
Element 0UU0UDUDO 


加 [本 加 WIRE 司 本 有 加 
atari2U0UUUU operagUUO0O0O0000000 





1. HTML 元 素 

所 有 HTML 元 素 都 由 HTMLElement 类 型 表示 , 不 是 直接 通过 这 个 类 型 , 也 是 通过 它 的 子 类 型 来 表 
示 -HTMLELement 类 型 直接 继承 自 Element 并 添加 了 一 些 属性 ,添加 的 这 些 属性 分 别 对 应 于 每 个 HTML 
元 素 中 都 存在 的 下 列 标准 特性 。 
口 1a， 元 素 在 文档 中 的 唯一 标识 符 。 
口 title， 有 关 元 素 的 附加 说 明 信 息 ， 一 般 通 过 工具 提示 条 显示 出 来 。 
口 lang， 元 素 内 容 的 语言 代码 ， 很 少 使 用 。 
口 dir, 语言 的 方向 ， 值 为 "1tr" (1left-to-right， 从 左 至 右 ) 或 "zt1" (right-to-left， 从 右 至 左 )， 
了 岂 很 少 使 用 。 
口 className ,与 元 素 的 class 特性 对 应 , 即 为 元 素 指定 的 CSS 类 .没有 将 这 个 属性 命名 为 class， 

是 因为 class 是 ECMAScript 的 保留 字 (有 关 保 留 字 的 信息 ， 请 参见 第 1 章 )。 

上 述 这 些 属性 都 可 以 用 来 取得 或 修改 相应 的 特性 值 。 以 下 面 的 HTML 元 素 为 例 : 


<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div> 


HTMLElementsExample01.htm 

































































元 素 中 指定 的 所 有 信息 ， 都 可 以 通过 下 列 JavaScript 代码 取得 : 


var div = dqocument .getElementByIQ("myDiv" ) ; 


alert (div.id); /my Div 
alert (div.className); A/*bar 

alert (div.title); //"Body text" 
alert (div.lang); //"en" 

alert (div.dir); A 





当然 ， 像 下 面 这 样 通过 为 每 个 属性 赋予 新 的 值 ， 也 可 以 修改 对 应 的 每 个 特性 : 
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div. 
div: 
div. 
div. 
[silo 


并 不 
不 可 见 的 
之 上 时 才 
修改 cla 
前 面 





id = "someOtherId"; 
className = "ft"; 

title = "Some other text"; 
lang "Fe", 

1 王 下 天 芷 粳 风光 
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是 对 所 有 属性 的 修改 都 会 在 页 面 中 直观 地 表现 出 来 。 对 ia 或 lang 的 修改 对 用 户 而 言 是 透明 
(假设 没有 基于 它们 的 值 设置 的 CSS 样式 ), 而 对 title 的 修改 则 只 会 在 鼠标 移动 到 这 个 元 素 
会 显示 出 来 。 对 dir 的 修改 会 在 属性 被 重 写 的 那 一 刻 , 立即 影响 页 面 中 文本 的 左 、 右 对 齐 方式 。 
ssName 时 ， 如 果 新 类 关联 了 与 此 前 不 同 的 CSS 样式 ， 那 么 就 会 立即 应 用 新 的 样式 。 

提 到 过 , 所 有 HTML 元 素 都 是 由 HTMLElement 或 者 其 更 具体 的 子 类 型 来 表示 的 。 下 表 列 出 了 




















| 











所 有 HTML 元 素 以 及 与 之 关联 的 类 型 ( 以 斜体 6 





二 








刷 的 元 素 表 示 已 经 不 推荐 使 用 了 )。 注意 ， 表 中 的 这 些 
































类 型 在 Opera、Safari、Chrome 和 Firefox 中 都 可 以 通过 JavaScript 访问 ， 但 在 IE8 之 前 的 版 本 中 不 能 通 
过 JavaScript 访问 。 

元 素 类 型 元 素 类 型 
A HTMLANnCchorElement EM HTMLElement 
ABBR HTMLElement FIELDSET HTMLFieldSetElement 
ACRONYM HTMLElement FONT HTMLFontElement 
ADDRESS HTMLElement FORM HTMLFOormElement 
APPLET HTMLAppletElement FRAME HTMLFrameElement 
AREA HTMLAreaElement FRAMESET HTMLFrameSetElement 
B HTMLElement Hl HTMLHeadingElement 
BASE HTMLBaseElement H2 HTMLHeadingElement 
BASEFONT HTMLBaseFontElement H3 HTMLHeadingElement 
BDO HTMLElement H4 HTMLHeadingElement 
BIG HTMLElement HS HTMLHeadingElement 
BLOCKQUOTE HTMLOUOoteElement H6 HTMLHeadingElement 
BODY HTMLBodyElement HEAD HTMLHeadElement 
BR HTMLBRElement HR HTMLHRElement 
BUTTON HTMLButtonElement HTML HTMLHtmlElement 
CAPTION HTMLTableCaptionElement 全 HTMLElement 
CENTER HTMLElement IFRAME HTMLIFrameElement 
CITE HTMLElement IMG HTMLImageElement 
CODE HTMLElement INPUT HTMLINnputElement 
GOL HTMLTableColElement INS HTMLModElement 
COLGROUP HTMLTableColElement ISINDEX HTMLISINdexElement 
DD HTMLElement KBD HTMLElement 
DEL HTMLModElement LABEL HTMLLabelElement 
DFN HTMLElement LEGEND HTMLLegendElement 
DIR HTMLDirectoryElement LI HTMLLIElement 
DIV HTMLDivElement LINK HTMLLinkElement 
DL HTMLDLi stElement MAP HTMLMapElement 
DT HTMLElement MENU HTMLMenuElement 
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( 续 ) 

元 素 类 型 元 素 类 型 
META HTMLMetaElement STRONG HTMLElement 
NOFRAMES HTMLElement STYLE HTMLStyleElement 
NOSCRIPT HTMLElement SUB HTMLElement 
OBJECT HTMLObjectElement SUP HTMLElement 
OL HTMLOListElement TABLE HTMLTableElement 
OPTGROUP HTMLOptGroupElement TBODY HTMLTableSectionElement 
OPTION HTMLOptionElement TD HTMLTableCellElement 
P HTMLParagraphElement TEXTAREA HTMLTextAreaElement 
PARAM HTMLParamElement TFOOT HTMLTableSectionElement 
PRE HTMLPreElement TH HTMLTableCellElement 
Q HTMLQOUOteElement THEAD HIMLTableSectionElement 
Ss HTMLElement TITLE HTMLTitleElement 
SAMP HTMLElement TR HTMLTableRowElement 
SCRIPT HTMLScriptElement TT HTMLElement 
SELECT HTMLSelectElement U HTMLElement 
SMALL HTMLElement UL HTMLUListElement 
SPAN HTMLElement VAR HTMLElement 
STRIKE HTMLElement 




















表 中 的 每 一 种 类 型 都 有 与 之 相关 的 特性 和 方法 。 本 书 将 会 讨论 其 中 很 多 类 型 。 


2. 取得 特性 


























每 个 元 素 都 有 一 或 多 个 特性 ， 这 些 特性 的 用 途 是 给 出 相应 元 素 或 其 内 容 的 附加 信息 。 操 作 特 性 的 


DOM 方法 主要 有 三 个 ， 分 别 是 getAttribute()、setAttribute() 和 removeAttribute()。 这 二 
个 方法 可 以 针对 任何 特性 使 用 , 包括 那些 以 HTMLElement 类 型 属性 的 形式 定义 的 特性 。 来 看 下 面 的 例子 : 











var div = dqocument .getElementByIQ("myDiv" ) ; 





alert (div.getAttribute("id")); // "my Diyvy 
alert (div.getAttribute("class")); // "bd 

alert (div.getAttribute("title")); //"Body text" 
alert (div.getAttribute("lang")); //"en" 

alert (div.getAttribute("dir")); ZA LE 








主意 ， 传 递 给 getAttribute() 的 特性 名 与 实际 的 特性 名 相同 。 因 此 要 想得到 class 特性 值 ， 应 





该 传人 "class" 而 不 是 "className", 后 者 只 有 在 通过 对 象 属性 访问 特 怕 
不 存在 ，getAttribute() 返 回 null。 




















E 时 才 月 


日 。 如 有 果 给 定名 称 的 特性 





通过 getAttribute() 方 法 也 可 以 取得 自 定义 特性 ( 即 标准 HTML 语言 中 没有 的 特性 ) 的 值 ， 以 





下 面 的 元 素 为 例 : 


<div id="myDiv" my_special attribute="hello!"></div> 











这 个 元 素 包 含 一 个 名 为 my_special_attripute 的 自 定 义 特性 ， 它 的 值 是 "hello!"。 可 以 像 取 


得 其 他 特性 一 样 取得 这 个 值 ， 如 下 所 示 : 


var value = div.getAttribute("my_special attribute"); 


不 过 ， 特 性 的 名 称 是 不 区 分 大 小 写 的 ， 即 "ID" 和 "id" 代 表 的 都 是 同一 个 特性 。 另 外 也 要 注意 ， 根 








据 HTML5 规范 ， 自 定义 特性 应 该 加 上 qata- 前 级 以 便 验证 。 
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任何 元 素 的 所 有 特性 ,也 都 可 以 通过 DOM 元 素 本 身 的 属性 来 访问 。 当 然 ,， HTMLElement 也 会 有 5 
个 属性 与 相应 的 特性 一 一 对 应 。 不 过 ， 只 有 公认 的 ( 非 自 定义 的 ) 特性 才 会 以 属性 的 形式 添加 到 DOM 
对 象 中 。 以 下 面 的 元 素 为 例 : 

<div id="myDiv" align="left" my_special attribute="hello!"></div> 
因为 ia 和 align 在 HTML 中 是 <daiv> 的 公认 特性 , 因此 该 元 素 的 DOM 对 象 中 也 将 存在 对 应 的 属 
性 。 不 过 ， 自 定义 特性 my_special_attribute 在 Safari、Opera、Chrome 及 Firefox 中 是 不 存在 的 ; 
但 正 却 会 为 自 定义 特性 也 创建 属性 ， 如 下 面 的 例子 所 示 : 






































alert (div.id); //"myDiv" 
量 alert (div.my_special attribute); //undefined (IE 除 外 ) 
alert (div.align); A Ete 
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有 两 类 特殊 的 特性 , 它们 虽然 有 对 应 的 属性 名 , 但 属性 的 值 与 通过 getaAttribute() 返 回 的 值 并 不 
相同 。 第 一 类 特性 就 是 style， 用 于 通过 CSS 为 元 素 指定 样式 。 在 通过 getattribute() 访 问 时 ， 返 
回 的 style 特性 值 中 包含 的 是 CSS 文本 ， 而 通过 属性 来 访问 它 则 会 返回 一 个 对 象 。 由 于 style 属性 是 
用 于 以 编程 方式 访问 元 素 样 式 的 ( 本 章 后 面 讨论 )， 因 此 并 没有 直接 映射 到 style 特性 。 

第 二 类 与 众 不 同 的 特性 是 onclick 这 样 的 事件 处 理 程序 。 当 在 元 素 上 使 用 时 ，onclick 特性 中 包 
含 的 是 JavaScript 代码 ， 如 果 通 过 getAttribute() 访 问 ， 则 会 返回 相应 代码 的 字符 串 。 而 在 访问 
onclick 属性 时 ， 则 会 返回 一 个 JavaScript 函数 ( 如 果 未 在 元 素 中 指定 相应 特性 ， 则 返回 null )。 这 是 
因为 onclick 及 其 他 事件 处 理 程序 属性 本 身 就 应 该 被 赋予 函数 值 。 

由 于 存在 这 些 差别 ， 在 通过 JavaScript 以 编程 方式 操作 DOM 时 ， 开 发 人 员 经 常 不 使 用 getAttri- 
bute() ， 而 是 只 使 用 对 象 的 属性 。 只 有 在 取得 自 定义 特性 值 的 情况 下 ， 才 会 使 用 getAttribute () 方 法 。 













































































在 IE7 及 以 前 版 本 中 , 通过 getAttribute() 方 法 访问 style 特性 或 onclick 这 样 
的 事件 处 理 特性 时 ， 返回 的 值 与 属性 的 值 相同 。 换 句 话说 ，getAttribute("style") 返 
回 一 个 对 象 ， 而 getRttribute("onclick") 返 回 一 个 函数 。 虽 然 IE8 已 经 修复 了 这 个 
bug, 但 不 同 耻 版 本 间 的 不 一 致 性 ,也 是 导致 开发 人 员 不 使 用 getAttzibute() 访 问 HIML 
特性 的 一 个 原因 。 





3. 设置 特性 
与 getAttribute() 对 应 的 方法 是 setAttripute () ， 这 个 方法 接受 两 个 参数 : 要 设置 的 特性 名 和 
值 ,如 果 特 性 已 经 存在 ,setAttribute() 会 以 指定 的 值 替 换 现 有 的 值 ; 如果 特 性 不 存在 , setAttribute () 
则 创建 该 属性 并 设置 相应 的 值 。 来 看 下 面 的 例子 : 
div.setAttribute("id", "someOtherId"); 
中 div.setAttribute("class", "ft"); 
div.setAttribute("title", "Some other text"); 


div.setAttribute("lang", "fr"); 
div.setAttribute("dir", "rtl"); 
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通过 setAttripbute() 方 法 既 可 以 操作 HTML 特性 也 可 以 操作 自 定义 特性 。 通 过 这 个 方法 设置 的 
特性 名 会 被 统一 转换 为 小 写 形式 ， 即 "ID" 最 终 会 变 成 "id"。 
因为 所 有 特性 都 是 属性 ， 所 以 直接 给 属性 赋值 可 以 设置 特性 的 值 ， 如 下 所 示 。 






































div.id = "someOtherId"; 
div. align = "Left™; 
过 ， 像 下 面 这 样 为 DOM 元 素 添 加 一 个 自 定义 的 属性 ， 该 属性 不 会 自动 成 为 元 素 的 特性 。 
div.mycolor = "red"; 
alert (div.getAttribute("mycolor")); //null (IE 除外 ) 


这 个 例子 添加 了 一 个 名 为 mycolor 的 属性 并 将 它 的 值 设 置 为 "redq"。 在 大 多 数 浏览 器 中 ， 这 个 属 
性 都 不 会 自动 变 成 元 素 的 特性 ， 因 此 想 通 过 getattribute () 取 得 同名 特性 的 值 ， 结 果 会 返回 nul1。 
可 是 ， 自 定义 属性 在 下 中 会 被 当 作 元素 的 特性 ， 反 之 亦 然 。 



















在 IE7 及 以 前 版 本 中 ，setaAttzibute() 存 在 一 些 异 常 行为 。 通 过 这 个 方法 设置 
class 和 style 特性 ， 没 有 任何 效果 ， 而 使 用 这 个 方法 设置 事件 处 理 程序 特性 时 也 
一 样 。 尽 管 到 了 IE8 才 解 决 这 些 问 题 ， 但 我 们 还 是 推荐 通过 属性 来 设置 特性 。 





要 介绍 的 最 后 一 个 方法 是 removeAttribute() ， 这 个 方法 用 于 彻底 删除 元 素 的 特性 。 调 用 这 个 方 
法 不 仅 会 清除 特性 的 值 ， 而 且 也 会 从 元 素 中 完全 删除 特性 ， 如 下 所 示 : 


div.removeAttribute("class"); 


这 个 方法 并 不 常用 ,但 在 序列 化 DOM 元 素 时 ， 可 以 通过 它 来 确切 地 指定 要 包含 哪些 特性 。 


BZ IE6 及 以 前 版 本 不 支持 removeAttribute()。 ] 


4. attributes 属性 

Element 类 型 是 使 用 attributes 属性 的 唯一 一 个 DOM 节点 类 型 ,attriputes 属性 中 包含 一 个 
NamedNodeMap， 与 NodeList 类 似 ,也 是 一 个 “动态 ”的 集合 。 元 素 的 每 一 个 特性 都 由 一 个 Attr 节 
点 表示 ， 每 个 节点 都 保存 在 NamedNodeMap 对 象 中 。NamedNodeMap 对 象 拥有 下 列 方法 。 
口 getNamedItem (name): 返回 nodeName 属性 等 于 name 的 节点 ; 
口 removeNamedItem (name) : 从 列表 中 移 除 nodeName 属性 等 于 name 的 节点 ; 
口 setNamedItem (node): 向 列表 中 添加 节点 ， 以 节点 的 nodeName 属性 为 索引 ; 
口 item (pos): 返回 位 于 数字 pos 位 置 处 的 节点 。 

attributes 属性 中 包含 一 系列 节点 , 每 个 节点 的 nodeName 就 是 特性 的 名 称 , 而 节点 的 nodeValue 
就 是 特性 的 值 。 要 取得 元 素 的 ia 特性 ， 可 以 使 用 以 下 代码 。 

var id = element.attributes.getNamedItem("id") .nodeValue; 

以 下 是 使 用 方 括号 语法 通过 特性 名 称 访问 节点 的 简写 方式 。 


var id = element.attributes["id"] .nodqeValue: 


也 可 以 使 用 这 种 语法 来 设置 特性 的 值 ， 即 先 取得 特性 节点 ， 然 后 再 将 其 nodevalue 设置 为 新 值 ， 
如 下 所 示 。 
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element.attributes["id"] .nodeValue = "someOtherId"; 


调用 removeNamedItem() 方 法 与 在 元 素 上 调用 removeAttribute() 方 法 的 效果 相同 一 一 直接 市 
除 具有 给 定名 称 的 特性 。 下 面 的 例子 展示 了 两 个 方法 间 唯 一 的 区 别 ， 即 removeNamedItem() 返 回 表 示 
被 删除 特性 的 Attr 节点 。 


Var oldAttr = element.attributes.removeNamedItem("id"); 


最 后 ，setNamedItem() 是 一 个 很 不 常用 的 方法 , 通过 这 个 方法 可 以 为 元 素 添加 一 个 新 特性 ， 为 此 
需要 为 它 传人 一 个 特性 节点 ， 如 下 所 示 。 

element .attributes.setNamedItem(newAttr); 

一 般 来 说 ， 由 于 前 面 介绍 的 attributes 的 方法 不 够 方便 ， 因 此 开发 人 员 更 多 的 会 使 用 
getAttribute()、removeAttribute() 和 setAttribute() 方 法 。 

不 过 ， 如 果 想 要 遍历 元 素 的 特性 ，attributes 属性 倒是 可 以 派 上 用 场 。 在 需要 将 DOM 结构 序列 
化 为 XML 或 HTML 字符 串 时 ， 多数 都 会 涉及 遍历 元 素 特 性 。 以 下 代码 展示 了 如 何 迭 代 元 素 的 每 一 个 特 
性 ， 然 后 将 它们 构造 成 name="value" name="value" 这 样 的 字符 串 格式 。 

function outputAttributes (element)t{ 

中 Var pairs = new Array(), 
attrName, 
attrValue, 
EE 
len; 



























































for (i=0, len=element.attributes.length; i < len; i++){ 
attrName = element.attributes[i] .nodeName; 
attrValue = element.attributes[i].nodeValue; 
pairs.push(attrName + "=\"" + attrValue + "\""); 

} 


return pairs.join(" "); 
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这 个 函数 使 用 了 一 个 数组 来 保存 名 值 对 ,最 后 再 以 空格 为 分 隔 符 将 它们 拼接 起 来 ( 这 是 序列 化 长 字 
符 串 时 的 一 种 常用 技巧 )。 通 过 attributes .length 属性 ，for 循环 会 遍历 每 个 特性 ， 将 特性 的 名 称 
和 值 输 出 为 字符 串 。 关 于 以 上 代码 的 运行 结果 ， 以 下 是 两 点 必要 的 说 明 。 
口 针对 attributes 对 象 中 的 特性 ， 不 同 浏览 器 返回 的 顺序 不 同 。 这 些 特性 在 XML 或 HIML 代 
码 中 出 现 的 先后 顺序 ， 不 一 定 与 它们 出 现在 attributes 对 象 中 的 顺序 一 致 。 
口 IE7 及 更 早 的 版 本 会 返回 HTML 元 素 中 所 有 可 能 的 特性 ， 包 括 没 有 指定 的 特性 。 换 名 话说 ， 返 
回 100 多 个 特性 的 情况 会 很 常见 。 
针对 IE7 及 更 早 版 本 中 存在 的 问题 ， 可 以 对 上 面 的 函数 加 以 改进 ， 让 它 只 返回 指定 的 特性 。 每 个 特 
性 节点 都 有 一 个 名 为 specified 的 属性 ， 这 个 属性 的 值 如 果 为 true， 则 意味 着 要 么 是 在 HTML 中 指 
定 了 相应 特性 ， 要 么 是 通过 setAttribute() 方 法 设置 了 该 特性 。 在 IE 中 ， 所 有 未 设置 过 的 特性 的 该 
属性 值 都 为 false， 而 在 其 他 浏览 器 中 根本 不 会 为 这 类 特性 生成 对 应 的 特性 节点 〈 因 此, 在 这 些 浏览 
中 ， 任 何 特性 节点 的 specified 值 始终 为 true )。 改进 后 的 代码 如 下 所 示 。 
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function outputAttributes (element){ 

Var pairs = new Array(), 
attrName, 
attrValue, 
i, 
len; 

for (i=0, len=element.attributes.length; i < len; i++){ 
attrName = element.attributes[i].nodeName; 
attrValue = element.attributes[i] .nodeValue; 
if (element .attributes [1i] .specified) { 

pairs.push(attrName + "=\"" + attrValue + "\""); 

} 

} 


return pairs.join(" "); 
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这 个 经 过 改进 的 函数 可 以 确保 即使 在 IE7 及 更 早 的 版 本 中 ， 也 会 只 返回 指定 的 特性 。 

5. 创建 元 素 

使 用 document .createElement () 方 法 可 以 创建 新 元 素 。 这 个 方法 只 接受 一 个 参数 ， 即 要 创建 元 
素 的 标签 名 。 这 个 标签 名 在 HTML 文档 中 不 区 分 大 小 写 ， 而 在 XML (包括 XHTML ) 文档 中 ， 则 是 区 
分 大 小 写 的 。 例 如 ， 使 用 下 面 的 代码 可 以 创建 一 个 <aiv> 元 素 。 

var div = document.createElement ("div"); 

在 使 用 createElement () 方 法 创建 新 元 素 的 同时 ， 也 为 新 元 素 设置 了 ownerDocuemnt 属性 。 此 
时 ， 还 可 以 操作 元 素 的 特性 ， 为 它 添加 更 多 子 节点 ， 以 及 执行 其 他 操作 。 来 看 下 面 的 例子 。 


div.id = "myNewDiv"; 
div.className = "box"; 


在 新 元 素 上 设置 这 些 特性 只 是 给 它们 赋予 了 相应 的 信息 。 由 于 新 元 素 尚 未 被 添加 到 文档 树 中 ,因此 
设置 这 些 特性 不 会 影响 浏览 器 的 显示 。 要 把 新 元 素 添加 到 文档 树 ， 可 以 使 用 appenachild() 、inser- 
tBefore() 或 eplacechilda() 方 法 。 下 面 的 代码 会 把 新 创建 的 元 素 添 加 到 文档 的 <boqy> 元 素 中 。 


document .bodqy.appendqchild(Qiv) : 
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一 旦 将 元 素 添加 到 文档 树 中 ,浏览 器 就 会 立即 呈现 该 元 素 。 此 后 ， 对 这 个 元 素 所 作 的 任何 修改 都 会 
实时 反映 在 浏览 器 中 。 

在 正中 可 以 以 男 一 种 方式 使 用 createElement () ,， 即 为 这 个 方法 传人 完整 的 元 素 标签 , 也 可 以 包 
含 属性 ， 如 下 面 的 例子 所 示 。 

Var div = dqocument .createElement ("<div id=\"myNewDiv\" class=\"box\"></div >"); 

这 种 方式 有 助 于 避 开 在 IE7 及 更 早 版 本 中 动态 创建 元 素 的 某 些 问题 。 下 面 是 已 知 的 一 些 这 类 问题 。 
口 不 能 设置 动态 创建 的 <iframe> 元 素 的 name 特性 。 
口 不 能 通过 表单 的 reset () 方 法 重 设 动态 创建 的 <input> 元 素 (第 13 章 将 讨论 reset () 方 法 )。 
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口 动态 创建 的 type 特性 值 为 "reset" 的 <buttou> 元 素 重 设 不 了 表单 。 

口 动态 创建 的 一 批 name 相同 的 单 选 按钮 彼此 毫 无 关系 。name 值 相同 的 一 组 单 选 按钮 本 来 应 该 用 
于 表示 同一 选项 的 不 同 值 ， 但 动态 创建 的 一 批 这 种 单 选 按钮 之 间 却 没有 这 种 关系 。 

上 述 所 有 问题 都 可 以 通过 在 createElement () 中 指定 完整 的 HIML 标签 来 解决 ,如 下 面 的 例子 所 示 。 





























if (client.browser.ie && client.browser .ie <=7)f{ 


/ /创建 一 个 带 name 特性 的 iframe 元 素 
Var iframe = document.createElement ("<iframe name=\"myframe\"></iframe>"); 





/ /创建 input 元 素 
Var input = document.createElement ("<input type=\"checkbox\">"); 





/ /创建 button 元 素 
Var button = Qocument .createElement ("<button type=\"reset\"></button>"); 


/ /创建 单 选 按 锂 





var radiol = document.createElement ("<input type=\"radio\" name=\"choice\" "十 
nyalussa "1 和 
Var radio2 = document.createElement ("<input type=\"radio\" name=\"choice\" "+ 


) "value=\"2\">"); 

与 使 用 createElement () 的 惯常 方式 一 样 ， 这 样 的 用 法 也 会 返回 一 个 DOM 元 素 的 引用 。 可 以 将 
这 个 引用 添加 到 文档 中 ,也 可 以 对 其 加 以 增强 。 但 是 ， 由 于 这 样 的 用 法 要 求 使 用 浏览 器 检测 ， 因 此 我 们 
建议 只 在 需要 避 开 IE 及 更 早 版 本 中 上 述 某 个 问题 的 情况 下 使 用 。 其 他 浏览 器 都 不 支持 这 种 用 法 。 

6. 元 素 的 子 节 

元 素 可 以 有 任意 数 本 的 子 节点 和 后 代 节 点 ， 因 为 元 素 可 以 是 其 他 元 素 的 子 节点 。 元 素 的 
childNodes 属性 中 包含 了 它 的 所 有 子 节 点 ， 这 些 子 节点 有 可 能 是 元 素 、 文 本 节点 、 注 释 或 处 理 指令 。 
不 同 浏览 器 在 看 竺 这些 节 一 面 存在 显著 的 不 同 ， 以 下 面 的 代码 为 例 。 


NE 
<l1i>Item 1</1i> 
<l1i>Item 2</1i> 
<li>Item 3</1i> 

</ul> 


如 果 是 下 来 解析 这 些 代 码 ， 那么 <ul> 元 素 会 有 3 个 子 节 点 ,分别 是 3 个 <1i> 元 素 。 但 如 果 是 在 其 
他 浏览 器 中 ，<ul> 元 素 都 会 有 7 个 元 素 ， 包括 3 个 <1i> 元 素 和 4 个 文本 节点 (表示 <1i> 元 素 之 间 的 空 
白 符 )。 如 果 像 下 面 这 样 将 元 素 间 的 空白 符 删 除 ， 那 么 所 有 浏览 器 都 会 返回 相同 数目 的 子 节 点 

<ul id="myList"><1li>Item 1</1i><1li>Item 2</11><11i>Item 3</1i></ul> 

对 于 这 段 代 码 ，<ul> 元 素 在 任何 浏览 器 中 都 会 包含 b 个 子 节点 。 如 果 需 要 通过 chilaNodes 属 
遍历 子 节 点 ,那么 一 定 不 要 忘记 浏览 器 间 的 这 一 差别 。 这 意 意味 着 在 执 1 了 某 项 操作 以 前 ,通常 都 要 先 
一 下 nodeTpye 属性 ， 如 下 面 的 例子 所 示 。 

for (var i=0, len=element.childNodes.length; i < len; i++){ 


if (element.childNodes[i] .nodeType == 1){ 
/ /执行 菜 些 操作 
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这 个 例子 会 循环 遍历 特定 元 素 的 每 一 个 子 节点 ,然后 只 在 子 节点 的 nodeType 等 于 1 ( 表示 是 元 素 
节点 ) 的 情况 下 ， 才 会 执行 某 些 操作 。 
如 果 想 通过 某 个 特定 的 标签 名 取得 子 节点 或 后 代 节 点 该 怎么 办 呢 ? 实际 上 ， 元 素 也 支持 


get 


Elements 





ByTagName ( 








) 方 法 。 在 通过 元 素 调用 这 个 方法 时 ， 除 了 搜索 起 点 是 当前 元 素 之 外 ， 其 他 
方面 都 跟 通 过 aocument 调用 这 个 方法 相同 ,因此 结果 只 会 返回 当前 元 素 的 后 代 。 例 如 ， 要 想 取得 前 画 
























































<ul> 元 素 中 包含 的 所 有 <1i> 元 素 ， 可 以 使 用 下 列 代码 。 


Var ul = document.getElementById("myList"); 
Var items = ul.getElementsByTagName ("1i"); 


要 注意 的 是 ， 这 里 <ul> 的 后 代 中 只 包含 直接 子 元 素 。 不 过 ， 如 果 它 包含 更 多 层次 的 后 代 元 素 ， 那 
么 各 个 层次 中 包含 的 <1i> 元 素 也 都 会 返回 。 


10.1.4 Text 类 型 
文本 节点 由 Text 类 型 表示 ,包含 的 是 可 以 照 字 面 解释 的 纯 文本 内 容 。 纯 文本 中 可 以 包含 转 义 后 的 


HTML 字符 ， 但 不 能 包含 HTML 代码 。Text 节点 具有 以 下 特征 : 
口 nodeType 的 值 为 3; 
口 nodeName 的 值 为 "#text"; 

口 nodevalue 的 值 为 节点 所 包含 的 文本 ; 





口 parentNode 是 一 


口 不 支持 (没有 ) 子 节点 。 
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Element; 





可 以 通过 nodqevalue 属性 或 aata 属性 访问 Text 节点 中 包含 的 文本 ， 这 两 个 属性 中 包含 的 值 相 
同 。 对 nodqevalue 的 修改 也 会 通过 data 反映 出 来 , 反之 亦 然 。 使 用 下 列 方法 可 以 操作 节点 中 的 文本 。 





D insert 


D appendData (text): 
口 deletel 





处 的 字符 串 。 


除了 这 些 方法 之 外 ,文本 节点 还 有 一 个 length 属性 ， 保 存 着 节点 中 字符 的 数目 。 而 且 




















将 text 添加 到 节点 的 末尾 。 


Data(offset，count): 从 offset 指定 的 位 置 开始 删除 count 个 字符 。 

Data (offset，text): 在 offset 指定 的 位 置 插入 text。 

口 replaceData(offset, count，text): 用 text 替换 从 offset 指定 的 位 置 开始 到 offset+ 
count 为 止 处 的 文本 。 
口 splitText (offset) 
口 substringData(offset，count): 提取 从 offset 指定 的 位 置 开始 到 offset+count 为 止 














: 从 offset 指定 的 位 置 将 当前 文本 节点 分 成 两 个 文本 节点 。 














nodeValue.length 和 data.1length 中 也 保存 着 同样 的 值 。 

在 默认 情况 下 ， 每 个 可 以 包含 内 容 的 元 素 最 多 只 能 有 一 个 文本 节点 ， 而 且 必 须 确实 有 内 容 存在 。 来 
看 几 个 例子 。 
<!-- 没有 内 容 ， 也 就 没有 文本 节点 --> 


<div></div> 





<!-- 有 空格 ， 因 而 有 一 个 文本 节点 --> 


<div> </div> 


<!-- 有 内 容 ， 因 而 有 一 个 文本 节点 --> 
<div>Hello World!</div> 
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上 面 代 码 给 出 的 第 一 个 <aiv> 元 素 没有 内 容 ， 因 此 也 就 不 存在 文本 节点 。 开 始 与 结束 标签 之 间 只 要 
存在 内 容 ， 就 会 创建 一 个 文本 节点 。 因 此 ， 第 二 个 <div> 元 素 中 虽然 只 包含 一 个 空格 ， 但 仍然 有 一 个 文 
本 子 节点 ; 文本 节点 的 nodeValue 值 是 一 个 空格 。 第 三 个 <aQiv> 也 有 一 个 文本 节点 ,其 nodevalue 的 
值 为 "Hello World!"。 可 以 使 用 以 下 代码 来 访问 这 些 文本 子 节 点 。 

var textNode = div.firstChild; // 或 者 div.childNodes[0] 


在 取得 了 文本 节点 的 引用 后 ， 就 可 以 像 下 面 这 样 来 修改 它 了 。 


二 div.firstChild.nodeValue = "Some other message"; 





TextNodeExample01.htm 








如 果 这 个 文本 节点 当前 存在 于 文档 树 中 ,那么 修改 文本 节点 的 结果 就 会 立即 得 到 反映 。 男 外 ,在 修 
改 文本 市 点 时 还 要 注意 ， 此 时 的 字符 串 会 经 过 HTML (或 XML， 取 决 于 文档 类 型 ) 编码 。 换 句 话 说 ， 
小 于 号 、 大 于 号 或 引号 都 会 像 下面 的 例子 一 样 被 转 义 。 


// 输 出 结果 是 "Some &lt;strong&gt;other&lt;/strong&gt; message" 
div.firstChild.nodeValue = "Some <strong>other</strong> message"; 


TextNodeExample02.htm 








应 该 说 ， 这 是 在 向 DOM 文档 中 搬入 文本 之 前 ， 先 对 其 进行 HTML 编码 的 一 种 有 效 方式 。 


在 IE8、Firefox、Safari、Chrome 和 Opera 中 ， 可 以 通过 脚本 访问 Text 类 型 的 构造 





1. 创建 文本 节点 

可 以 使 用 aocument .createTextNode() 创 建新 文本 节点 ， 这 个 方法 接受 一 个 参数 一 一 要 插入 节点 
中 的 文本 。 与 设置 已 有 文本 节点 的 值 一 样 ， 作 为 参数 的 文本 也 将 按照 HTML 或 XML 的 格式 进行 编码 。 

Var textNode = document .createTextNode("<strong>Hello</strong> world!"); 

在 创建 新 文本 节点 的 同时 ， 也 会 为 其 设置 ownerDocument 属性 。 不 过 ， 除 非 把 新 节点 添加 到 文档 
树 中 已 经 存在 的 节点 中 ， 否 则 我 们 不 会 在 浏览 器 窗口 中 看 到 新 节点 。 下 面 的 代码 会 创建 一 个 <div> 元 素 
并 向 其 中 添加 一 条 消息 。 


Var element = document.createElement ("div"); 
element.className = "message"; 












































var textNode = document.createTextNode("Hello world!"); 
element .appendChild (textNode); 


document .body.appendChild(element); 
TextNodeExample03.htm 


这 个 例子 创建 了 一 个 新 <aiv> 元 素 并 为 它 指定 了 值 为 "message" 的 class 特性 。 然 后 ， 又 创建 了 
一 个 文本 节点 ， 并 将 其 添加 到 前 面 创建 的 元 素 中 。 最 后 一 步 ， 就 是 将 这 个 元 素 添 加 到 了 文档 的 <body> 
元 素 中 ， 这 样 就 可 以 在 浏览 器 中 看 到 新 创建 的 元 素 和 文本 节点 了 。 
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一 般 情况 下 ， 每 个 元 素 只 有 一 个 文本 子 节点 。 不 过 ,在 某 些 情况 下 也 可 能 包含 多 个 文本 子 节点 ， 如 
下 面 的 例子 所 示 。 





Var element = document.createElement ("div"); 
element.className = "message"; 


var textNode = document.createTextNode ("Hello world!"); 
element .appendChild(textNode); 


var anotherTextNode = document .createTextNode ("Yippee!"); 
element .appendChild(anotherTextNode); 


document .body.appendChild(element); 


TextNodeExample04.htm 


如 果 两 个 文本 节点 是 相 邻 的 同胞 节点 ， 那 么 这 两 个 节点 中 的 文本 就 会 连 起 来 显示 ， 中 间 不 会 有 空格 。 

2. 规范 化 文本 节点 

DOM 文档 中 存在 相 邻 的 同胞 文本 节点 很 容易 导致 混乱 , 因为 分 不 清 哪个 文本 节点 表示 哪个 字符 串 。 
另外 ，DOM 文档 中 出 现 相 邻 文本 节点 的 情况 也 不 在 少数 ， 于 是 就 催生 了 一 个 能 够 将 相 邻 文本 节点 合 3 
的 方法 。 这 个 方法 是 由 Node 类 型 定义 的 ( 因而 在 所 有 节点 类 型 中 都 存在 )， 名 叫 normalize () 。 如 果 
在 一 个 包含 两 个 或 多 个 文本 节点 的 父 元 素 上 调用 normalize() 方 法 ， 则 会 将 所 有 文本 节点 合并 成 一 个 
节点 ， 结 果 节 点 的 nodeValue 等 于 将 合并 前 每 个 文本 节点 的 nodevalue 值 拼接 起 来 的 值 。 来 看 一 个 
例子 。 


Var element = document.createElement ("div"); 
element .className = "message"; 




















var textNode = document.createTextNode ("Hello world!"); 
element .appendChild(textNode); 


Var anotherTextNode = document.createTextNode ("Yippee!"); 
element .appendChild(anotherTextNode); 


document .body.appendChild (element); 
alert (element .childNodes.length); //2 
element .normalize(); 


alert (element .childNodes .length); //1 
alert (element .firstChild.nodeVvalue); // "Hello world!Yippee!" 


TextNodeExample05.htm 
浏览 器 在 解析 文档 时 永远 不 会 创建 相 邻 的 文本 节点 。 这 种 情况 只 会 作为 执行 DOM 操作 的 结果 出 现 。 





在 某 些 情况 下 ， 执 行 normalize() 方 法 会 导致 IE6 前 溃 。 不 过 ， 在 IE6 后 来 的 


补丁 中 ,可 能 已 经 修复 了 这 个 问题 ( 未 经 证 实 ) 。IE7 及 更 高 版 本 中 不 存在 这 个 问题 。 
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3. 分 割 文本 节点 

Text 类 型 提供 了 一 个 作用 与 normalize() 相 反 的 方法 : splitText () 。 这 个 方法 会 将 一 个 文本 节 
点 分 成 两 个 文本 节点 ， 即 按照 指定 的 位 置 分 割 nodqevalue 值 。 原 来 的 文本 节点 将 包含 从 开始 到 指定 位 
置 之 前 的 内 容 ， 新 文本 节点 将 包含 剩 下 的 文本 。 这 个 方法 会 返回 一 个 新 文本 节点 ， 该 节点 与 原 节 点 的 
parentNode 相同 。 来 看 下 面 的 例子 。 

















Var element = qocument .createElement ("div"); 
element.className = "message"; 


var textNode = document.createTextNode ("Hello world!"); 
element .appendChild (textNode); 


document .body.appendChild(element); 


var newNode = element .firstChild.splitText (5); 


alert (element .firstChild.nodeVvalue); //"Hello" 
alert (newNode .nodeValue) ; //" world!" 
alert (element .childNodes.length); //2 


TextNodeExample06.htm 


在 这 个 例子 中 ,包含 "Hello worlda! "的 文本 节点 被 分 割 为 两 个 文本 节点 ， 从 位 置 5 开始 。 位 置 5 
是 "Hello" 和 "world!" 之 间 的 空格 ,因此 原来 的 文本 市 点 将 包含 字符 串 "Hel1lo" ， 而 新 文本 节点 将 包 
含 文 本 "world!" (包含 空格 )。 

分 割 文本 节点 是 从 文本 节点 中 提取 数据 的 一 种 常用 DOM 解析 技术 。 











10.1.5 Comment 类 型 


注释 在 DOM 中 是 通过 comment 类 型 来 表示 的 。comment 节点 具有 下 列 特征 : 
D nodeType 的 值 为 8; 
口 nodeName 的 值 为 "#comment"; 
口 nodevalue 的 值 是 注释 的 内 容 ; 
口 barentNode 可 能 是 Document 或 Element; 
口 不 支持 (没有) 子 节点 。 
Comment 类 型 与 Text 类 型 继承 自 相同 的 基 类 ， 因 此 它 拥有 除 splitText () 之 外 的 所 有 字符 串 操 0 
作 方 法 。 与 Text 类 型 相似 ， 也 可 以 通过 nodqevalue 或 data 属性 来 取得 注释 的 内 容 。 
注释 节点 可 以 通过 其 父 节 点 来 访问 ， 以 下 面 的 代码 为 例 。 


<div id="myDiv"><!--A comment --></div> 


在 此 ， 注 释 节 点 是 <daiv> 元 素 的 一 个 子 节 点 ， 因 此 可 以 通过 下 面 的 代码 来 访问 它 。 






























































var div = document.getElementById("myDiv"); 
Var comment = div.firstChild; 
alert (comment .data); //"A comment" 





CommentNodeExample01.htm 
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另外 , 使 用 document .createComment () 并 为 其 传递 注释 文本 也 可 以 创建 注释 节点 ， 如 下 面 的 例 
子 所 示 。 











var Comment = document.createComment ("A comment "); 

显然 ， 开发 人 员 很 少 会 创建 和 访问 注释 节点 ， 因 为 注释 节点 对 算法 鲜 有 影响 。 此 外 ,浏览 器 也 不 会 
识别 位 于 </html> 标 签 后 面 的 注释 。 如 果 要 访问 注释 节点 ， 一定 要 保证 它们 是 <ntml> 元 素 的 后 代 ( 即 
位 于 <html> 和 </html> 之 间 )。 



































在 Firefox、Safari、Chrome 和 Opera 中 ， 可 以 访问 Comment 类 型 的 构造 函数 和 
原型 。 在 IE8 中 ， 注 释 节 点 被 视 作 标签 名 为 "1!" 的 元 素 。 也 就 是 说 ， 使 用 
getElementsByTagName () 可 以 取得 注释 节点 。 尽 管 IE9 没有 把 注释 当成 元 素 ， 但 
它 仍 然 通过 一 个 名 为 HTMLCommentElement 的 构造 函数 来 表示 注释 。 







10.1.6 ”cDATASection 类 型 





CDATASection 类 型 只 针对 基于 XML 的 文档 ,表示 的 是 CDATA 区 域 。 与 Comment 类 似 ， 
CDATASection 类 型 继承 自 Text 类 型 ， 因 此 拥有 除 splitText() 之 外 的 所 有 字符 串 操作 方法 。 
CDATASection 节点 具有 下 列 特征 : 

D nodeType 的 值 为 4; 

口 nodeName 的 值 为 "#cdata-section"; 

口 nodeValue 的 值 是 CDATA 区 域 中 的 内 容 ; 

口 parentNode 可 能 是 Document 或 Element; 
口 不 支持 (没有 ) 子 节点 。 

CDATA 区 域 只 会 出 现在 XML 文档 中 , 因此 多 数 浏览 器 都 会 把 CDAIA 区 域 错误 地 解析 为 Comment 
或 Element。 以 下 面 的 代码 为 例 : 

<div id="myDiv"><![CDATA[This is some content.]]></div> 

这 个 例子 中 的 <aiv> 元 素 应 该 包含 一 个 CDATASection 节点 。 可 是 , 四 大 主流 浏览 器 无 一 能 够 这 样 
解析 它 。 即 使 对 于 有 效 的 XHTML 页 面 ， 浏 览 带 也 没有 正确 地 支持 敬 入 的 CDATA 区 域 。 


在 真正 的 XML 文档 中 , 可 以 使 用 document .createcDataSection() 来 创建 CDATA 区 域 , 只 需 
为 其 传人 节点 的 内 容 即 可 。 





















































在 Firefox、Safari、Chrome 和 Opera 中 ， 可 以 访问 CDATASection 类 型 的 构造 函 





数 和 原型 。IE9 及 之 前 版 本 不 支持 这 个 类 型 。 





10.1.7 DocumentType 类 型 


DocumentType 类 型 在 Web 浏览 器 中 并 不 常用 , 仅 有 Firefox、Safari 和 Opera 支持 它 "。Dpocument- 





GD Chrome 4.0 也 支持 DocumentType 类 型 。 
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Type 包含 着 与 文档 的 doctype 有 关 的 所 有 信息 ， 它 具有 下 列 特 征 : 
口 nodeType 的 值 为 10; 
口 nodeName 的 值 为 doctype 的 名 称 ; 
口 nodeValue 的 值 为 null; 
口 parentNode 是 Document; 
口 不 支持 (没有 ) 子 节 点 。 

在 DOMI1 级 中 ，DocumentType 对 象 不 能 动态 创建 ， 而 只 能 通过 解析 文档 代码 的 方式 来 创建 。 支 
持 它 的 浏览 器 会 把 DocumentType 对 象 保存 在 document.doctype 中 。DOMI 级 描述 了 
DocumentType 对 象 的 3 个 属性 : name、entities 和 notations。 其 中 , name 表示 文档 类 型 的 名 称 ; 
entities 是 由 文档 类 型 描述 的 实体 的 NamedNodeMap 对 象 ; notations 是 由 文档 类 型 描述 的 符号 的 
NamedNodeMap 对 象 。 通常 , 浏览 器 中 的 文档 使 用 的 都 是 HTML 或 XHTML 文档 类 型 ,因而 entities 
和 notations 都 是 空 列表 (列表 中 的 项 来 自行 内 文档 类 型 声明 )。 但 不 管 怎样 ， 只 有 name 属性 是 有 用 
的 。 这 个 属性 中 保存 的 是 文档 类 型 的 名 称 , 也 就 是 出 现在 <!DOCTYPE 之 后 的 文本 。 以 下 面 严格 型 HTML 
4.01 的 文档 类 型 声明 为 例 : 


























芝 












































<!DOCTYPE HTML PUBLIC "-//W3C//DTD HIML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 








DocumentType 的 name 属性 中 保存 的 就 是 "HTML": 


alert (document .doctype.name); A PME 


IE 及 更 早 版 本 不 支持 DocumentType， 因 此 document .doctype 的 值 始终 都 等 于 nul1。 可 是 ， 
这 些 浏览 右 会 把 文档 类 型 声明 错误 地 解释 为 注释 ， 并 且 为 它 创建 一 个 注释 节点 。IE9 会 给 
document .doctype 赋 正 确 的 对 象 ， 但 仍然 不 支持 访问 DocumentType 类 型 。 





10.1.8 ” DocumentFragment 类 型 


在 所 有 节点 类 型 中 ， 只 有 DocumentFragment 在 文档 中 没有 对 应 的 标记 。DOM 规定 文档 片段 
( document fragment ) 是 一 种 “ 轻 量 级 ”的 文档 ， 可 以 包含 和 控制 节点 ,但 不 会 像 完 整 的 文档 那样 占用 
额外 的 资源 。DocumentFragment 节点 具有 下 列 特 征 : 
口 nodeType 的 值 为 11; 
口 nodeName 的 值 为 "#document-fragment"; 
口 nodeValue 的 值 为 null; 
口 parentNode 的 值 为 nul1; 
口子 节点 可 以 是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 
































EntityReferenceo 

虽然 不 能 把 文档 片段 直接 添加 到 文档 中 , 但 可 以 将 它 作为 一 个 “仓库 ”来 使 用 ， 即 可 以 在 里 面 保存 将 
来 可 能 会 添加 到 文档 中 的 节点 。 要 创建 文档 片段 ， 可 以 使 用 document .createDocumentFragment () 方 
法 ， 如 下 所 示 : 


Var fragment = document.createDocumentFragment () ; 
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文档 片段 继承 了 Node 的 所 有 方法 ， 通 常用 于 执行 那些 针对 文档 的 DOM 操作 。 如 果 将 文档 中 的 节 
点 添加 到 文档 片段 中 ， 就 会 从 文档 树 中 移 除 该 节点 ， 也 不 会 从 浏览 锅 中 再 看 到 该 节点 。 添 加 到 文档 片段 
中 的 新 节点 同样 也 不 属于 文档 树 。 可 以 通过 appendchild() 或 insertBefore () 将 文档 片段 中 内 容 添 
加 到 文档 中 。 在 将 文档 片段 作为 参数 传递 给 这 两 个 方法 时 ,实际 上 只 会 将 文档 片段 的 所 有 子 节 点 添加 到 
相应 位 置 上 ; 文档 片段 本 身 永远 不 会 成 为 文档 树 的 一 部 分 。 来 看 下 面 的 HTML 示例 代码 : 


























<ul id="myList"></ul> 

假设 我 们 想 为 这 个 <ul> 元 素 添加 3 个 列表 项 。 如 果 逐 个 地 添加 列表 项 ,将 会 导致 浏览 器 反复 泻 染 ( 呈 
现 ) 新 信息 。 为 避免 这 个 问题 ， 可 以 像 下 面 这 样 使 用 一 个 文档 片段 来 保存 创建 的 列表 项 ， 然 后 再 一 次 性 
将 它们 添加 到 文档 中 。 

Var fragment = document.createDocumentFragment () ; 


var ul = document.getElementById("myList"); 
Yat 1 mL; 











for (var i=0; i < 3; i++){ 
11 = document.createElement ("1i"); 
li.appendChild(document.createTextNode("Item " + (i+1))); 
fragment.appendChild(1i); 


ul.appendChild (fragment); 


DocumentFragmentExample01.htm 


在 这 个 例子 中 ， 我 们 先 创 建 一 个 文档 片段 并 取得 了 对 <ul> 元 素 的 引用 。 然 后 ， 通 过 for 循环 创建 
3 个 列表 项 ， 并 通过 文本 表示 它们 的 顺序 。 为 此 ,需要 分 别 创建 <1i> 元 素 、 创 建文 本 节点 ,再 把 文本 节 
点 添加 到 <1i> 元 素 。 接 着 使 用 appenachild() 将 <1i> 元 素 添 加 到 文档 片段 中 。 循 环 结束 后 ， 再 调用 
appendCchila() 并 传人 文档 片段 ， 将 所 有 列表 项 添加 到 <ul1> 元 素 中 。 此 时 ， 文 档 片段 的 所 有 子 节 点 都 
被 删除 并 转移 到 了 <ul> 元 素 中 。 
































10.1.9 Attr 类 型 


元 素 的 特性 在 DOM 中 以 Attr 类 型 来 表示 。 在 所 有 浏览 器 中 (包括 正 8 )， 都 可 以 访问 Attr 类 型 
的 构造 函数 和 原型 。 从 技术 角度 讲 , 特性 就 是 存在 于 元 素 的 attripbutes 属性 中 的 节点 。 特 性 节点 具有 
下 列 特征 : 
口 nodeType 的 值 为 2; 
口 nodeName 的 值 是 特性 的 名 称 ; 
口 nodeVvalue 的 值 是 特性 的 值 ; 
口 parentNode 的 值 为 nul1; 
口 在 HTML 中 不 支持 (没有) 子 节 点 ; 
口 在 XML 中 子 节 点 可 以 是 Text 或 EntityReference。 

尽管 它们 也 是 节点 , 但 特性 却 不 被 认为 是 DOM 文档 树 的 一 部 分 。 开 发 人 员 最 常 使 用 的 是 getAt- 
tribute()、setAttribute() 和 remveAttripute() 方 法 ,很 少 直接 引用 特性 节点 。 
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Attr 对 象 有 3 个 属性 : name、value 和 specified。 其 中 ，name 是 特性 名 称 (与 nodeName 的 
值 相同 )，value 是 特性 的 值 (与 nodevalue 的 值 相同 )， 而 specified 是 一 个 布尔 值 ， 用 以 区 别 特 
性 是 在 代码 中 指定 的 ， 还 是 默认 的 。 

使 用 aocument .createAttripbute() 并 传人 特性 的 名 称 可 以 创建 新 的 特性 节点 。 例 如 ， 要 为 元 素 
添加 align 特性 ， 可 以 使 用 下 列 代码 : 


Var attr = document.createAttribute("align"); 











attr.value = "left"; 

element.setAttributeNode (attr); 

alert (element.attributes["align"] .value); //"left" 
alert (element .getAttributeNode("align") .value); //"left" 
alert (element.getAttribute("align")); //"left" 


AttrExample01.htm 


这 个 例子 创建 了 一 个 新 的 特性 节点 。 由 于 在 调用 createAttribute() 时 已 经 为 name 属性 赋 了 值 ， 
所 以 后 面 就 不 必 给 它 赋值 了 。 之 后 ， 又 把 value 属性 的 值 设置 为 "Left"。 为 了 将 新 创建 的 特性 添加 到 
元 素 中 ， 必 须 使 用 元 素 的 setAttributeNode() 方 法 。 添 加 特性 之 后 ， 可 以 通过 下 列 任 何方 式 访问 该 
特性 : attributes 属性 、getAttributeNode() 方 法 以 及 getAttribute() 方 法 。 其中, attributes 
和 getAttributeNogde() 都 会 返回 对 应 特性 的 Attr 节点 ， 而 getAttribute() 则 只 返回 特性 的 值 。 























我 们 并 不 建议 直接 访问 特性 节点 ,实际 上 ,使 用 getAttribute()、setAttribute() 


和 removeAttribute() 方 法 远 比 操作 特性 节点 更 为 方便 。 





10.2 ”DOM 操作 技术 


很 多 时 候 ，DOM 操作 都 比较 简明 ， 因 此 用 JavaScript 生成 那些 通常 原本 是 用 HTML 代码 生成 的 内 
容 并 不 麻烦 。 不 过 ， 也 有 一 些 时 候 ， 操 作 DOM 并 不 像 表面 上 看 起 来 那么 简单 。 由 于 浏览 器 中 充斥 着 隐 
藏 的 陷阱 和 不 兼容 问题 ， 用 JavaScript 代码 处 理 DOM 的 某 些 部 分 要 比 处 理 其 他 部 分 更 复杂 一 些 。 


10.2.1 动态 脚本 


使 用 <script> 元 素 可 以 向 页 面 中 插入 JavaScript 代码 , 一 种 方式 是 通过 其 src 特性 包含 外 部 文件 ， 
另 一 种 方式 就 是 用 这 个 元 素 本 身 来 包含 代码 。 而 这 一 节 要 讨论 的 动态 脚本 , 指 的 是 在 页 面 加 载 时 不 存在 ， 
但 将 来 的 某 一 时 刻 通过 修改 DOM 动态 添加 的 脚本 。 跟 操作 HTML 元素 一 样 , 创建 动态 脚本 也 有 两 种 方 
式 : 插入 外 部 文件 和 直接 插入 JavaScript 代码 。 

动态 加 载 的 外 部 JavaScript 文件 能 够 立即 运行 ， 比 如 下 面 的 <script> 元 素 : 


















































<script type="text/javascript" src="client.js"></script> 
这 个 <script> 元 素 包 含 了 第 9 章 的 客户 端 检 测 脚 本 。 而 创建 这 个 节点 的 DOM 代码 如 下 所 示 : 


Var Script = document.createElement ("script"); 
script.type = "text/javascript"; 
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Serigt .Sre. = "elient, je 
document .body.appendChild(script); 


显然 ， 这 里 的 DOM 代码 如 实 反映 了 相应 的 HTML 代码 。 不 过 ， 在 执行 最 后 一 行 代码 把 <script> 
元 素 添加 到 页 面 中 之 前 ， 是 不 会 下 载 外 部 文件 的 。 也 可 以 把 这 个 元 素 添加 到 <head> 元 素 中 ,效果 相同 。 
整个 过 程 可 以 使 用 下 面 的 函数 来 封装 : 


function loadScript (url)f{ 
Var Script = document.createElement ("script"); 
script.type = "text/javascript"; 
eh 
document .body.appendChild(script); 


























} 
然后 ， 就 可 以 通过 调用 这 个 函数 来 加 载 外 部 的 JavaScript 文件 了 : 




















loadScript ("client.js"); 


加 载 完 成 后 ， 就 可 以 在 页 面 中 的 其 他 地 方 使 用 这 个 脚本 了 。 问题 只 有 一 个 : 怎么 知道 脚本 加 载 完 成 
呢 ? 遗憾 的 是 ,并 没有 什么 标准 方式 来 探知 这 一 点 。 不 过 ,与 此 相关 的 一 些 事件 倒是 可 以 派 上 用 场 ,但 
要 取决 于 所 用 的 浏览 器 ， 详 细 讨 论 请 见 第 13 章 。 

另 一 种 指定 JavaScript 代码 的 方式 是 行内 方式 ， 如 下 面 的 例子 所 示 : 

<script type="text/javascript"> 


function sayHi()t{ 
alert ("hi"); 





























} 
</SCriot> 
从 逻辑 上 讲 ， 下 面 的 DOM 代码 是 有 效 的 : 
Var script = document.createElement ("script"); 
script.type = "text/javascript"; 


script.appendChild(document.createTextNode ("function sayHi(){alert('hi');}")); 
document .body.appendChild(script); 


在 Firefox、Safari、Chrome 和 Opera 中 , 这 些 DOM 代码 可 以 正常 运行 。 但 在 正中, 则 会 导致 错误 。 
IE 将 <script> 视 为 一 个 特殊 的 元 素 ， 不 允许 DOM 访问 其 子 节点 。 不 过 ， 可 以 使 用 <script> 元 素 的 
text 属性 来 指定 JavaScript 代码 ， 像 下 面 的 例子 这 样 : 
































Var Script = document.createElement ("script"); 
script.type = "text/javascript"; 

script.text = "function sayHi(){alert('hi');}"; 
document .body.appendChild(script); 


DynamicScriptExample01.htm 


经 过 这 样 修改 之 后 的 代码 可 以 在 玉 、Firefox、Opera 和 Safari 3 及 之 后 版 本 中 运行 。Safari 3.0 之 前 
的 版 本 虽然 不 能 正确 地 支持 text 属性 ， 但 却 允 许 使 用 文本 节点 技术 来 指定 代码 。 如 果 需 要 兼容 早期 版 
本 的 Safari?， 可 以 使 用 下 列 代 码 : 
Var Script = document.createElement ("script"); 


script.type = "text/javascript"; 
var code = "function sayHi(){alert('hi');}"; 
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try { 
script.appendChild(document .createTextNode ("code" ) ) 
} catch (ex){ 
script.text = "code"; 
} 
document .body.appendChild(script); 


这 里 ， 首 先 尝试 标准 的 DOM 文本 节点 方法 ， 因 为 除了 下 (在 正中 会 导致 抛 出 错误 )， 所 有 浏览 
都 支持 这 种 方式 。 如 果 这 行 代码 抛 出 了 错误 ,那么 说 明 是 三 ,于 是 就 必须 使 用 text 属性 了 。 整 个 过 程 
可 以 用 以 下 函数 来 表示 : 

















function loadSscriptSstring(code)f{ 
中 Var Script = document.createElement ("script"); 
script.type = "text/javascript"; 
ty 蔗 


script.appendChild(document .createTextNode (code)); 
} catch (ex){ 
script.text = code; 
} 
document .body.appendChild(script); 
} 


下 面 是 调用 这 个 函数 的 示例 : 


loadScriptString("function sayHi(){alert('hi');}"); 


DynamicScriptExample02.htm 


以 这 种 方式 加 载 的 代码 会 在 全 局 作用 域 中 执行 ， 而且 当 脚本 执行 后 将 立即 可 用 。 实 际 上 ， 这样 执行 
代码 与 在 全 局 作用 域 中 把 相同 的 字符 囊 传递 给 eval () 是 一 样 的 。 


10.2.2 ”动态 样式 


能 够 把 CSS 样式 包含 到 HTML 页 面 中 的 元 素 有 两 个 。 其 中 , <1ink> 元 素 用 于 包含 来 自 外 部 的 文件 ， 
而 <style> 元 素 用 于 指定 戏 人 的 样式 。 与 动态 脚本 类 似 ,， 所谓 动态 样式 是 指 在 页 面 刚 加 载 时 不 存在 的 样 
式 ; 动态 样式 是 在 页 面 加 载 完成 后 动态 添加 到 页 面 中 的 。 

我 们 以 下 面 这 个 典型 的 <1ink> 元 素 为 例 : 


<link rel="stylesheet" type="text/css" href="styles.css"> 


使 用 DOM 代码 可 以 很 容易 地 动态 创建 出 这 个 元 素 : 












































var link = document.createElement ("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = "style.css"; 





Var head = document .getElementsByTagName ("head") [0]; 
head.appendChild(link); 


以 上 代码 在 所 有 主流 浏览 器 中 都 可 以 正常 运行 。 需 要 注意 的 是 ， 必 须 将 <1ink> 元 素 添 加 到 <head> 
而 不 是 <boqy> 元 素 ， 才 能 保证 在 所 有 浏览 器 中 的 行为 一 致 。 整 个 过 程 可 以 用 以 下 函数 来 表示 : 


function loadStyles (ur1) 1{ 
var link = document.createElement ("link"); 
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link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = url; 





Var head = document .getElementsByTagName ("head") [0]; 
head.appendChild(link); 
} 


调用 loagdstyles () 函数 的 代码 如 下 所 示 : 


loadSstyles ("styles.css"); 


加 载 外 部 样式 文件 的 过 程 是 异步 的 , 也 就 是 加 载 样式 与 执行 JavaScript ee 固定 的 次 序 
一 般 来 说 , 知 不 知道 样式 已 经 加 载 完 成 并 不 重要 ; 不 过 ,也 存在 几 种 利用 事件 来 检测 这 个 过 程 是 否 完成 
的 技术 ， 这 些 技术 将 在 第 13 章 讨论 。 
另 一 种 定义 样式 的 方式 是 使 用 <style> 元 素来 包含 伐 人 式 CSS， 如 下 所 示 : 
<style type="text/css"> 


body { 
background-color: red; 


























} 














</style> 

按照 相同 的 逻辑 ， 下 列 DOM 代码 应 该 是 有 效 的 : 

Var style = document.createElement ("style"); 
电 style.type = "text/css"; 





style.appendChild(document .createTextNode ("body{background-color:red}")); 
Var head = document .getElementsByTagName ("head") [0]; 
head.appendChild(style); 





DynamicStyleExample01.htm 














以 上 代码 可 以 在 Firefox 、Safari 、Chrome 和 中 运行 ， 在 下 中 则 会 报错 。IE 将 <style> 视 为 
一 个 特殊 的 、 与 <script> 类 似 的 节点 ,不 允许 访问 其 子 节 点 。 事 实 上 ,IE 此 时 抛 出 的 错误 与 向 <script> 
元 素 添加 子 节点 时 抛 出 的 错误 相同 。 解 决 下 就 是 访问 元 素 的 styleSheet 属 
该 属性 又 有 一 个 cssText 属性 ， 可 以 接受 CSS 代码 (第 13 章 将 进一步 讨论 这 两 个 属性 )， 如 下 面 的 例 
子 所 示 。 


寺 





























本 











Var style = document.createElement ("style"); 
style.type = "text/css"; 
tryt{ 
style.appendChild(document.createTextNode ("body{background-color:red}")); 
} catch (ex){ 
style.styleSheet .cssText = "body{background-color:red}"; 





} 

Var head = document .getElementsByTagName ("head") [0]; 

head.appendChild(style); 

与 动态 添加 艇 入 式 脚 本 类 似 , 重 写 后 的 代码 使 用 了 try-catch 语句 来 捕获 下 抛 出 的 错误 , 然后 再 
使 用 针对 正 的 特殊 方式 来 设置 样式 。 因 此 ， 通 用 的 解决 方案 如 下 。 


function loadStyleSstring(css)t{ 
量 ) Var style = document.createElement ("style"); 





| 
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style.type = "text/css"; 
tryt{ 

style.appendChild(document .createTextNode (css)); 
} catch (ex){ 

style.styleSheet.cssText = css; 
} 
Var head = document .getElementsByTagName ("head") [0]; 
head.appendChild(style); 





DynamicStyleExample02.htm 


调用 这 个 函数 的 示例 如 下 : 


loadStyleString("body{background-color:red}'"); 

















这 种 方式 会 实时 地 向 页 面 中 添加 样式 ， 因 此 能 够 马上 看 到 变化 。 









如 果 专 门 针 对 IE 编写 代码 , 务必 小 心 使 用 styleSsheet .cssText 属性 。 在 重用 
同一 个 <style> 元 素 并 再 次 设置 这 个 属性 时 ， 有 可 能 会 导致 浏览 器 崩溃 。 同 样 ， 将 
cssText 属性 设置 为 空 字符 串 也 可 能 导致 浏览 器 前 溃 。 我 们 希望 IE 中 的 这 个 bug 能 
够 在 将 来 被 修复 。 







10.2.3 ”操作 表格 


<table> 元 素 是 HTML 中 最 复杂 的 结构 之 一 。 要 想 创建 表格 , 一 般 都 必须 涉及 表示 表格 行 、 单 元 格 、 
表 头 等 方面 的 标签 。 由 于 涉及 的 标签 多 ， 因 而 使 用 核心 DOM 方法 创建 和 修改 表格 往往 都 免不了 要 编写 
大 量 的 代码 。 假 设 我 们 要 使 用 DOM 来 创建 下 面 的 HTML 表格 。 


<table border="1" width="100%"> 
<tbody> 
站 和 下 和 
<td>Cell 1,1</td> 
<td>Cell 2,1</td> 
/tr 
此 世 二 
<td>Cell 1,2</td> 
<td>Cell 2,2</td> 
Es 
</tbody> 
</table> 


要 使 用 核心 DOM 方法 创建 这 些 元 素 ， 得 需要 像 下 面 这 么 多 的 代码 : 









































// 创 建 table 

Var table = document.createElement ("table"); 
table.border = 1; 

table.width = "100%"; 





/ /创建 tbody 
Var tbody = document.createElement ("tbody"); 
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table.appendChild (tbody); 


/ /创建 第 一 行 

Var rowl = document .createElement ("tr"); 
tbody.appendChild (rowl); 

Var cel11_1 = document.createElement ("td"); 

celll 1.appendChild(document.createTextNode("Cell 1,1")); 
rowl.appendChild(celll 1); 
Var cell2_1 = document.createElement ("td"); 

cell2_ 1.appendChild(document.createTextNode("Cell 2,1")); 
rowl.appendChild(cell2_ 1); 














/ /创建 第 二 行 

Var row2 = document .createElement ("tr"); 

DO engl Ld (oa) 

Var celll 2 = document.createElement ("td"); 

celll 2.appendChild(document.createTextNode("Cell 1,2")); 
row2.appendChild(celll 2); 
Var cell2_2= document.createElement ("td"); 

cell2 2.appendChild(document.createTextNode("Cell 2,2")); 
row2.appendChild(cell2 2); 














// 将 表格 添加 到 文档 主体 中 

document .body.appendChild(table); 

显然 , DOM 代码 很 长 , 还 有 点 不 太 好 懂 。 为 了 方便 构建 表格 , HTMLDOM 还 为 <table>、<tbody> 
和 <tr> 元 素 添加 了 一 些 属性 和 方法 。 

为 <table> 元 素 添加 的 属性 和 方法 如 下 。 
口 caption: 保存 着 对 <caption> 元 素 ( 如果 有 ) 的 指针 。 
口 tBodies: 是 一 个 <tbody> 元 素 的 HTMLCollection。 
口 tFoot: 保存 着 对 <tfoot> 元 素 ( 如 果 有 ) 的 指针 。 
口 tHead: 保存 着 对 <thead> 元 素 ( 如 果 有 ) 的 指针 。 
口 rows: 是 一 个 表格 中 所 有 行 的 HTMLCollection。 
口 createTHead(): 创建 <thead> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引用 。 
口 createTFoot () : 创建 <tfoot> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引 用 。 
口 createCaption(): 创建 <caption> 元 素 ， 将 其 放 到 表格 中 ， 返 回 引 用 。 
口 deleteTHead() : thead> 元 素 。 
口 deleteTFoot (): 删除 <tfoot> 元 素 。 
口 deleteCaption(): 删除 <caption> 元 素 。 
口 geleteRow (pos) : 删除 指定 位 置 的 行 。 
口 insertRow (pos) : 向 rows 集合 中 的 指定 位 置 插入 一 行 。 
为 <tbody> 元 素 添加 的 属性 和 方法 如 下 。 
口 rows: 保存 着 <tbody> 元 素 中 行 的 HTMLCollection。 
口 geleteRow (pos) : 删除 指定 位 置 的 行 。 
口 insertRow(pos) : 向 rows 集合 中 的 指定 位 置 插 入 一 行 ， 返回 对 新 插入 行 的 引用 。 
为 <tr> 元 素 添 加 的 属性 和 方法 如 下 。 
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口 cells: 保存 着 <tr> 元 素 中 单元 格 的 HTMLCollection。 

口 geleteCel1 (pos) : 删除 指定 位 置 的 单元 格 。 

口 insertcell(pos): 向 cells 集合 中 的 指定 位 置 插入 一 个 单元 格 ， 返 回 对 新 插入 单元 格 的 引用 。 
使 用 这 些 属性 和 方法 ， 可 以 极 大 地 减 / 少 创建 表格 所 需 的 代码 数量 。 例 如 ,使 用 这 些 属性 和 方法 可 以 
将 前 面 的 代码 重 写 如 下 ( 加 阴影 的 部 分 是 重 写 后 的 代码 )。 


// 创 建 table 

Var table = document.createElement ("table"); 
table.border = 1; 

table.width = "100%"; 















































/ /创建 tbody 
var tbody = document.createElement ("tbody"); 
table.appendChild (tbody); 





/ /创建 第 一 行 

tbody.insertRow(0); 

tbody.rows[0] .insertCell(0); 

tbody.rows[0] .cells[0] .appendChild(document .createTextNode("Cell 1,1")); 
tbody.rows[0] .insertCell(1); 

tbody.rows[0] .cells[1] .appendChild(document .createTextNode("Cell 2,1")); 


// 创 建 第 二 行 

tbody.insertRow(1); 

tbody.rows[1] .insertCell(0); 

tbody.rows[1] .cells[0] .appendChild(document .createTextNode("Cell 1,2")); 
tbody.rows[1] .insertCell(1); 

tbody.rows[1] .cells[1] .appendChild(document .createTextNode("Cell 2,2")); 


// 将 表格 添加 到 文档 主体 中 

document .body.appendChild(table); 

在 这 次 的 代码 中 , 创建 <table> 和 <tbody> 的 代码 没有 变化 。 不 同 的 是 创建 两 行 的 部 分 ， 其 中 使 用 
了 HTML DOM 定义 的 表格 属性 和 方法 。 在 创建 第 一 行 时 ， 通 过 <tbody> 元 素 调 用 了 insertRow() 方 
法 ,传人 了 参数 0 一 一 表示 应 该 将 插入 的 行 放 在 什么 位 置 上 。 执 行 这 一 行 代码 后 ， 就 会 自动 创建 一 行 并 
将 其 插入 到 <tbody> 元 素 的 位 置 0 上 ， 因 此 就 可 以 马上 通过 tbody .rows[0] 来 引用 新 插入 的 行 。 

创建 单元 格 的 方式 也 十 分 相似 ， 即 通过 <tr> 元 素 调用 insertcel1 () 方 法 并 传人 放置 单元 格 的 位 
置 。 然 后 ， 就 可 以 通过 tbody .rows [0] .cells[0] 来 引用 新 插入 的 单元 格 ， 因 为 新 创建 的 单元 格 被 插 
人 到 了 这 一 行 的 位 置 0 上 。 

总 之 , 使 用 这 些 属性 和 方法 创建 表格 的 逻辑 性 更 强 , 也 更 容易 看 懂 ， 尽管 技 术 上 这 两 套 代码 都 是 正 
确 的 。 









































































































































10.2.4 ”使 用 NodeList 


理解 NodeList 及 其 “近亲 ”NamedNodeMap 和 HTMLCollection, 是 从 整体 上 透彻 理解 DOM 的 
关键 所 在 。 这 三 个 集合 都 是 “动态 的 ”; 换 名 话说 ， 每 当 文档 结构 发 生变 化 时 ， 它 们 都 会 得 到 更 新 。 
此 ， 它们 始终 都 会 保存 着 最 新 、 最 准确 的 信息 。 从 本 质 上 说 ， 所 有 NodeList 对 象 都 是 在 访问 DOM 文 
档 时 实时 运行 的 查询 。 例 如 ， 下 列 代 码 会 导致 无 限 循环 : 
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var divs = document .getElementsByTagName ("div"), 
i; 
div; 
for (i=0; i < divs.length; i++){ 
div = document.createElement ("div"); 
document .body.appendChild (div); 


} 
第 一 行 代码 会 取得 文档 中 所 有 <div> 元 素 的 HTMLCollection。 由 于 这 个 集合 是 “动态 的 ”"， 因 此 
只 要 有 新 <div> 元 素 被 添加 到 页 面 中 ， 这 个 元 素 也 会 被 添加 到 该 集合 中 。 浏 览 带 不 会 将 创建 的 所 有 集 
合 都 保存 在 一 个 列表 中 ， 而 是 在 下 一 次 访问 集合 时 再 更 新 集合 。 结 果 ， 在 遇 到 上 例 中 所 示 的 循环 代码 
时 ， 就 会 导致 一 个 有 趣 的 问题 。 每 次 循环 都 要 对 条 件 i < aivs.1length 求 值 ， 意 味 着 会 运行 取得 所 
有 <aiv> 元 素 的 查询 。 考 虑 到 循环 体 每 次 都 会 创建 一 个 新 <aiv> 元 素 并 将 其 添加 到 文档 中 ， 因 此 
divs.1length 的 值 在 每 次 循环 后 都 会 递增 。 既 然 和 divs .1ength 每 次 都 会 同时 递增 , 结果 它们 的 
值 永远 也 不 会 相等 。 
如 果 想 要 迭代 一 个 NodeList， 最 好 是 使 用 length 属性 初始 化 第 二 个 变量 ， 然 后 将 迭代 需 与 该 变 
量 进行 比较 ， 如 下 面 的 例子 所 示 
var divs = dqocument .getElementsByTagName ("div"), 
1 
div; 



















































































for (i=0, len=divs.length; i < len; i++){ 
div = document.createElement ("div"); 
document .body.appendChild (div); 





} 


这 个 例子 中 初始 化 了 第 二 个 变量 1en。 由 于 len 中 保存 着 对 divs .length 在 循环 开始 时 的 一 个 快 
照 ， 因 此 就 会 避免 上 一 个 例子 中 出 现 的 无 限 循环 问题 。 在 本 章 演示 迭代 NodeList 对 象 的 例子 中 , 使 用 
的 都 是 这 种 更 为 保险 的 方式 。 

一 般 来 说 ， 应 该 尽量 减少 访问 NoaeList 的 次 数 。 因 为 每 次 访问 NodeList， 都 会 运行 一 次 基于 文 
档 的 查询 。 所 以 ， 可 以 考虑 将 从 NodeList 中 取得 的 值 缓存 起 来 。 


10.3 ”小结 


DOM 是 语言 中 立 的 API， 用 于 访问 和 操作 HTML 和 XML 文档 。DOMI1 级 将 HTML 和 XML 文档 
形象 地 看 作 一 个 层次 化 的 节点 树 ， 可 以 使 用 JavaScript 来 操作 这 个 节点 树 ， 进 而 改变 底层 文档 的 外 观 和 
结构 。 

DOM 由 各 种 节点 构成 ， 简 要 总 结 如 下 。 
口 最 基本 的 节点 类 型 是 Nodqe， 用 于 抽象 地 表示 文档 中 一 个 独立 的 部 分 ; 所 有 其 他 类 型 都 继承 自 
Node。o 
口 Document 类 型 表示 整个 文档 ， 是 一 组 分 层 节 点 的 根 节 点 。 在 JavaScript 中 ，document 对 象 是 
Document 的 一 个 实例 。 使 用 document 对 象 ， 有 很 多 种 方式 可 以 查询 和 取得 节点 。 
口 Element 节点 表示 文档 中 的 所 有 HTML 或 XML 元 素 ， 可 以 用 来 操作 这 些 元 素 的 内 容 和 特性 。 
口 另外 还 有 一 些 节 点 类 型 ， 分 别 表示 文本 内 容 、 注 释 、 文 档 类 型 、CDATA 区 域 和 文档 片段 。 
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访问 DOM 的 操作 在 多 数 情 况 下 都 很 直观 ， 不 过 在 处 理 <script> 和 <style> 元 素 时 还 是 存在 一 些 
复杂 性 。 由 于 这 两 个 元 素 分 别 包含 脚本 和 样式 信息 ， 因 此 浏览 器 通常 会 将 它们 与 其 他 元 素 区 别 对 待 。 这 
些 区 别 导致 了 在 针对 这 些 元 素 使 用 innerHTML 时 ， 以 及 在 创建 新 元 素 时 的 一 些 问题 。 

理解 DOM 的 关键 ,就 是 理解 DOM 对 性 能 的 影响 。DOM 操作 往往 是 JavaScript 程序 中 开销 最 大 的 
部 分 ， 而 因 访 问 NodeList 导致 的 问题 为 最 多 。NodeList 对 象 都 是 “动态 的 "， 这 就 意味 着 每 次 访问 
NodeList 对 象 ， 都 会 运行 一 次 查询 。 有 鉴于 此 ， 最 好 的 办 法 就 是 尽量 减少 DOM 操作 。 
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DOM 扩展 


本 章 内 容 

口 理解 Selectors API 

口 使 用 HTML5 DOM 扩展 
口 了 解 专 有 的 DOM 扩展 



































尽 ” DOM 作为 API 已 经 非常 完善 了 ， 但 为 了 实现 更 多 的 功能 ， 仍 然 会 有 一 些 标准 或 专 有 的 扩 
展 。2008 年 之 前 ,浏览 器 中 几乎 所 有 的 DOM 扩展 都 是 专 有 的 。 此 后 ，W3C 着 手 将 一 些 已 经 
成 为 事实 标准 的 专 有 扩展 标准 化 并 写 入 规范 当中 。 

对 DOM 的 两 个 主要 的 扩展 是 Selectors API( 选择 符 API ) 和 HTML5。 这 两 个 扩展 都 源 自 开 发 社区 ， 
而 将 某 些 常见 做 法 及 API 标准 化 一 直 是 众望 所 归 。 此 外 ， 还 有 一 个 不 那么 引 人 瞩 目的 Element Traversal 
(元 素 遍 历 ) 规范 ,为 DOM 添加 了 一 些 属 性 。 虽 然 前 述 两 个 主要 规范 ( 特别 是 HIML5 ) 已 经 涵盖 了 大 
量 的 DOM 扩展, 但 专 有 扩展 依然 存在 。 本 章 也 会 介绍 专 有 的 DOM 扩展 。 


11.1 选择 符 API 


众多 JavaScript 库 中 最 常用 的 一 项 功能 ， 就 是 根据 CSS 选择 符 选 择 与 某 个 模式 匹配 的 DOM 元 素 。 
实际 上 ，jQuery (www.jquery.com ) 的 核心 就 是 通过 CSS 选择 符 查 询 DOM 文档 取得 元 素 的 引用 ， 从 而 
抛 开 了 getElementById() 和 getElementsByTagName () 。 

Selectors API (www.w3.org/TR/selectors-api/ ) 是 由 W3C 发 起 制定 的 一 个 标准 ， 致 力 于 让 浏览 髓 原 
生 支 持 CSS 查询 。 所 有 实现 这 一 功能 的 JavaScript 库 都 会 写 一 个 基础 的 CSS 解析 器 , 然后 再 使 用 已 有 的 
DOM 方法 查询 文档 并 找到 匹配 的 节点 。 0 卷 地 改进 这 一 过 程 的 性 能 ， 但 到 头 来 
都 只 能 通过 运行 JavaScript 代码 来 完成 查询 操作 。 而 把 这 个 功能 变 成 原生 API 之 后 ， 解析 和 树 杏 询 操作 
可 以 在 浏览 器 内 部 通过 编译 后 的 代码 来 完成 ， 极 大 地 改善 了 性 能 。 

Selectors API Level 1 的 核心 是 两 个 方法 : querySelector() 和 querySelectorA1l1l()。 在 兼容 的 浏 
览 嚣 中， 可 以 通过 Document 及 Element 类 型 的 实例 调用 它们 。 目 前 已 完全 支持 Selectors API Level 1 
的 浏览 器 有 IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。 
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11.1.1 querySelector() 方 法 


querySelector () 方 法 接收 一 个 CSS 选择 符 ， 返 回 与 该 模式 匹配 的 第 一 个 元 素 ， 如 果 没 有 找到 匹 
配 的 元 素 ， 返 回 nul1。 请 看 下 面 的 例子 。 
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// 取 得 body 元 素 
Var body = document .querySelector ("body"); 


// 取 得 ID 为 "myDiv" 的 元 素 
Var myDiv = document .querySelector("#myDiv"); 


// 取 得 类 为 "selected" 的 第 一 个 元 素 
Var selected = document .querySelector(".selected"); 


// 取 得 类 为 "button" 的 第 一 个 图 像 元 素 
var img = document.body.querySelector("img.button"); 


SelectorsAPIExample01.htm 
通过 Document 类 型 调用 querySelector () 方 法 时 ,会 在 文档 元 素 的 范围 内 查找 匹配 的 元 素 。 而 
通过 Element 类 型 调用 querySelector () 方 法 时 ， 只 会 在 该 元 素 后 代 元 素 的 范围 内 查找 匹配 的 元 素 。 


CSS 选择 符 可 以 简单 也 可 以 复杂 , 视 情 况 而 定 。 如 果 传 人 了 不 被 支持 的 选择 符 , querySelector () 
会 抛 出 错误 。 





























11.1.2 querySelectorA1l1l() 方 法 


querySelectorAl1 () 方 法 接收 的 参数 与 queryselector () 方 法 一 样 , 都 是 一 个 CSS 选择 符 , 但 
返回 的 是 所 有 匹配 的 元 素 而 不 仅仅 是 一 个 元 素 。 这 个 方法 返回 的 是 一 个 NodeList 的 实例 。 

具体 来 说 ， 返 回 的 值 实际 上 是 带 有 所 有 属性 和 方法 的 NodeList， 而 其 底层 实现 则 类 似 于 一 组 元 素 
的 快照 , 而 非 不 断 对 文档 进行 搜索 的 动态 查询 。 这样 实现 可 以 避免 使 用 NodeList 对 象 通常 会 引起 的 大 
多 数 性 能 问题 。 

只 要 传 给 querySelectorA1l1 () 方 法 的 CSS 选择 符 有 效 ， 该 方法 都 会 返回 一 个 NodeList 对 象 ， 
而 不 管 找 到 多 少 匹 配 的 元 素 。 如 果 没 有 找到 匹配 的 元 素 ，NodeList 就 是 空 的 。 

与 querySelector() 类 似 ， 能 够 调用 querySelectorAll () 方法 的 类 型 包括 Document 、 
DocumentFragment 和 Element。 下 面 是 几 个 例子 。 









































// 取 得 某 <div> 中 的 所 有 <em> 元 素 ( 类似 于 getElementsByTagName ("em") ) 
Var ems = document.getElementById("myDiv") .querySelectorAll ("em"); 











// 取 得 类 为 "selected" 的 所 有 元 素 
Var selecteds = document .querySelectorAll(".selected"); 


// 取 得 所 有 <p> 元 素 中 的 所 有 <strong> 元 素 
Var strongs = document .querySelectorAll("p strong"); 


SelectorsAPIExample02.htm 


要 取得 返回 的 NodeList 中 的 每 一 个 元 素 , 可 以 使 用 item() 方 法 , 也 可 以 使 用 方 插 号 语法 ,比如 : 


var i, len, strong; 

for (i=0, len=strongs.length; i < len; i++){ 
strong = strongs[i]; // 或 者 strongs.item(i) 
strong.className = "important"; 





} 


同样 与 querySelector() 类似， 如 果 传 人 了 浏览 器 不 支持 的 选择 符 或 者 选择 符 中 有 语法 错误 ， 
querySelectorA1l1l () 会 抛 出 错误 。 
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11.1.3 matchesSelector() 方 法 





























Selectors API Level 2 规范 为 Element 类 型 新 增 了 一 个 方法 matchesSelector()。 这 个 方法 接收 
一 个 参数 ， 即 CSS 选择 符 ， 如 果 调 用 元 素 与 该 选择 符 匹 配 ， 返 回 true; 否则 ， false。 看 例子 。 
if (document.body.matchesSelector ("body.pagel1l"))t 
//true 


} 


在 取得 某 个 元 素 引 用 的 情况 下 ,使 用 这 个 方法 能 够 方便 地 检测 它 是 否 会 被 queryselector () 或 
querySelectorAll () 方 法 返回 。 

截至 2011 年 年 中 ,还 没有 浏览 靛 支 持 matchesSelector() 方 法 ; 不 过 ,也 有 一 些 实验 性 的 实现 。 
IE 9+ 通 过 msMatchesSselector () 支 持 该 方法 ,Firefox 3.6+ 通 过 mozMatchesSelector () we 
Safari $S+ 和 Chrome 通过 webkitMatchesSelector () 支 持 该 方法 。 因 此 ， 如 果 你 想 使 用 这 个 方法 ， 
好 是 编写 一 个 包装 函数 。 


function matchesSelector (element， selector)t{ 
if (elLlement .matchesSelector) 1{ 
return element .matchesSelector (selector ) ; 
} else if (element.msMatchesSelector)t{ 
return element .msMatchesSelector (selector); 
} else if (element.mozMatchesSelector)t{ 












































return element .mozMatchesSelector (selector); 
} else if (element .webkitMatchesSelector)t{ 

return element .webkitMatchesSelector (selector); 
} else { 

throw new Error("Not supported."); 





} 
} 


if (matchesSelector (document.body, "body.pagel1l"))t 
/ /执行 操作 
} 


SelectorsAPIExample03.htm 


11.2 ”元素 遍历 


对 于 元 素 间 的 空格 , IE9 及 之 前 版 本 不 会 返回 文本 节点 , 而 其 他 所 有 浏览 器 都 会 返回 文本 节点 。 这样， 
就 导致 了 在 使 用 chilgNodes 和 firstchild 等 属性 时 的 行为 不 一 致 。 为 了 弥补 这 一 差异 ， 而 同时 又 保 
持 DOM 规范 不 变 ，Element Traversal 规范 ( www.w3.org/TR/ElementTraversal/ ) 新 定义 了 一 组 属性 。 
Element Traversal API 为 DOM 元 素 添 加 了 以 下 5 个 属性 。 
口 childElementcount: 返回 子 元 素 (不 包括 文本 节点 和 注释 ) 的 个 数 。 
口 firstElementChild: 指向 第 一 个 子 元 素 ; firstchilg 的 元 素 版 。 
口 LastElementchild: 指向 最 后 一 个 子 元 素 ; Lastchila 的 元 素 版 。 
D previousElementSibling: 指向 前 一 个 同辈 元 素 ; previousSibling 的 元 素 版 。 
口 nextElementSibling: 指 J 元 素 ; nextSibling 的 元 素 版 。 
支持 的 浏览 器 为 DOM 元 素 添 加 了 这 些 属性 ， 利 用 这 些 元 素 不 必 担 心 空白 文本 节点 ， 从 而 可 以 更 方 








al 









































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com，) 专 享 尊重 版 权 


11.3 HTMLS 289 





便 地 查找 DOM 元 素 了 。 
下 面 来 看 一 个 例子 。 过 去 ， 要 跨 浏览 器 遍历 某 元 素 的 所 有 子 元 素 ， 需 要 像 下 面 这 样 写 代码 。 


























var 工 ， 
len, 
child = element.firstChilgd; 
while(child != element.lastChild)t{ 
if (child.nodeType == 1){  ”// 检 查 是 不 是 元 素 
processChild(child); 
} 
child = child.nextSibling; 
} 


而 使 用 Element Traversal 新 增 的 元 素 ， 代 码 会 更 简洁 。 


var 工 ， 
len, 
child = element.firstElementChild; 
while(child != element.lastElementChild)t{ 
processChild (child); / /已 知 其 是 元 素 
child = child.nextElementSibling; 











} 
支持 Element Traversal 规范 的 浏览 器 有 IE 9+、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+。 


11.3 HTMLS 


对 于 传统 HTML 而 言 ，HTML5 是 一 个 叛逆 。 所 有 之 前 的 版 本 对 JavaScript 接口 的 描述 都 不 过 三 言 
两 语 ， 主 要 篇 幅 都 用 于 定义 标记 ， 与 JavaScript 相关 的 内 容 一 概 交 由 DOM 规范 去 定义 。 

而 HTML5 规范 则 围绕 如 何 使 用 新 增 标记 定义 了 大 量 JavaScript API。 其 中 一 些 API 与 DOM 重 释 ， 
定义 了 浏览 器 应 该 支持 的 DOM 扩展 。 























因为 HTML5 涉及 的 面 非常 广 , 本 节 只 讨论 与 DOM 节点 相关 的 内 容 。HTML5 的 


其 他 相关 内 容 将 在 本 书 其 他 章节 中 穿插 介绍 。 





11.3.1 与 类 相关 的 扩充 


HTML4 在 Web 开发 领域 得 到 广泛 采用 后 导致 了 一 个 很 大 的 变化 , 即 class 属性 用 得 越 来 越 多 , 一 
方面 可 以 通过 它 为 元 素 添 加 样式 , 另 一 方面 还 可 以 用 它 表 示 元 素 的 语义 。 于 是 , 自然 就 有 很 多 JavaScript 
代码 会 来 操作 CSS 类 ， 比 如 动态 修改 类 或 者 搜索 文档 中 具有 给 定 类 或 给 定 的 一 组 类 的 元 素 , 等 等 。 为 了 
让 开发 人 员 适 应 并 增加 对 class 属性 的 新 认识 ，HTMLS5 新 增 了 很 多 API， 致 力 于 简化 CSS 类 的 用 法 。 

1. getElementsByClassName() 方 法 

HTML5 添加 的 getElementsByClassName () 方 法 是 最 受 人 欢迎 的 一 个 方法 ,可 以 通过 document 
对 象 及 所 有 HTML 元 素 调用 该 方法 。 这 个 方法 最 早出 现在 JavaScript 库 中 ， 是 通过 既 有 的 DOM 功能 实 
现 的 ， 而 原生 的 实现 具有 极 大 的 性 能 优势 。 

getElementsByClassName () 方 法 接收 一 个 参数 ， 即 一 个 包含 一 或 多 个 类 名 的 字符 串 ， 返 回 带 有 

间 定 类 的 所 有 元 素 的 NodeList。 传 人 多 个 类 名 时 ， 类 名 的 先后 顺序 不 重要 。 来 看 下 面 的 例子 。 
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// 取 得 所 有 类 中 包含 "rusername" 和 "curtzent" 的 元 素 ， 类 名 的 先后 顺序 无 所 谓 





var allCurrentUsernames = Qqocument .getElementsByClassName ("UuSsername current"); 


// 取 得 ID 为 "myDiv" 的 元 素 中 带 有 类 名 "selected" 的 所 有 元 素 





var selected = document.getElementById("myDiv") .getElementsByClassName ("selected"); 


调用 这 个 方法 时 ,只 有 位 于 调用 元 素 子 树 中 的 元 素 才 会 返回 。 在 document 对 象 上 调用 











getElementsByClassName () 始终 会 返回 与 类 名 匹配 的 所 有 元 素 ， 在 元 素 上 调用 该 方法 就 只 会 返回 后 











代 元 素 中 匹配 的 元 素 。 




















使 用 这 个 方法 可 以 更 方便 地 为 带 有 某 些 类 的 元 素 添 加 事件 处 理 程 序 , 从 而 不 必 再 局 限于 使 用 ID 或 标 
签名 。 不 过 别 忘 了 , 因为 返回 的 对 象 是 NodeList, 所 以 使 用 这 个 方法 与 使 用 getElementsByTagName () 


























以 及 其 他 返回 NodeList 的 DOM 方法 都 具有 同样 的 性 能 问题 。 





支持 getElementsByCl1assName () 方 法 的 浏览 器 有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 


Opera 9.5+。 
2. classList 属性 








在 操作 类 名 时 ， 需 要 通过 className 属性 添加 、 删 除 和 替换 类 名 。 因 为 className 中 是 一 个 字 
符 串 ， 所 以 即使 只 修改 字符 串 一 部 分 ， 也 必须 每 次 都 设置 整个 字符 串 的 值 。 比 如 ， 以 下 面 的 HTML 代 














码 为 例 。 


<div class="bd user disabled">...</div> 





这 个 <qiv> 元 素 一 共有 三 个 类 名 。 要 从 中 删除 一 个 类 名 ， 需 要 把 这 三 个 类 名 拆 开 ， 删 除 不 想 要 的 那 








然后 再 把 其 他 类 名 拼 成 一 个 新 字符 串 。 请 看 下 面 的 例子 。 


/ /删除 "user" 类 








// 首 先 ， 取 得 类 名 字符 串 并 拆 分 成 数组 
var classNames = div.className.split(/\s+/); 


// 找 到 要 删 的 类 名 


Var pos = -1, 
i 
len; 
for (i=0, len=classNames.length; i < len; I++){ 
if (classNames[i] == "user")t{ 
BOS = 工 7 
break; 
} 
} 
/ /删除 类 名 


classNames.splice(i,1); 


// 把 剩 下 的 类 名 拼 成 字符 串 并 重新 设置 


div.className = classNames.join(" "); 





为 了 从 <div> 元 素 的 class 属性 中 删除 "user"， 以 上 这 些 代码 都 是 必需 的 。 必 须 得 通过 类 似 的 算 








法 替换 类 名 并 确认 元 素 中 是 否 包 含 该 类 名 。 添 加 类 名 可 以 通过 拼接 字符 串 完成 ,但 必须 要 
不 会 多 次 添加 相同 的 类 名 。 很 多 JavaScript 库 都 实现 了 这 个 方法 ， 以 简化 这 些 操作 。 


): 训 


人 氨 

















过 检测 确定 


HTMLS 新 增 了 一 种 操作 类 名 的 方式 ， 可 以 让 操作 更 简单 也 更 安全 ， 那 就 是 为 所 有 元 素 添 加 
classList 属性 ,这 个 classList 属性 是 新 集合 类 型 DoMTokenList 的 实例 ,与 其 他 DOM 集合 类 似 ， 
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DOMTokenList 有 一 个 表示 自己 包含 多 少 元 素 的 length 属性 ， 而 要 取得 每 个 元 素 可 以 使 用 item () 方 
法 ， 也 可 以 使 用 方 括号 语法 。 此 外 ， 这 个 新 类 型 还 定义 如 下 方法 。 
口 add (value) : 将 给 定 的 字符 串 值 添加 到 列表 中 。 如 果 值 已 经 存在 ， 就 不 添加 了 。 

口 contains (value) : 表示 列表 中 是 否 存 在 给 定 的 值 ， 如 果 存 在 则 返回 true, 否则 返回 false。 
口 remove (value) : 从 列表 中 删除 给 定 的 字符 串 。 

口 toggle (value) : 如 果 列 表 中 已 经 存在 给 定 的 值 , 删除 它 ; 如 果 列 表 中 没有 给 定 的 值 , 添加 它 。 
这 样 ， 前 面 那么 多 行 代码 用 下 面 这 一 行 代码 就 可 以 代 蔡 了 : 

div.classList.remove("user"); 

以 上 代码 能 够 确保 其 他 类 名 不 受 此 次 修改 的 影响 。 其 他 方法 也 能 极 大 地 减少 类 似 基 本 操作 的 复杂 
如 下 面 的 例子 所 示 。 


// 删 除 "dqisabled" 类 
div.classList.remove("disabled"); 





























这 


// 添 加 "current" 类 
div.classList.add("current"); 


/ /切换 "user" 类 


div.classList.toggle("user"); 


/ /确定 元 素 中 是 否 包 含 既定 的 类 名 

if (div.classList.contains ("bd") && !div.classList.contains ("disabled"))t{ 
/ /执行 操作 

) 


/ /迭代 类 名 
for (var i=0, len=div.classList.length; i < len; i++){ 
doSomething (div.classList[i]); 


} 

有 了 classList 属性 ,除非 你 需要 全 部 删除 所 有 类 名 ， 或 者 完全 重 写 元 素 的 class 属性 ， 否则 也 
就 用 不 到 className 属性 了 。 

支持 classList 属性 的 浏览 器 有 Firefox 3.6+ 和 Chrome。 














11.3.2 ”焦点 管理 


HTMLS5 也 添加 了 辅助 管理 DOM 焦点 的 功能 。 首 先 就 是 document .activeElement 属性 ， 这 
属性 始终 会 引用 DOM 中 当前 获得 了 焦点 的 元 素 。 元 素 获 得 焦点 的 方式 有 页 面 加 载 、 用 户 输入 (通常 
通过 按 Tab 键 ) 和 在 代码 中 调用 focus ( ) 方法。 来 看 几 个 例子 。 

Var button = Qocument .getElementById ("myButton" ) ; 


button.focus(); 
alert (document .activeElement === button); //true 


默认 情况 下 ， 文 档 刚 刚 加 载 完 成 时 ，qdocument .activeElement 中 保存 的 是 document .body 元 
素 的 引用 。 文 档 加 载 期 间 ，document .activeElement 的 值 为 null。 
另外 就 是 新 增 了 document .hasFocus () 方 法 ， 这 个 方法 用 于 确定 文档 是 否 获得 了 焦点 。 


Var button = document .getElementById("myButton"); 








A 
是 
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button.focus(); 
alert (document.hasFocus()); //true 


通过 检测 文档 是 否 获 得 了 焦点 ， 可 以 知道 用 户 是 不 是 正在 与 页 面 交 互 。 

查询 文档 获知 哪个 元 素 获得 了 焦点 ,以 及 确定 文档 是 否 获得 了 焦点 , 这 两 个 功能 最 重要 的 用 途 是 提 
高 Web 应 用 的 无 障碍 性 。 无 障碍 Web 应 用 的 一 个 主要 标志 就 是 恰当 的 焦点 管理 ， 而 确切 地 知道 哪个 元 
素 获得 了 焦点 是 一 个 极 大 的 进步 ， 至 少 我 们 不 用 再 像 过 去 那样 靠 猜测 了 。 

实现 了 这 两 个 属性 的 浏览 器 的 包括 IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+。 
















































































11.3.3 ”HTMLDocument 的 变化 


HTML5 扩展 了 HTMLDocument, 增加 了 新 的 功能 。 与 HTMLS5 中 新 增 的 其 他 DOM 扩展 类 似 , 这 些 
变化 同样 基于 那些 已 经 得 到 很 多 浏览 器 完美 支持 的 专 有 扩展 。 所以, 尽管 这 些 扩展 被 写 入 标准 的 时 间 相 
对 不 长 ， 但 很 多 浏览 器 很 早 就 已 经 支持 这 些 功 能 

1. readystate 属性 

IE4 最 早 为 document 对 象 引 入 了 readystate 属性 。 然 后 ， 其 他 浏览 器 也 都 陆续 添加 这 个 属 ' 
最 终 HTML5 把 这 个 属性 纳入 了 标准 当中 。Document 的 readystate 属性 有 两 个 可 能 的 值 : 

口 1oadqing， 正 在 加 载 文 档 ; 
口 complete， 已 经 加 载 完 文档 。 

使 用 document .readystate 的 最 恰当 方式 ， 就 是 通过 它 来 实现 一 个 指示 文档 已 经 加 载 完成 的 指 
示 器 。 在 这 个 属性 得 到 广泛 支持 之 前 ， 要 实现 这 样 一 个 指示 器 ， 必 须 借助 onload 事件 处 理 程序 设置 一 
个 标签 ， 表 明文 档 已 经 加 载 完 毕 。dqocument .readySstate 属性 的 基本 用 法 如 下 。 


if (document.readyState == "Complete"){ 


/ /执行 操作 























el 
ke 















































} 


支持 readystate 属性 的 浏览 器 有 IE4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+。 

2. 兼容 模式 

自从 下 6 开始 区 分 泻 染 页 面 的 模式 是 标准 的 还 是 混杂 的 , 检测 页 面 的 兼容 模式 就 成 为 浏览 器 的 必要 
功能 。IE 为 此 给 aocument 添加 了 一 个 名 为 compatMode 的 属性 ， 这 个 属性 就 是 为 了 告诉 开发 人 员 浏 
览 絮 采用 了 哪 种 演 染 模式 。 就 像 下 面 例子 中 所 展示 的 那样 ， 在 标准 模式 下 ，document .compatMode 的 
值 等 于 "cssicompat "， 而 在 混杂 模式 下 ，dqocument . compatMode 的 值 等 于 "BackCompat 





























if (document.compatMode == "CSSlCompat")t{ 
alert ("Standards mode"); 
} else { 


alert ("Quirks mode"); 


} 

后 来 ， 陆 续 实现 这 个 属性 的 浏览 器 有 Firefox、Safari 3.1+、Opera 和 Chrome。 最 终 ，HTMLS5 也 把 
这 个 属性 纳入 标准 ， 对 其 实现 做 出 了 明确 规定 。 

3. head 属性 

作为 对 document .body 引用 文档 的 <body> 元 素 的 补充 ，HTML5 新 增 了 document .head 属 | 


引用 文档 的 <heag> 元 素 。 要 引用 文档 的 <heagd> 元 素 ， 可 以 结合 使 用 这 个 属性 和 男 一 种 后 备 方法 。 


Var head = document .head | document .getElementsByTagName ("head") [0]; 



































el 
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如 果 可 用 ， 就 使 用 aocument .head， 和 否则 仍然 使 用 getElementsByTagName () 方 法 。 
实现 aocument .head 属性 的 浏览 右 包 括 Chrome 和 Safari 5。 








11.3.4 字符 集 属性 

HTMLS 新 增 了 几 个 与 文档 字符 集 有 关 的 属性 。 其中, charset 属性 表示 文档 中 实际 使 用 的 字符 集 ， 
也 可 以 用 来 指定 新 字符 集 。 默 认 情 况 下 ， 这 个 属性 的 值 为 "UTF-16"， 但 可 以 通过 <meta> 元 素 、 响 应 头 
部 或 直接 设置 charset 属性 修改 这 个 值 。 来 看 一 个 例子 。 


alert (document.charset); //"UTF-16" 
document .charset = "UTF-8"; 


另 一 个 属性 是 defaultcharset, 表示 根据 默认 浏览 器 及 操作 系统 的 设置 , 当前 文档 默认 的 字符 集 
应 该 是 什么 。 如 果 文 档 没 有 使 用 默认 的 字符 集 , 那 charset 和 defaultcharset 属性 的 值 可 能 会 不 一 
样 ， 例 如 : 


if (document.charset != document.defaultCharset){ 
alert ("Custom character set being used."); 



























































} 

通过 这 两 个 属性 可 以 得 到 文档 使 用 的 字符 编码 的 具体 信息 ,也 能 对 字符 编码 进行 准确 地 控制 。 运行 
适当 的 情况 下 ， 可 以 保证 用 户 正 常 查看 页 面 或 使 用 应 用 。 

支持 document.charset 属性 的 浏览 锅 有 I 三 、Firefox 、Safari 、Opera 和 Chrome 。 支 持 
document .defaultCharset 属性 的 浏览 器 有 了 IE、Safari 和 Chrome。 


11.3.5” 自 定义 数据 属性 

HTML5 规定 可 以 为 元 素 添 加 非 标准 的 属性 , 但 要 添加 前 级 aata-, 目的 是 为 元 素 提供 与 泻 染 无 关 的 
信息 ， 或 者 提供 语义 信息 。 这 些 属 性 可 以 任意 添加 、 随 便 命 名 ， 只 要 以 aata- 开 头 即 可 。 来 看 一 个 例子 。 

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div> 

添加 了 自 定义 属性 之 后 ， 可 以 通过 元 素 的 dataset 属性 来 访问 自 定义 属性 的 值 。dataset 属性 的 
值 是 DoMstringMap 的 一 个 实例 ,也 就 是 一 个 名 值 对 儿 的 上 映射。 在 这 个 映射 中 ,每 个 aata-name 形式 
的 属性 都 会 有 一 个 对 应 的 属性 ， 只 不 过 属性 名 没有 data- 前 级 ( 比如， 自 定义 属性 是 data-myname， 
那 映 射 中 对 应 的 属性 就 是 myname )。 还 是 看 一 个 例子 吧 。 

// 本 例 中 使 用 的 方法 仅 用 于 演示 




















































































































var div = document.getElementById("myDiv"); 


// 取 得 自 定义 属性 的 值 
var appId = div.dataset.appId; 
Var myName = div.dataset.myname; 


// 设 置 值 
div.dataset.appId = 23456; 
div.dataset.myname = "Michael"; 


// 有 没有 "myname" 值 呢 ? 
if (div.dataset.myname){ 
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alert ("Hello, " + div.dataset.myname); 


} 

如 果 需 要 给 元 素 添 加 一 些 不 可 见 的 数据 以 便 进行 其 他 处 理 , 那 就 要 用 到 自 定义 数据 属性 。 在 跟踪 链 
接 或 混搭 应 用 中 ， 通 过 自 定义 数据 属性 能 方便 地 知道 点 击 来 自 页 面 中 的 哪个 部 分 。 

在 编写 本 书 时 ， 支 持 自 定 义 数据 属性 的 浏览 锅 有 Firefox 6+ 和 Chrome。 


11.3.6 ”插入 标记 


虽然 DOM 为 操作 节点 提供 了 细致 入 微 的 控制 手段 , 但 在 需要 给 文档 插入 大 量 新 HTML 标记 的 情况 
下 ,通过 DOM 操作 仍然 非常 麻烦 ， 因 为 不 仅 要 创建 一 系列 DOM 节点 ， 而 且 还 要 小 心地 按照 正确 的 顺 
序 把 它们 连接 起 来 。 相 对 而 言 ， 使 用 插入 标记 的 技术 ， 直 接 插 入 HTML 字符 串 不 仅 更 简单 ， 速 度 也 更 
快 。 以 下 与 插入 标记 相关 的 DOM 扩展 已 经 纳入 了 HTML5 规范 。 
1. innerHTML 属性 
在 读 模 式 下 ，innerHTML 属性 返回 与 调用 元 素 的 所 有 子 节 点 (包括 元 素 、 注 释 和 文本 节点 ) 对 应 
的 HTML 标记 。 在 写 模 式 下 ，innerHTML 会 根据 指定 的 值 创建 新 的 DOM 树 , 然后 用 这 个 DOM 树 完全 
替换 调用 元 素 原 先 的 所 有 子 节点 。 下 面 是 一 个 例子 。 
<div id="content"> 
<p>This is a <strong>paragraph</strong> with a list following it.</p> 
a 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 


</ul> 
</div> 


对 于 上 面 的 <div> 元 素来 说 ， 它 的 innerHTML 属性 会 返回 如 下 字符 串 


<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 

<l1i>Item 1</1i> 

<li>Item 2</1i> 

<li>Item 3</1i> 
</ul> 


但 是 ,不 同 浏览 器 返回 的 文本 格式 会 有 所 不 同 ,IE 和 Opera 会 将 所 有 标签 转换 为 大 写 形式 ,而 Safari、 
Chrome 和 Firefox 则 会 原原本本 地 按照 原先 文档 中 ( 或 指定 这 些 标 签 时 ) 的 格式 返回 HTML,， 包括 空格 
和 缩 进 。 不 要 指望 所 有 浏览 器 返回 的 innerHTML 值 完全 相同 。 

在 写 模式 下 ，innerHTML 的 值 会 被 解析 为 DOM 子 树 , 替换 调用 元 素 原来 的 所 有 子 节点 。 因 为 它 的 
值 被 认为 是 HTML， 所 以 其 中 的 所 有 标签 都 会 按照 浏览 器 处 理 HTML 的 标准 方式 转换 为 元 素 ( 同样 ， 
这 里 的 转换 结果 也 因 浏览 器 而 异 )。 如 果 设 置 的 值 仅 是 文本 而 没有 HITML 标签 ， 那么 结果 就 是 设置 纯 文 
本 ， 如 下 所 示 。 
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div.innerHTML = "Hello world!"; 

为 innerHTML 设置 的 包含 HTML 的 字符 串 值 与 解析 后 innerHTML 的 值 大 不 相同 。 来 看 下 面 的 
例子 。 

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>"; 
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以 上 操作 得 到 的 结果 如 下 : 
<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div> 


设置 了 innerHTML 之 后 ， 可 以 像 访 问 文档 中 的 其 他 节点 一 样 访问 新 创建 的 节点 。 






为 innerHTML 设置 HTML 字符 串 后 ,浏览 器 会 将 这 个 字符 串 解 析 为 相应 的 DOM 
树 。 因 此 设置 了 innerHTML 之 后 ， 再 从 中 读 取 HTML 字符 串 , 会 得 到 与 设置 时 不 一 
样 的 结果 。 原 因 在 于 返回 的 字符 串 是 根据 原始 HTML 字符 串 创建 的 DOM 树 经 过 序列 
化 之 后 的 结果 。 










使 用 innerHTML 属性 也 有 一 些 限 制 。 比 如 ， 在 大 多 数 浏览 器 中 ,通过 innerHTML 搬 人 <script> 
元 素 并 不 会 执行 其 中 的 脚本 。IE8 及 更 早 版 本 是 唯一 能 在 这 种 情况 下 执行 脚本 的 浏览 器 ， 但 必须 满足 一 
些 条 件 。 一 是 必须 为 <script> 元 素 指定 defer 属性 ， 二 是 <script> 元 素 必须 位 于 (微软 所 谓 的 )“ 有 
作用 域 的 元 素 ”( scoped element ) 之 后 。<script> 元 素 被 认为 是 “无 作用 域 的 元 素 ”( NoScope element )， 
也 就 是 在 页 面 中 看 不 到 的 元 素 ， 与 <style> 元 素 或 注释 类 似 。 如 果 通 过 innerHTML 插入 的 字符 串 开头 
就 是 一 个 “无 作用 域 的 元 素 "， 那 么 IE 会 在 解析 这 个 字符 串 前 先 删 除 该 元 素 。 换 句 话 说 ， 以 下 代码 达 不 
到 目的 : 

div.innerHTML = "<script defer>alert('hi');<\/script>"; / /无效 

此 时 ，innerHTML 字符 串 一 开始 ( 而 且 整 个 ) 就 是 一 个 “无 作用 域 的 元 素 "， 所 以 这 个 字符 串 会 变 
成 空 字符 串 。 如 果 想 搬 和 人 这 段 脚本 ， 必 须 在 前 面 添加 一 个 “有 作用 域 的 元 素 "， 可 以 是 一 个 文本 节点 ， 
也 可 以 是 一 个 没有 结束 标签 的 元 素 如 <input>。 例 如 ， 下 面 这 几 行 代码 都 可 以 正常 执行 : 
"_<script defer>alert('hi');<\/script>"; 


"<div>&nbsp;</div><script defer>alert('hi');<\/script>"; 
"<input type=\"hidden\"><script defer>alert('hi');<\/script>"; 











div.innerHTML 
div.innerHTML 
div.innerHTML 


第 一 行 代码 会 在 <script> 元 素 前 插入 一 个 文本 节点 。 事 后 ， 为 了 不 影响 页 面 显示 ， 你 可 能 需要 移 
除 这 个 文本 节点 。 第 二 行 代 码 采用 的 方法 类 似 ， 只 不 过 使 用 的 是 一 个 包含 非 换 行 空格 的 <aiv> 元 素 。 如 
果 仅 仅 插入 一 个 空 的 <div> 元 素 , 还 是 不 行 ; 必须 要 包含 一 点 儿 内 容 , 浏览 器 才 会 创建 文本 节点 。 同 样 ， 
为 了 不 影响 页 面 布局 ， 悉 怕 还 得 移 除 这 个 节点 。 第 三 行 代码 使 用 的 是 一 个 隐藏 的 <input> 域 ,也 能 达到 
相同 的 效果 。 不 过 ， 由 于 隐藏 的 <input> 域 不 影响 页 面 布 局 ， 因 此 这 种 方式 在 大 多 数 情况 下 都 是 首选 。 
大 多 数 浏览 器 都 支持 以 直观 的 方式 通过 innerHTML 搬 人 <style> 元 素 ， 例 如 : 


div.innerHTML = "<style type=\"text/css\">body {background-color: red; }</style>"; 


但 在 IE8 及 更 早 版 本 中 ，<style> 也 是 一 个 “没有 作用 域 的 元 素 ”， 因 此 必须 像 下 面 这 样 给 它 前 置 
一 个 “有 作用 域 的 元 素 ”: 


div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>"; 
div.removeChild(div.firstChild); 


并 不 是 所 有 元 素 都 支持 innerHTML 属性 。 不 支持 innerHTML 的 元 素 有 : <col>、<colgroup>、 
<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot> 和 <tr>。 此 


外 ， 在 IE8 及 更 早 版 本 中 ，<title> 元 素 也 没有 innerHTML 属性 。 
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Firefox 对 在 内 容 类 型 为 application/xhtml+xml 的 XHTML 文档 中 设置 innerHTML 
有 严格 的 限制 。 在 XHTML 文档 中 使 用 innerHTML 时 ，XHTML 代码 必须 完全 符合 
要 求 。 如 果 代 码 格式 不 正确 ， 设 置 innerHTML 将 会 静默 地 失败 。 





无 论 什么 时 候 ， 只 要 使 用 innerHTML 从 外 部 插入 HIML ， 都 应 该 首先 以 可 靠 的 方式 处 理 HTML。 
IE8 为 此 提供 了 windqow.tostaticHTML () 方 法 ， 这 个 方法 接收 一 个 参数 , 即 一 个 HTML 字符 串 ; 返回 
一 个 经 过 无 害处 理 后 的 版 本 一 一 从 源 HTML 中 删除 所 有 脚本 节点 和 事件 处 理 程序 属性 。 下 面 就 是 一 个 
例子 : 


























Var text = "<a href=\"#\" onclick=\"alert('hi')\">Click Me</a>"; 
Var sanitized = window.toStaticHTML (text); //Internet Explorer 8 only 
alert (sanitized); //"<a href=\"#\">Click Me</a>" 


这 个 例子 将 一 个 HTML 链接 字符 串 传 给 了 tostaticHTML() 方 法 ,得 到 的 无 害 版 本 中 去 掉 了 
onclick 属性 。 虽 然 目 前 只 有 IE8 原生 支持 这 个 方法 ,但 我 们 还 是 建议 读者 在 通过 innerHTML 插入 代 
人 码 之 前 ， 尽 可 能 先 手工 检查 一 下 其 中 的 文本 内 容 。 

2. outerHTML 属性 

在 读 模式 下 , outerHTML 返回 调用 它 的 元 素 及 所 有 子 节 点 的 HTML 标签 。 在 写 模式 下 , outerHTML 
会 根据 指定 的 HTML 字符 串 创 建新 的 DOM 子 树 ， 然 后 用 这 个 DOM 子 树 完 全 替换 调用 元 素 。 下 面 是 一 
个 例子 。 


<div id="content"> 
CY) <p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
<l1i>Item 1</1i> 
<l1i>Item 2</1i> 
<l1i>Item 3</1i> 
</ul> 
</div> 











OuterHTMLExample01.htm 


如 果 在 <aiv> 元 素 上 调用 outerHTML, 会 返回 与 上 面相 同 的 代码 ,包括 <div> 本 身 。 不过， 由 于 浏 
览 器 解析 和 和 解释 HTML 标记 的 不 同 ， 结 果 也 可 能 会 有 所 不 同 。( 这 里 的 不 同 与 使 用 innerHTML 属性 时 
存在 的 差异 性 质 是 一 样 的 。) 

使 用 outerHTML 属性 以 下 面 这 种 方式 设置 值 : 

div.outerHTML = "<p>This is a paragraph.</p>"; 

这 行 代码 完成 的 操作 与 下 面 这 些 DOM 脚本 代码 一 样 : 


Var p = document .createElement ("p"); 
p.appendChild(document .createTextNode ("This is a paragraph.")); 
div.parentNode.replaceChild(p, div); 


结果 ， 就 是 新 创建 的 <zp> 元 素 会 取代 DOM 树 中 的 <aiv> 元 素 。 
支持 outerHTML 属性 的 浏览 器 有 IE4+、Safari 4+、Chrome 和 Opera 8+。Firefox 7 及 之 前 版 本 都 不 
支持 outerHTML 属性 。 
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3. insertAdjacentHTML() 方 法 

插入 标记 的 最 后 一 个 新 增 方式 是 insertAdjacentHTML() 方 法 。 这 个 方法 最 早 也 是 在 下 中 出 现 的 ， 
它 接收 两 个 参数 : 插入 位 置 和 要 插入 的 HTML 文本 。 第 一 个 参数 必须 是 下 列 值 之 一 : 
口 "beforebegin"， 在 当前 元 素 之 前 插入 一 个 紧邻 的 同辈 元 素 ; 
口 "afterbegin" ,在 当前 元 素 之 下 插入 一 个 新 的 子 元 素 或 在 第 一 个 子 元 素 之 前 再 插入 新 的 子 元 素 ; 
口 "beforeend" ,在 当前 元 素 之 下 插入 一 个 新 的 子 元 素 或 在 最 后 一 个 子 元 素 之 后 再 插入 新 的 子 元 素 ; 
口 "afterend"， 在 当前 元 素 之 后 搬 和 人 一 个 紧邻 的 同辈 元 素 。 

注意 , 这 些 值 都 必须 是 小 写 形式 。 第 二 个 参数 是 一 个 HTML 字符 串 (与 innerHTML 和 outerHTML 
的 值 相同 )， 如 果 浏 览 器 无 法 解析 该 字符 串 ， 就 会 抛 出 错误 。 以 下 是 这 个 方法 的 基本 用 法 示例 。 


// 作 为 前 一 个 同辈 元 素 插入 
element.insertAdjacentHTML ("beforebegin", "<p>Hello world!</p>"); 


























// 作 为 第 一 个 子 元 素 插入 
element.insertAdjacentHTML ("afterbegin", "<p>Hello world!</p>"); 


// 作 为 最 后 一 个 子 元 素 插入 
element.insertAdjacentHTML ("beforeend", "<p>Hello world!</p>"); 





// 作 为 后 一 个 同 佛 元 素 插入 

element.insertAdjacentHTML ("afterend", "<p>Hello world!</p>"); 

支持 insertAdjacentHTML () 方 法 的 浏览 器 有 正 、Firefox 8+、Safari 、Opera 和 Chrome。 

4. 内 存 与 性 能 问题 

使 用 本 节 介 绍 的 方法 替换 子 节 点 可 能 会 导致 浏览 器 的 内 存 占 用 问题 ， 尤 其 是 在 正 中 ， 问 题 更 加 明 
显 。 在 删除 带 有 事件 处 理 程序 或 引用 了 其 他 JavaScript 对 象 子 树 时 ， 就 有 可 能 导致 内 存 占用 问题 。 假 设 
某 个 元 素 有 一 个 事件 处 理 程序 (或 者 引用 了 一 个 JavaScript 对 象 作为 属性 ), 在 使 用 前 述 某 个 属性 将 该 元 
素 从 文档 树 中 删除 后 ， 元 素 与 事件 处 理 程序 (或 JavaScript 对 象 ) 之 间 的 绑 定 关系 在 内 存 中 并 没有 一 并 
删除 。 如 果 这 种 情况 频繁 出 现 ， 页 面 占 用 的 内 存 数量 就 会 明显 增加 。 因 此 ， 在 使 用 innerHTML、 
outerHTML 属性 和 insertaAdjacentHTML () 方法 时 , 最 好 先 手工 删除 要 被 蔡 换 的 元 素 的 所 有 事件 处 理 
程序 和 JavaScript 对 象 属性 〈 第 13 章 将 进一步 讨论 事件 处 理 程序 )。 

不 过 ， 使 用 这 几 个 属性 特别 是 使 用 innerHTML， 仍然 还 是 可 以 为 我 们 提供 很 多 便利 的 。 一 般 
来 说 ， 在 插入 大 量 新 HTML 标记 时 ， 使 用 innerHTML 属性 与 通过 多 次 DOM 操作 先 创建 节点 再 指定 它 
们 之 间 的 关系 相 比 ,效率 要 高 得 多 ,这 是 因为 在 设置 innerHTML 或 outerHTML 时 ,就 会 创建 一 个 HTML 
解析 器 。 这 个 解析 器 是 在 浏览 器 级 别 的 代码 (通常 是 C++ 编写 的 ) 基础 上 运行 的 , 因此 比 执行 JavaScript 
快 得 多 。 不 可 避免 地 ， 创 建 和 销毁 HTML 解析 器 也 会 带 来 性 能 损失 ， 所 以 最 好 能 够 将 设置 innerHTML 
或 outerHTML 的 次 数控 制 在 合理 的 范围 内 。 例 如 ， 下 列 代码 使 用 innerHTML 创建 了 很 多 列表 项 : 


for (var i=0, len=values.length; i < len; i++){ 
ul.innerHTML += "<li>" + values[i] + "</1i>"; // 要 避免 这 种 频繁 操作 ! | 










































































































































































} 

这 种 每 次 循环 都 设置 一 次 innerHTML 的 做 法 效率 很 低 。 而 且 ， 每 次 循环 还 要 从 innerHTML 中 读 
取 一 次 信息 ， 就 意味 着 每 次 循环 要 访问 两 次 innerHTML。 最 好 的 做 法 是 单独 构建 字符 串 ， 然 后 再 一 次 
性 地 将 结果 字符 串 赋 值 给 innerHTML ， 像 下 面 这 样 : 


var itemsHtml = ""; 
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for (var i=0, len=values.length; i < len; I++){ 
itemsHtml += "<li>" + values[i] + "</li>"; 
} 


ul.innerHTML = itemsHtml; 


这 个 例子 的 效率 要 高 得 多 ， 因 为 它 只 对 innerHTML 执行 了 一 次 赋值 操作 。 
11.3.7 ”scrollIntoView() 方 法 


如 何 滚动 页 面 也 是 DOM 规范 没有 解决 的 一 个 问题 。 为 了 解决 这 个 问题 ， 浏 览 右 实现 了 一 些 方法 ， 
以 方便 开发 人 员 更 好 地 控制 页 面 滚动 。 在 各 种 专 有 方法 中 ，HTML5 最 终 选 择 了 scrollIntoView() 作 
为 标准 方法 。 

scrollIntoView() 可 以 在 所 有 HTML 元 素 上 调用 ， 通 过 深 动 浏览 器 窗口 或 某 个 容器 元 素 ， 调 用 
元 素 就 可 以 出 现在 视 口 中 。 如 果 给 这 个 方法 传人 true 作为 参数 ， 或 者 不 传人 任何 参数 ， 那 么 窗口 滚动 
之 后 会 让 调用 元 素 的 顶部 与 视 口 顶部 尽 可 能 平 齐 。 如 果 传 人 false 作为 参数 ， 调 用 元 素 会 尽 可 能 全 部 
出 现在 视 口 中 ,( 可 能 的 话 ， 调 用 元 素 的 底部 会 与 视 口 顶部 平 齐 。) 不 过 顶部 不 一 定 平 齐 ， 例 如 : 




































































// 让 元 素 可 见 

document .forms [0] .scrollIntoView(); 

当 页 面 发 生变 化 时 ,一般 会 用 这 个 方法 来 吸引 用 户 的 注意 力 。 实 际 上 ,为 某 个 元 素 设置 焦点 也 会 导 
致 浏览 器 滚动 并 显示 出 获得 焦点 的 元 素 。 

支持 scrollIntoView() 方 法 的 浏览 器 有 I、Firefox、Safari 和 Opera。 
11.4 专 有 扩展 


虽然 所 有 浏览 器 开发 商都 知晓 坚持 标准 的 重要 性 , 但 在 发 现 某 项 功能 缺失 时 ,这些 开 发 商都 会 一 如 
既往 地 向 DOM 中 添加 专 有 扩展 ， 以 弥补 功能 上 的 不 足 。 表 面 上 看 ， 这 种 各 行 其 事 的 做 法 似乎 不 太 好 ， 
但 实际 上 专 有 扩展 为 Web 开发 领域 提供 了 很 多 重要 的 功能 , 这 些 功 能 最 终 都 在 HTML5 规范 中 得 到 了 标 
准 化 。 

即便 如 此 , 仍然 还 有 大 量 专 有 的 DOM 扩展 没有 成 为 标准 。 但 这 并 不 是 说 它们 将 来 不 会 被 写 进 标准 ， 
而 只 是 说 在 编写 本 书 的 时 候 ， 它 们 还 是 专 有 功能 ， 而 且 只 得 到 了 少数 浏览 器 的 支持 。 


11.4.1 文档 模式 


IE8 引 入 了 一 个 新 的 概念 叫 “文档 模式 ”( document mode )。 页 面 的 文档 模式 决定 了 可 以 使 用 什么 功 
能 。 换 句 话说， 文档 模式 决定 了 你 可 以 使 用 哪个 级 别 的 CSS， 可 以 在 JavaScript 中 使 用 哪些 API， 以 及 
如 何 对 待 文档 类 型 (doctype )。 到 了 IE9， 总 共有 以 下 4 种 文档 模式 。 
口 IE5: 以 混杂 模式 泻 染 页 面 (IE5 的 默认 模式 就 是 混杂 模式 )。IE8 及 更 高 版 本 中 的 新 功能 都 无 法 
使 用 。 
口 IE7: 以 IE7 标准 模式 演 染 页 面 。IE8 及 更 高 版 本 中 的 新 功能 都 无 法 使 用 。 
口 IE8: 以 IE8 标准 模式 泻 染 页 面 。IE8 中 的 新 功能 都 可 以 使 用 ， 因 此 可 以 使 用 Selectors API、 更 多 
CSS2 级 选择 符 和 某 些 CSS3 功能 ， 还 有 一 些 HTML5 的 功能 。 不 过 IE9 中 的 新 功能 无 法 使 用 。 
口 IE9: 以 IE9 标准 模式 演 染 页 面 。IE9 中 的 新 功能 都 可 以 使 用 ， 比 如 ECMAScript 5、 完 整 的 CSS3 

以 及 更 多 HTMLS5 功能 。 这 个 文档 模式 是 最 高 级 的 模式 。 
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要 理解 IE8 及 更 高 版 本 的 工作 原理 ， 必 须 理解 文档 模式 。 

要 强制 浏览 器 以 某 种 模式 演 染 页 面 ， 可 以 使 用 HITP 头 部 信息 X-URA-compatible， 或 通过 等 价 的 
<meta> 标 签 来 设置 : 

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion"> 

注意 ， 这 里 IE 的 版 本 ( IEVersion ) 有 以 下 一 些 不 同 的 值 ， 而 且 这 些 值 并 不 一 定 与 上 述 4 种 文档 
模式 对 应 。 
口 Edage: 始终 以 最 新 的 文档 模式 来 演 染 页 面 。 忽 略 文 档 类 型 声明 。 对 于 IE8， 始 终 保持 以 IE8 标 
准 模式 演 染 页 面 。 对 于 IE9， 则 以 IE9 标准 模式 演 染 页 面 。 
口 EmulateIE9: 如 果 有 文档 类 型 声明 , 则 以 IE9 标准 模式 演 染 页 面 ,否则 将 文档 模式 设置 为 I[E5。 
口 EmulateIE8: 如 果 有 文档 类 型 声明 , 则 以 IE8 标准 模式 演 染 页 面 , 否则 将 文档 模式 设置 为 I[E5。 
口 EmulateIE7: 如 果 有 文档 类 型 声明 , 则 以 IE7 标准 模式 演 染 页 面 ,否则 将 文档 模式 设置 为 I[E5。 
口 9: 强制 以 IE9 标准 模式 浑 染 页 面 ， 忽 略 文档 类 型 声明 。 
口 8: 强制 以 IE8 标准 模式 浑 染 页 面 ， 忽 略 文档 类 型 声明 。 
口 7: 强制 以 IE7 标准 模式 浑 染 页 面 ， 忽 略 文档 类 型 声明 。 
口 5: 强制 将 文档 模式 设置 为 下 5， 忽 略 文档 类 型 声明 。 

比如 ， 要 想 让 文档 模式 像 在 IE7 中 一 样 ， 可 以 使 用 下 面 这 行 代 码 : 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 

如 果 不 打 算 考虑 文档 类 型 声明 ， 而 直接 使 用 IE7 标准 模式 ， 那 么 可 以 使 用 下 面 这 行 代码 : 

<meta http-equiv="X-UA-Compatible" content="IE=7"> 

没有 规定 说 必须 在 页 面 中 设置 x-UA-Compatible。 默 认 情 况 下 ,浏览 器 会 通过 文档 类 型 声明 来 确 
定 是 使 用 最 佳 的 可 用 文档 模式 ， 还 是 使 用 混杂 模式 。 

通过 document .documentMode 属性 可 以 知道 给 定 页 面 使 用 的 是 什么 文档 模式 。 这 个 属性 是 IE8 
中 新 增 的 ， 它 会 返回 使 用 的 文档 模式 的 版 本 号 (在 IE9 中 ， 可 能 返回 的 版 本 号 为 5、7、8、9);: 

Var mode = document .documentMode; 

知道 页 面 采用 的 是 什么 文档 模式 ， 有 助 于 理解 页 面 的 行为 方式 。 无 论 在 什么 文档 模式 下 ， 都 可 以 访 
问 这 个 属性 。 





















































































































































11.4.2 ”children 属性 


1 于 IE9 之 前 的 版 本 与 其 他 浏览 器 在 处 理 文本 节点 中 的 空白 符 时 有 差异 ， 因 此 就 出 现 了 children 
属性 。 这 个 属性 是 HTMLCollection 的 实例 ， 只 包含 元 素 中 同样 还 是 元 素 的 子 节点 。 除 此 之 外 ， 
children 属性 与 chilgNodes 没有 什么 区 别 ， 即 在 元 素 只 包含 元 素 子 节点 时 ， 这 两 个 属性 的 值 相同 。 
下 面 是 访问 childqren 属性 的 示例 代码 : 

Var childCount 

var firstChild 

支持 children 属性 的 浏览 器 有 IE5、Firefox 3.5、Safari2 (但 有 bug )、Safari 3 ( 完全 支持 )、Opera8 
和 Chrome( 所 有 版 本 )。IE8 及 更 早 版 本 的 children 属性 中 也 会 包含 注释 节点 ,但 IE9 之 后 的 版 本 则 
只 返回 元 素 节 点 。 















































element.children.length; 
element.children[0]; 
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11.4.3 contains() 方 法 


在 实际 开发 中 , 经 常 需要 知道 某 个 节点 是 不 是 男 一 个 节点 的 后 代 。 IE 为 此 率先 引入 了 contains () 
方法 , 以 便 不 通过 在 DOM 文档 树 中 查找 即 可 获得 这 个 信息 。 调用 contains () 方 法 的 应 该 是 祖先 节点 ， 
也 就 是 搜索 开始 的 节点 , 这 个 方法 接收 一 个 参数 , 即 要 检测 的 后 代 节 点 。 如果 被 检测 的 节点 是 后 代 节 点 ， 
该 方法 返回 true; 和 否则， 返回 false。 以 下 是 一 个 例子 : 


























alert (document .documentElement .contains (document .body)); //true 

这 个 例子 测试 了 <body> 元 素 是 不 是 <html> 元 素 的 后 代 , 在 格式 正确 的 HTML 页 面 中 , 以 上 代码 返 
回 true。 文 持 contains () 方 法 的 浏览 锅 有 IE 、Firefox 9+、Safari、Opera 和 Chrome。 

使 用 DOM Level 3 compareDocumentPosition() 也 能 够 确定 节点 间 的 关系 。 支 持 这 个 方法 的 浏 
览 器 有 IE9+、Firefox 、Safari 、Opera 9.5+ 和 Chrome。 如 前 所 述 ， 这 个 方法 用 于 确定 两 个 节点 间 的 关系 ， 
返回 一 个 表示 该 关系 的 位 掩 码 ( bitmask )。 下 表 列 出 了 这 个 位 掩 码 的 值 。 



















































































掩 码 节点 关系 
1 无 关 ( 给 定 的 节点 不 在 当前 文档 中 ) 
2 居 前 〈 给 定 的 节点 在 DOM 树 中 位 于 参考 节点 之 前 ) 
4 居 后 ( 给 定 的 节点 在 DOM 树 中 位 于 参考 节点 之 后 ) 
8 包含 〈 给 定 的 节点 是 参考 节点 的 祖先 ) 
16 被 包含 〈 给 定 的 节点 是 参考 节点 的 后 代 ) 


为 模仿 contains () 方 法 ， 应 该 关注 的 是 掩 码 16。 可 以 对 compareDocumentPosition() 的 结果 
执行 按 位 与 ， 以 确定 参考 节点 ( 调用 compareDocumentPosition() 方 法 的 当前 节点 ) 是 否 包 含 给 定 
的 节点 (传人 的 节点 )。 来 看 下 面 的 例子 : 


Var result = document .dqocumentE1lement .compareDocumentPosition(dqocument .bodqy) ; 
alert(!!(result & 16)); 


执行 上 面 的 代码 后 ， 结 果 会 变 成 20 (表示 “ 居 后 ”的 4 加 上 表示 “被 包含 ”的 16 )。 对 掩 码 16 执 
行 按 位 操作 会 返回 一 个 非 零 数值 ， 而 两 个 逻辑 非 操 作 符 会 将 该 数值 转换 成 布尔 值 。 
使 用 一 些 浏览 器 及 能 力 检测 ， 就 可 以 写 出 如 下 所 示 的 一 个 通用 的 contains 函数 : 


function contains (refNode, otherNode)t{ 
Cy) if (typeof refNode.contains == "function" && 
(!client.engine.webkit || client.engine.webkit >= 522) ){ 
return refNode.contains (otherNode); 
} else if (typeof refNode.compareDocumentPosition == "function")t{ 
return !! (refNode.compareDocumentPosition(otherNode) & 16); 
} else { 
Var node = otherNode.parentNode; 
do { 
if (node === refNode){ 
return true; 
} else { 
node = node.parentNode; 

































































} 
} while (node !== null); 
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return false; 


ContainsExample02.htm 


这 个 函数 组 合 使 用 了 三 种 方式 来 确定 一 个 节点 是 不 是 男 一 个 节点 的 后 代 。 函数 的 第 一 个 参数 是 参考 
节点 , 第 二 个 参数 是 要 检查 的 节点 。 在 函数 体内 , 首先 检测 refNode 中 是 否 存在 contains () 方 法 (能 
力 检 测 )。 这 一 部 分 代码 还 检查 了 当前 浏览 器 所 用 的 WebKit 版 本 号 。 如 果 方 法 存在 而 且 不 是 WebKit 
( !client .engine.webkit ), 则 继续 执行 代码 。 否则 , 如 果 浏 览 絮 是 WebKit 且 至 少 是 Safari 3( WebKit 
版 本 号 为 522 或 更 高 )， 那么 也 可 以 继续 执行 代码 。 在 WebKit 版 本 号 小 于 522 的 Safari 浏览 器 中 ， 
contains () 方 法 不 能 正常 使 用 。 

接 下 来 检查 是 否 存 在 compareDocumentPosition() 方 法 ,而 函数 的 最 后 一 步 则 是 自 otherNode 
开始 向 上 遍历 DOM 结构 ,以 递归 方式 取得 parentNode, 并 检查 其 是 否 与 refNode 相等 。 在 文档 树 的 
顶端 ，parentNode 的 值 等 于 nul1， 于 是 循环 结束 。 这 是 针对 旧版 本 Safari 设计 的 一 个 后 备 策略 。 


11.4.4 ”插入 文本 


前 面 介 绍 过 ,IE 原来 专 有 的 插入 标记 的 属性 innerHTML 和 outerHTML 已 经 被 HITMLS 纳入 规范 。 
但 另外 两 个 插入 文本 的 专 有 属性 则 没有 这 么 好 的 运气 ,这 两 个 没有 被 HTML5 看 中 的 属性 是 innerText 


和 outerText。 









































1. innerText 属性 

通过 innertText 属性 可 以 操作 元 素 中 包含 的 所 有 文本 内 容 ， 包 括 子 文档 树 中 的 文本 。 在 通过 
innerText 读 取 值 时 ， 它 会 按照 由 浅 入 深 的 顺序 ， 将 子 文档 树 中 的 所 有 文本 拼接 起 来 。 在 通过 
innerText 写 人 值 时 ， 结 果 会 删除 元 素 的 所 有 子 节 点 , 插入 包含 相应 文本 值 的 文本 节点 。 来 看 下 面 这 
个 HTML 代码 示例 。 


<div id="content"> 
C9 <p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
<l1i>Item 1</1i> 
<l1i>Item 2</1i> 
<liyItem 3</11i 
tl 
</div> 











InnerTextExample01.htm 
对 于 这 个 例子 中 的 <aiv> 元 素 而 言 ， 其 innerText 属性 会 返回 下 列 字符 串 : 











This is a paragraph with a list following it. 
Item 1 
Item 2 
Item 3 


1 于 不 同 浏览 器 处 理 空白 符 的 方式 不 同 ， 因 此 输出 的 文本 可 能 会 也 可 能 不 会 包含 原始 HTML 代码 
中 的 缩 进 。 
使 用 innerText 属性 设置 这 个 <aiv> 元 素 的 内 容 ， 则 只 需 一 行 代码 : 
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CY) div.innerText = "Hello world!"; 


InnerTextExample02.htm 
执行 这 行 代 码 后 ， 页 面 的 HTML 代码 就 会 变 成 如 下 所 示 。 
<div id="content">Hello world!</div> 


设置 innerText 属性 移 除了 先前 存在 的 所 有 子 节点 ,完全 改变 了 DOM 子 树 。 此 外 ,设置 innerText 
属性 的 同时 ， 也 对 文本 中 存在 的 HTML 语法 字符 (小 于 号 、 大 于 号 、 引 号 及 和 号 ) 进行 了 编码 。 再 看 
一 个 例子 。 


div.innerText = "Hello & welcome, <b>\"reader\"!</b>"; 

















InnerTextExample03.htm 





运行 以 上 代码 之 后 ,会 得 到 如 下 所 示 的 结果 。 

<div id="content">Hello &amp; welcome, &lt;b&gt;&quot;reader&quot; I&lt;/b&gt;</div> 

设置 innerText 永远 只 会 生成 当前 节点 的 一 个 子 文本 节点 ， 而 为 了 确保 只 生成 一 个 子 文本 节点 ， 
就 必须 要 对 文本 进行 HTML 编码 。 利 用 这 一 点 , 可 以 通过 innerText 属性 过 滤 掉 HTML 标签 。 方 法 是 
将 innerText 设置 为 等 于 innerText， 这 样 就 可 以 去 掉 所 有 HTML 标签 ， 比 如 : 

















div.innerText = div.innerText; 

执行 这 行 代码 后 ,就 用 原来 的 文本 内 容 蔡 换 了 容器 元 素 中 的 所 有 内 容 ( 包括 子 节点 ,因而 也 就 去 掉 
了 HTML 标签 )。 

支持 innerText 属性 的 浏览 器 包括 IE4+、Safari 3+、Opera 8+ 和 Chrome。Firefox 虽然 不 支持 
innerText， 但 支持 作用 类 似 的 textcontent 属性 。textcontent 是 DOM Level 3 规定 的 一 个 属性 , 其 
他 支持 textcontent 属性 的 浏览 器 还 有 IE9+ 、Safari 3+、Opera 10+ 和 Chrome。 为 了 确保 路 浏览 器 兼 
容 ， 有 必要 编写 一 个 类 似 于 下 面 的 函数 来 检测 可 以 使 用 哪个 属性 。 


function getInnerText (element){ 




















return (typeof element.textContent == "string") ? 
element.textContent : element.innerText; 
} 
function setInnerText (element, text)t{ 
IE (typeof element.textContent == "string")t 
element .textContent = text; 
} else { 
element.innerText = text; 


} 


InnerTextExample05.htm 
这 两 个 函数 都 接收 一 个 元 素 作为 参数 ， 然 后 检查 这 个 元 素 是 不 是 有 textcontent 属性 。 如 果 有 ， 


那么 typeof element.textContent 应 该 是 "string"; 如 果 没 有 ， 那么 这 两 个 函数 就 会 改 为 使 用 
innerText。 可 以 像 下 面 这样 调 用 这 两 个 函数 。 
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SetInnerText (div, "Hello world!"); 
alert (getInnerText (div)); //"Hello world!" 


使 用 这 两 个 函数 可 以 确保 在 不 同 的 浏览 器 中 使 用 正确 的 属性 。 












实际 上 ，innerText 与 textContent 返回 的 内 容 并 不 完全 一 样 。 比 如 ， 
innerText 会 忽略 行内 的 样式 和 脚本 , 而 textcontent 则 会 像 返 回 其 他 文本 一 样 返 
回 行内 的 样式 和 脚本 代码 。 避 免 跨 浏览 器 兼容 问题 的 最 佳 途径 ,就 是 从 不 包含 行内 样 
式 或 行内 脚本 的 DOM 子 树 副本 或 DOM 片段 中 读 取 文本 。 







2. outerText 属性 

除了 作用 范围 扩大 到 了 包含 调用 它 的 节点 之 外 ，outerText 与 innerText 基本 上 没有 多 大 区 别 。 
在 读 取 文本 值 时 ，outerText 与 innerText 的 结果 完全 一 样 。 但 在 写 模式 下 ，outerText 就 完全 不 
同 了 : outerText 不 只 是 替换 调用 它 的 元 素 的 子 节 点 ， 而 是 会 蔡 换 整个 元 素 (包括 子 节点 )。 比 如 : 


div.outerText = "Hello world!"; 
这 行 代码 实际 上 相当 于 如 下 两 行 代码 : 


Var text = document.createTextNode("Hello world!"); 
div.parentNode.replaceChild(text, div); 


本 质 上 ， 新 的 文本 节点 会 完全 取代 调用 outerText 的 元 素 。 此 后 ,该 元 素 就 从 文档 中 被 删除 ,无 
法 访问 。 

支持 outerText 属性 的 浏览 锅 有 IE4+、Safari 3+、Opera 8+ 和 Chrome。 由 于 这 个 属性 会 导致 调用 
它 的 元 素 不 存在 ， 因 此 并 不 常用 。 我 们 也 建议 读者 尽 可 能 不 要 使 用 这 个 属性 。 









































11.4.5 滚动 


如 前 所 述 ，HTMLS 之 前 的 规范 并 没有 就 与 页 面 滚动 相关 的 API 做 出 任何 规定 。 但 HTMLS5 在 将 
scrollIntoView() 纳 入 规范 之 后 , 仍然 还 有 其 他 几 个 专 有 方法 可 以 在 不 同 的 浏览 器 中 使 用 ,下面 列 出 
的 几 个 方法 都 是 对 HTMLElement 类 型 的 扩展 ， 因 此 在 所 有 元 素 中 都 可 以 调用 。 

口 scrollIntoViewIfNeeded(alignCenter) : 只 在 当前 元 素 在 视 口 中 不 可 见 的 情况 下 ， 才 滚 

动 浏览 器 窗口 或 容器 元 素 ， 最 终 让 它 可 见 。 如 果 当 前 元 素 在 视 口 中 可 见 ， 这 个 方法 什么 也 不 做 。 
如 果 将 可 选 的 a1igncenter 参数 设置 为 true, 则 表示 尽量 将 元 素 显 示 在 视 口 中 部 ( 垂直 方向 )。 
Safari 和 Chrome 实现 了 这 个 方法 。 

口 scrollByLines (lineCount): 将 元 素 的 内 容 滚动 指定 的 行 高 ，1inecount 值 可 以 是 正 值 ， 

也 可 以 是 负 值 。Safari 和 Chrome 实现 了 这 个 方法 。 

口 scrollByPages (pageCount): 将 元 素 的 内 容 滚 动 指定 的 页 面 高 度 , 具体 高 度 由 元 素 的 高 度 决 
定 。Safari 和 Chrome 实现 了 这 个 方法 。 

希望 大 家 要 注意 的 是 , scrollIntoView() 和 scrollIntoViewIfNeeded() 的 作用 对 象 是 元 素 的 
容器 ， 而 scrollByLines () 和 scrollByPages () 影 响 的 则 是 元 素 自身 。 下 面 还 是 来 看 几 个 示例 吧 。 

// 将 页 面 主体 滚动 5 行 

document .body.scrollByLines (5); 
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// 在 当前 元 素 不 可 见 的 时 候 ， 让 它 进入 浏览 器 的 视 口 
document . images [0] .scrollIntoViewIfNeeded(); 


// 将 页 面 主 体 往 回 滚动 1 页 
document .body.scrollByPages (-1); 


由 于 scrollIntovView() 是 唯一 一 个 所 有 浏览 器 都 支持 的 方法 ， 因 此 还 是 这 个 方法 最 常用 。 





11.5 小结 


虽然 DOM 为 与 XML 及 HTML 文档 交互 制定 了 一 系列 核心 API, 但 仍然 有 几 个 规范 对 标准 的 DOM 
进行 了 扩展 。 这 些 扩展 中 有 很 多 原来 是 浏览 器 专 有 的 ,但 后 来 成 为 了 事实 标准 ， 于 是 其 他 浏览 器 也 都 提 
供 了 相同 的 实现 。 本 章 介绍 的 三 个 这 方面 的 规范 如 下 。 
口 Selectors API， 定 义 了 两 个 方法 ,证 开 发 人 员 能 够 基于 CSS 选择 符 从 DOM 中 取得 元 素 ， 这 两 个 
方法 是 querySelector() 和 querySelectorAll()。 
口 Element Traversal ， 为 DOM 元 素 定 义 了 额外 的 属性 ， 让 开发 人 员 能 够 更 方便 地 从 一 个 元 素 跳 到 
男 一 个 元 素 。 之 所 以 会 出 现 这 个 扩展 ， 是 因为 浏览 器 处 理 DOM 元 素 间 空白 符 的 方式 不 一 样 。 
口 HTML5, 为 标准 的 DOM 定义 了 很 多 扩展 功能 。 其 中 包括 在 innerHTML 属性 这 样 的 事实 标准 基 

础 上 提供 的 标准 定义 ， 以 及 为 管理 焦点 、 设 置 字符 集 、 深 动 页 面 而 规定 的 扩展 API。 

虽然 目前 DOM 扩展 的 数量 还 不 多 , 但 随 着 Web 技术 的 发 展 ， 相 信 一 定 还 会 涌现 出 更 多 扩展 来 。 很 
多 浏览 器 都 在 试验 专 有 的 扩展 ， 而 这 些 扩 展 一 旦 获得 认可 ， 就 能 成 为 “ 伪 ” 标 准 ， 其 至 会 被 收录 到 规范 
的 更 新 版 本 中 。 
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DOM2 和 DOM3 


本 章 内 容 

口 DOM2 和 DOM3 的 变化 
口 操作 样式 的 DOM API 
口 DOM 遍历 与 范围 








OMI1 级 主要 定义 的 是 HTML 和 XML 文档 的 底层 结构 。DOM2 和 DOM3 级 则 在 这 个 结构 
的 基础 上 引入 了 更 多 的 交互 能 力 ， 也 支持 了 更 高 级 的 XML 特性 。 为 此 ，DOM2 和 DOM3 





级 分 为 许多 模块 〈 模 块 之 间 具 有 某 种 关联 )， 分 别 描述 了 DOM 的 某 个 非常 具体 的 子 集 。 这 些 模块 


如 下 。 


1 


理 














口 DOM2 级 核心 (DOM Level 2 Core ): 在 1 级 核心 基础 上 构建 ， 为 节点 添加 了 更 多 方法 和 属性 。 
口 DOM2 级 视图 (DOM Level 2 Views ): 为 文档 定义 了 基于 样式 信息 的 不 同 视 网 。 

口 DOM2 级 事件 (DOM Level 2 Events ): 说 明了 如 何 使 用 事件 与 DOM 文档 交互 。 

口 DOM2 级 样式 (DOM Level 2 Style ): 定义 了 如 何以 编程 方式 来 访问 和 改变 CSS 样式 信息 。 

口 DOM2 级 遍历 和 范围 ( DOM Level 2 Traversal and Range ): 引入 了 遍历 DOM 文档 和 选择 其 特定 







































































部 分 的 新 接口 。 

口 DOM2 级 HIML (DOM Level2HTML ): 在 1 级 HIML 基础 上 构建 ， 添 加 了 更 多 属性 、 方 法 和 
新 接口 。 

本 章 探 讨 除 “DOM2 级 事件 ”之 外 的 所 有 模块 , “DOM2 级 事件 ”模块 将 在 第 13 章 进 行 全 面 讲解 。 








DOM3 级 又 增加 了 “XPath” 模 块 和 “加 载 与 保存 ” (Load and Save ) 模块 。 这 


些 模 块 将 在 第 18 章 讨 论 。 





2.1 DOM 变化 


DOM2 级 和 3 级 的 日 的 在 于 扩展 DOM API， 以 满足 操作 XML 的 所 有 需求 ,同时 提供 更 好 的 错误 处 
EE 及 特性 检测 能 力 。 从 某 种 意义 上 讲 ， 实 现 这 一 日 的 很 大 程度 意味 着 对 命名 空间 的 支持 。“DOM2 级 核 















































心 ” 没 有 引入 新 类 型 , 它 只 是 在 DOMI1 级 的 基础 上 通过 增加 新 方法 和 新 属性 来 增强 了 既 有 类 型 。“DOM3 
级 核心 ”同样 增强 了 既 有 类 型 ， 但 也 引入 了 一 些 新 类 型 。 




















类 似 地 ,“DOM2 级 视图 ”和 “DOM2 级 HTML” 模 块 也 增强 了 DOM 接口 ， 提 供 了 新 的 属性 和 方 








法 。 由 于 这 两 个 模块 很 小 ， 因 此 我 们 将 把 它们 与 “DOM2 级 核心 ” 放 在 一 起 ,讨论 基本 JavaScript 对 象 
的 变化 。 可 以 通过 下 列 代码 来 确定 浏览 絮 是 否 支 持 这 些 DOM 模块 。 
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Var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0"); 
Var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0"); 
Var supportsDOM2HTML = document.implementation.hasFeature ("HTML", "2.0"); 
Var supportsDOM2Views = document.implementation.hasFeature("Views", "2.0"); 
Var supportsDOM2XML = document.implementation.hasFeature ("XML", "2.0"); 


本 章 只 讨论 那些 已 经 有 浏览 器 实现 的 部 分 , 任何 浏 


讨 论 o 





12.1.1 针对 XML 命名 空间 的 变化 


有 了 XML 命名 空间 ， 不 同 XML 文档 的 元 素 就 可 以 混合 在 一 起 ， 共 同 构成 格式 良好 的 文档 ， 而 不 
必 担 心 发 生命 名 冲突 。 从 技术 上 说 ，HTML 不 支持 XML 命名 空间 ,但 XHTML 支持 XML 命名 空间 。 
因此 ， 本 节 给 出 的 都 是 XHTML 的 示例 。 
命名 空间 要 使 用 xmlns 特性 来 指定 。XHTML 的 命名 空间 是 http:/www.w3.org/1999/xhtml， 在 任何 
格式 良好 XHTML 页 面 中 ， 都 应 该 将 其 包含 在 <ntml> 元 素 中 ， 如 下 面 的 例子 所 示 。 


<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<title>Example XHTML page</title> 
</head> 
<body> 
Hello world! 
</body> 
</html> 


对 这 个 例子 而 言 ， 其 中 的 所 有 元 素 默 认 都 被 视 为 XHTML 命名 空间 中 的 元 素 。 要 想 明 确 地 为 XML 
命名 空间 创建 前 级 ， 可 以 使 用 xmlns 后 跟 冒 号 ， 再 后 跟前 级 ， 如 下 所 示 。 


<xhtml :html xmlns:xhtml="http://www.w3.o0rg/1999/xhtml"> 
<xhtml :head> 
<xhtml :title>Example XHTML page</xhtml:title> 
</xhtml :head> 
<xhtml :body> 
Hello world! 
</xhtml :body> 
</xhtml :html> 


这 里 为 XHTML 的 命名 空间 定义 了 一 个 名 为 xhtml 的 前 级 ， 并 要 求 所 有 XHTML 元 素 都 以 该 前 绥 
F 头 。 有 时 候 为 了 避免 不 同 语言 间 的 冲突 ， 也 需要 使 用 命名 空间 来 限定 特性 ， 如 下 面 的 例子 所 示 。 


<xhtml :html xmlns:xhtml="http://www.w3.o0rg/1999/xhtmil"> 
<xhtml :head> 
<xhtml :title>Example XHTML page</xhtml:title> 
</xhtml :head> 
<xhtml:body xhtml:class="home"> 
Hello world! 
</xhtml :body> 
</xhtml :html> 


这 个 例子 中 的 特性 class 带 有 一 个 xhtml 前 级 。 在 只 基于 一 种 语言 编写 XML 文档 的 情况 下 ， 命 
名 空间 实际 上 也 没有 什么 用 。 不 过 , 在 混合 使 用 两 种 语言 的 情况 下 ， 命 名 空间 的 用 处 就 非常 大 了 。 来 看 
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一 看 下 面 这 个 混合 了 XHTML 和 SVG 语言 的 文档 : 


<html] Xmlns="http://www.w3 .org/1999/Xhtm1"> 


<head> 
<title>Example XHTML page</title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1" 
viewBox="0 0 100 100" style="width:100%; height:100%"> 
<rect x="0" y="0" width="100" height="100" style="fill:red"/> 


</svg> 
</body> 
</html> 


在 这 个 例子 中 ， 通 过 设置 命名 空间 ， 将 <svg> 标 识 为 了 与 包含 文档 无 关 的 元 素 。 此 时 ，<svg> 元 素 的 
所 有 子 元 素 ， 以 及 这 些 元 素 的 所 有 特性 ， 都 被 认为 属于 http://www.w3.org/2000/svg 命名 空间 。 即 
使 这 个 文档 从 技术 上 说 是 一 个 XHTML 文档 ,但 因为 有 了 命名 空间 ， 其 中 的 SVG 代码 也 仍然 是 有 效 的 。 
对 于 类 似 这 样 的 文档 来 说 ,最 有 意思 的 事 发 生 在 调用 方法 操作 文档 节点 的 情况 下 。 例如， 在 创建 一 
个 元 素 时 ,这 个 元 素 属于 哪个 命名 空间 呢 ?” 在 查询 一 个 特殊 标签 名 时 ,应 该 将 结果 包含 在 哪个 命名 空间 
中 呢 ?” “DOM2 级 核心 ”通过 为 大 多 数 DOMI1 级 方法 提供 特定 于 命名 空间 的 版 本 解决 了 这 个 问题 。 
1. Node 类 型 的 变化 
在 DOM2 级 中 ，Node 类 型 包含 下 列 特定 于 命名 空间 的 属性 。 
口 localName: 不 带 命 名 空间 前 级 的 节点 名 称 。 
口 namespaceURI: 命名 空间 URI 或 者 (在 未 指定 的 情况 下 是 ) nul1。 
口 prefix: 命名 空间 前 缀 或 者 ( 在 未 指定 的 情况 下 是 ) nul1。 
当 节 点 使 用 了 命名 空间 前 级 时 ， 其 nodeName 等 于 prefix+":"+ localName。 以 下 面 的 文档 为 例 : 
































<html] xmlns="http://www.w3.o0org/1999/xhtml"> 
CY) <head> 
<title>Example XHTML page</title> 
</head> 
<body> 


<s:svg xmlns:s="http://www.w3.0rg/2000/svg" version="1.1" 
viewBox="0 0 100 100" style="width:100%; height:100%"> 
<s:rect x="0" y="0" width="100" height="100" style="fill:red"/> 
</s:svg> 
</body> 
</html> 


NamespaceExample.xml 


对 于 <html> 元 素来 说 , 它 的 localName 和 tagName 是 "html",namespaceURI 是 "http://www. 
w3 .org/1999/xhtml"， 而 prefix 是 null1。 对 于 <s :svg> 元 素 而 言 ， 它 的 localName 是 "svg"， 
tagName 是 "s:svg"，namespaceURI 是 "http://www.w3.org/2000/svg"， 而 prefix 是 "s"。 

DOM3 级 在 此 基础 上 更 进一步 ， 又 引入 了 下 列 与 命名 空间 有 关 的 方法 。 

D isDefaultNamespace (namespaceURI): 在 指定 的 namespaceURI 是 当前 节点 的 默认 命名 空 
间 的 情况 下 返回 true。 
口 lookupNamespaceURI (prefix): 返回 给 定 prefix 的 命名 空间 。 

回 给 定 namespaceURI 的 前 级 。 

















D lookupPrefix (namespaceURI): 
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针对 前 面 的 例子 ， 可 以 执行 下 列 代码 : 
alert (document .body.isDefaultNamespace ("http://www.w3.0org/1999/xhtml"); //true 


// 假 设 svg 中 包含 着 对 <s :svg> 的 引用 
alert (svg.lookupPrefix("http: i hd da /ee 
alert (svg.lookupNamespaceURI("s")); //"http://www.w3.org/2000/svg" 


在 取得 了 一 个 节点 ,但 不 知道 该 节点 与 文档 其 他 元 素 之 间 关 系 的 情况 下， 这些 方 法 是 很 有 用 的 。 

2. Document 类 型 的 变化 

DOM2 级 中 的 Document 类 型 也 发 生 了 变化 ， 包 含 了 下 列 与 命名 空间 有 关 的 方法 。 

口 createElementNS (namespaceURI,，tagName) : 使 用 给 定 的 tagName 创建 一 个 属于 命名 空 

间 namespaceURI 的 新 元 素 。 

口 createAttributeNS (namespaceURI, attributeName): 使 用 给 定 的 attributeName 创 

建 一 个 属于 命名 空间 namespaceURI 的 新 特性 。 

D getElementsByTagNameNSs (namespaceURI, tagName) : 返回 
的 tagName 元 素 的 NodeList。 

使 用 这 些 方 法 时 需要 传人 表示 命名 空间 的 URI ( 而 不 是 命名 空间 前 级 )， 如 下 面 的 例子 所 示 。 

/ /创建 一 个 新 的 SVG 元 素 


Var svg = document.createElementNS ("http://www.w3.o0rg/2000/svg","svg"); 






































eal 


命名 空间 namespaceURI 











/ /创建 一 个 属于 某 个 命名 空间 的 新 特性 


Var att = document.createAttributeNS ("http://www.somewhere.com", "random"); 


// 取 得 所 有 XHTML 元 素 
Var elems = document .getElementsByTagNameNS ("http://www.w3.o0org/1999/xhtml", "*"); 


只 有 在 文档 中 存在 两 个 或 多 个 命名 空间 时 ， 这 些 与 命名 空间 有 关 的 方法 才 是 必需 的 。 

3. Element 类 型 的 变化 

“DOM2 级 核心 ”中 有 关 Element 的 变化 ， 主 要 涉及 操作 特性 。 新 增 的 方法 如 下 。 

D getAttributeNsS (namespaceURI, 10calName) : 取得 属于 命名 空间 namespaceURI 日 名 为 

localName 的 特性 。 

D getAttripbuteNodeNSs (namespaceURI, 10calName) : 取得 属于 命 证 名 空间 namespaceURI 日 

名 为 1ocalName 的 特性 节点 。 

口 getElementsByTagNameNS (namespaceURI，tagName) : 返回 属于 命名 空间 namespaceURI 

的 tagName 元 素 的 NodeList。 

D hasAttributeNS (namespaceURI, 10calName): 确定 当前 元 素 是 否 有 一 个 名 为 10calName 
的 特性 ， 而 且 该 特性 的 命名 空间 是 namespaceURI。 注 意 ,“DOM2 级 核心 ”也 增加 了 一 个 
hasAttribute() 方 法 ， 用 于 不 考虑 命名 空间 的 情况 。 

口 removeAttriubteNS (namespaceURI, 1ocalName) : 删除 属于 命名 空间 namespaceURI 是 名 

为 localName 的 特性 。 

口 setALtributeNS (namespaceURI, qualifiedName, value): 设置 属于 命名 空间 namespace- 

URI 日 名 为 qualifiedName 的 特性 的 值 为 value。 

口 setAttributeNodeNS (attNode) : 设置 属于 命名 空间 namespaceURI 的 特性 节点 。 
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除了 第 一 个 参数 之 外 ， 这 些 方 法 与 DOMI1 级 中 相关 方法 的 作用 相同 ; 第 一 个 参数 始终 都 是 一 个 命 


名 空间 URI。 
4. NamedNodeMap 类 型 的 变化 
NamedNodeMap 类 型 也 新 增 了 下 列 与 命名 空间 有 关 的 方法 。 由 于 特性 是 通过 NamedNodeMap 表示 
的 ， 因 此 这 些 方法 多 数 情况 下 只 针对 特性 使 用 。 
: 取得 属于 命名 空间 namespaceURI 且 名 为 


口 getNamedqItemNS (namespaceURI, lo0calName): 
































localName 的 项 。 
口 removeNamedItemNS (namespaceURI, 1ocalName) : 移 除 属于 命名 空间 namespaceURI 日 名 

















为 localName 的 项 。 
口 setNamedItemNS (node) : 添加 node， 这 个 节点 已 经 事先 指定 了 命名 空间 信息 。 


日 于 一 般 都 是 通过 元 素 访问 特性 ， 所 以 这 些 方法 很 少 使 用 。 


























12.1.2 ”其 他 方面 的 变化 
DOM 的 其 他 部 分 在 “DOM2 级 核心 ”中 也 发 生 了 一 些 变化 。 这些 变化 与 XML 命名 空间 无 关 , 而 是 


更 倾向 于 确保 API 的 可 靠 性 及 完整 性 。 


1. DocumentType 类 型 的 变化 
DocumentType 类 型 新 增 了 3 个 属性 : publicId、systemId 和 internalSubset。 其 中 ， 前 两 


个 属性 表示 的 是 文档 类 型 声明 中 的 两 个 信息 段 ， 这 两 个 信息 段 在 DOMI1 级 中 是 没有 办 法 访问 到 的 。 以 
下 面 的 HTML 文档 类 型 声明 为 例 。 


<!DOCTYPE HTML PUBLIC "“-//W3C//DTD HIML 4.01//EN" 
"http://www.w3.o0rg/TR/html4/strict.dtd"> 
































对 这 个 文档 类 型 声明 而 言 ,publicId 是 "-//W3C//DTD HTML 4.01//EN", 而 systemId 是 "http: 
在 支持 DOM2 级 的 浏览 器 中 ， 应 该 可 以 运行 下 列 代码 。 














//www.w3.o0rg/TR/html4/strict.dtd"。 


alert (document .doctype.publicId); 
alert (document .doctype.systemId); 


实际 上 ， 很 少 需要 在 网 页 中 访问 此 类 信息 。 
最 后 一 个 属性 internalSubset， 用 于 访问 包含 在 文档 类 型 声明 中 的 额外 定义 ， 以 下 面 的 代码 为 例 。 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.o0rg/TR/xhtml1/DTD/xhtmll-strict.dtd" 

[<!ELEMENT name (#PCDATA)>] > 

访问 aocument .doctype.internalSubset 将 得 到 "<!ELEMENT name (#PCDATA)>"。 这 种 内 部 
子 集 ( internal subset ) 在 HTML 中 极 少 用 到 ， 在 XML 中 可 能 会 更 常见 一 些 。 


2. Document 类 型 的 变化 


Document 类 型 的 变化 中 唯一 与 命名 空间 无 关 的 方法 是 importNode () 。 这 个 方法 的 用 途 是 从 一 个 
文档 中 取得 一 个 节点 ， 然 后 将 其 导入 到 男 一 个 文档 ， 使 其 成 为 这 个 文档 结构 的 一 部 分 需要 注意 的 是 ， [二 
每 个 节点 都 有 一 个 ownerDocument 属性 ， 表 示 所 属 的 文档 。 如 果 调 用 appendchilda() 时 传人 的 节点 
属于 不 同 的 文档 ( ownerDocument 属性 的 值 不 一 样 ), 则 会 导致 错误 。 但 在 调用 importNode () 时 传人 
不 同文 档 的 节点 则 会 返回 一 个 新 节点 ， 这 个 新 节点 的 所 有 权 归 当前 文档 所 有 。 

说 起 来 ，importNode () 方 法 与 Blement 的 cloneNode() 方 法 非常 相似 ， 它 接受 两 个 参数 : 要 复 
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制 的 节点 和 一 个 表示 是 否 复 制 子 节点 的 布尔 值 。 返回 的 结果 是 原来 节点 的 副本 , 但 能 够 在 当前 文档 中 使 
用 。 来 看 下 面 的 例子 : 


var newNode = document.importNode (oldNode，true); // 导 入 节点 及 其 所 有 子 节点 
document .body.appendChild (newNode); 


这 个 方法 在 HTML 文档 中 并 不 常用 ， 在 XML 文档 中 用 得 比较 多 ( 更 多 讨论 请 参见 第 18 章 )。 

“DOM2 级 视图 ”模块 添加 了 一 个 名 为 Gefaultview 的 属性 ， 其 中 保存 着 一 个 指针 ， 指 向 拥有 给 
定 文档 的 窗口 〈 或 框架 )。 除 此 之 外 ,“ 视 图 ”规范 没有 提供 什么 时 候 其 他 视图 可 用 的 信息 ， 因 而 这 是 唯 
一 一 个 新 增 的 属性 。 除 正之 外 的 所 有 浏览 器 都 支持 defaultview 属性 。 在 正 中 有 一 个 等 价 的 属性 名 
叫 parentWindow ( Opera 也 支持 这 个 属性 )。 因 此 ， 要 确定 文档 的 归属 窗口 ， 可 以 使 用 以 下 代码 。 

var parentWindow = document.defaultView || document .parentWindow; 

除了 上 述 一 个 方法 和 一 个 属性 之 外 ,“DOM2 级 核心 ”还 为 document . implementation 对 象 规定 了 
两 个 新 方法 : createDocumentType () 和 createDocument () 。 前 者 用 于 创建 一 个 新 的 DocumentType 
节点 ， 接 受 3 个 参数 : 文档 类 型 名 称 、publicId、systemId。 例 如 ， 下 列 代码 会 创建 一 个 新 的 HTML 
4.01 Strict 文档 类 型 。 

var doctype = document.implementation.createDocumentType ("html", 


"-//W3C//DTD HTML 4.01//EN", 
"http://www.w3.o0rg/TR/html4/strict.dtd"); 


由 于 既 有 文档 的 文档 类 型 不 能 改变 ， 因 此 createDocumentType () 只 在 创建 新 文档 时 有 用 ; 创建 
新 文档 时 需要 用 到 createDocument () 方 法 。 这 个 方法 接受 3 个 参数 : 针对 文档 中 元 素 的 namesp- 
aceURI、 文 档 元 素 的 标签 名 、 新 文档 的 文档 类 型 。 下 面 这 行 代 码 将 会 创建 一 个 空 的 新 XML 文档 。 


Var doc = document.implementation.createDocument ("", "root", null); 


这 行 代码 会 创建 一 个 没有 命名 空间 的 新 文档 ， 文 档 元 素 为 <root>， 而 有 旦 没有 指定 文档 类 型 。 要 想 
创建 一 个 XHTML 文档 ， 可 以 使 用 以 下 代码 。 
Var doctype = document.implementation.createDocumentType ("html", 


" -//W3C//DTD XHTML 1.0 Strict//EN", 
"http://www.w3.org/TR/xhtml1l/DTD/xhtml1l-strict.dtd"); 






































































































































Var doc = document.implementation.createDocument ("http://www.w3.o0org/1999/xhtml", 
"html", doctype); 


这 样 ， 就 创建 了 一 个 带 有 适当 命名 空间 和 文档 类 型 的 新 XHTML 文档 。 不 过 ,新 文档 当前 只 有 文档 
元 素 <html>， 剩 下 的 所 有 元 素 都 需要 继续 添加 。 

“DOM2 级 HTML” 模 块 也 为 aocument .implementation 新 增 了 一 个 方法 ， 名 叫 createHTML- 
Document () 。 这 个 方法 的 用 途 是 创建 一 个 完整 的 HTML 文档 ,包括 <html>、<head>、<title> 和 
<body> 元 素 。 这 个 方法 只 接受 一 个 参数 ， 即 新 创建 文档 的 标题 ( 放 在 <title> 元 素 中 的 字符 串 )， 返 回 
新 的 HTML 文档 ， 如 下 所 示 : 

Var htmldoc = document.implementation.createHTMLDocument ("New Doc"); 


alert (htmldoc.title); //"New Doc" 
alert (typeof htmldoc.body); //"object" 


























CreateHTMLDocumentExample.htm 
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通过 调用 createHTMLDocument () 创建 的 这 个 文档 , 是 HTMLDocument 类 型 的 实例 ,因而 具有 该 
类 型 的 所 有 属性 和 方法 ,包括 title 和 body 属性 。 只 有 Opera 和 Safari 支持 这 个 方法 。 

3. Node 类 型 的 变化 

Node 类 型 中 唯一 与 命名 空间 无 关 的 变化 ,就 是 添加 了 issupported() 方 法 ,与 DOMI1 级 为 aocum- 
ent .implementation 引信 的 hasFeature() 方 法 类 似 , issupported() 方 法 用 于 确定 当前 节点 具有 
什么 能 力 。 这 个 方法 也 接受 相同 的 两 个 参数 : 特性 名 和 特性 版 本 号 。 如 果 浏 览 器 实现 了 相应 特性 ， 而且 
能 够 基于 给 定 节点 执行 该 特性 ，issupported() 就 返回 true。 来 看 一 个 例子 : 


if (document.body.isSupported("HTML", "2.0"))f{ 
// 执 行 只 有 "DOM2 级 HTML" 才 支持 的 操作 
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} 


由 于 不 同 实现 在 决定 对 什么 特性 返回 true 或 false 时 并 不 一 致 ,这 个 方法 同样 也 存在 与 hasFeature() 
方法 相同 的 问题 。 为 此 ， 我 们 建议 在 确定 某 个 特性 是 否 可 用 时 ， 最 好 还 是 使 用 能 力 检测 。 

DOM3 级 引入 了 两 个 辅助 比较 节点 的 方法 : issameNode () 和 isEqualNode () 。 这 两 个 方法 都 接受 
一 个 节点 参数 ,并 在 传人 节点 与 引用 的 节点 相同 或 相等 时 返回 true。 所 谓 相 同 , 指 的 是 两 个 节点 引用 的 
是 同一 个 对 象 。 所 谓 相 等 ， 指 的 是 两 个 节点 是 相同 的 类 型 ， 具 有 相等 的 属性 (nodeName、nodeValue， 
等 等 ), 而 且 它们 的 attributes 和 chilgNodes 属性 也 相等 ( 相同 位 置 包含 相同 的 值 ), 来 看 一 个 例子 。 


















































Var divl = document.createElement ("div"); 
divil.setAttribute("class", "box"); 

Var div2 = document.createElement ("div"); 
div2.setAttribute("class", "box"); 

alert (divi.isSameNode (div1l)); //true 
alert (divl1.isEqualNode (div2)); //true 
alert (divil.isSameNode (div2)); //false 





这 里 创建 了 两 个 具有 相同 特性 的 <aiv> 元 素 。 这 两 个 元 素 相 等 ， 但 不 相同 。 

DOM3 级 还 针对 为 DOM 节点 添加 额外 数据 引入 了 新 方法 。 其 中 , setUserData() 方 法 会 将 数据 指 
定 给 节点 ， 它 接受 3 个 参数 : 要 设置 的 键 、 实 际 的 数据 〈 可 以 是 任何 数据 类 型 ) 和 处 理 函 数 。 以 下 代码 
可 以 将 数据 指定 给 一 个 节点 。 


document .body.setUserData("name", "Nicholas", function(){}); 
然后 ,使 用 getuserpata() 并 传人 相同 的 键 ， 就 可 以 取得 该 数据 ， 如 下 所 示 : 
Var Value = document .body.getUserData("name"); 


传人 setUserData() 中 的 处 理 函 数 会 在 带 有 数据 的 节点 被 复制 、 删 除 、 重 命名 或 引入 一 个 文档 时 
调用 ， 因 而 你 可 以 事先 决定 在 上 述 操作 发 生 时 如 何 处 理 用 户 数据 。 处 理 函 数 接受 5 个 参数 : 表示 操作 类 
型 的 数值 (1 表示 复制 ，2 表示 导入 ，3 表示 删除 ，4 表示 重 命 名 )、 数 据 键 、 数 据 值 、 源 节点 和 目标 节 
点 。 在 删除 节点 时 ， 源 节点 是 nu11; 除 在 复制 节点 时 ， 目 标 节 点 均 为 aul1。 在 函数 内 部 ， 你 可 以 决定 
如 何 存储 数据 。 来 看 下 面 的 例子 。 



































Var div = document.createElement ("div"); 
div.setUserData("name", "Nicholas", function(operation, key, value, src, dest)t 
if (operation == 1){ 
dest.setUserData(key, value, function(){}); } 
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全 


Var newDiV = div.cloneNode (true); 
alert (newDiv.getUserData("name")); //"Nicholas" 


UserDataExample.htm 


这 里 ， 先 创建 了 一 个 <aiv> 元 素 ， 然 后 又 为 它 添加 了 一 些 数 据 (用户 数 据 )。 在 使 用 cloneNode () 
复制 这 个 元 素 时 ， 就 会 调用 处 理 函 数 ， 从 而 将 数据 自动 复制 到 了 副本 节点 。 结 果 在 通过 副本 节点 调用 
getUserData() 时 ， 就 会 返回 与 原始 节点 中 包含 的 相同 的 值 。 

4. 框架 的 变化 
框架 和 内 髋 框架 分 别 用 HTMLFrameElement 和 HTMLIFrameElement 表示 ,它们 在 DOM2 级 中 都 有 
了 一 个 新 属性 ， 名 叫 contentDocument。 这 个 属性 包含 一 个 指针 ， 指 向 表示 框架 内 容 的 文档 对 象 。 在 此 
之 前 ,无 法 直接 通过 元 素 取得 这 个 文档 对 象 ( 只 能 使 用 frames 集合 )。 可 以 像 下 面 这 样 使 用 这 个 属性 。 

Var iframe = document .getElementById("myIframe"); 

Var iframeDoc = iframe.contentDocument; // 在 IE8 以 前 的 版 本 中 无 效 
























































TIFrameElementExample.htm 


由 于 contentDocument 属性 是 Document 类 型 的 实例 ， 因 此 可 以 像 使 用 其 他 HTML 文档 一 样 使 
用 它 ， 包 括 所 有 属性 和 方法 。Opera、Firefox 、Safari 和 Chrome 支持 这 个 属性 。IE8 之 前 不 支持 框架 中 
的 contentDocument 属性 , 但 支持 一 个 名 叫 contentwindow 的 属性 , 该 属性 返回 框架 的 window 对 
象 ， 而 这 个 window 对 象 义 有 一 个 document 属性 。 因 此 ,要 想 在 上 述 所 有 浏览 器 中 访问 内 骨 框 架 的 文 
档 对 象 ， 可 以 使 用 下 列 代码 。 


Var iframe = document .getElementById("myIframe"); 
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 












































TIFrameElementExample2.htm 


所 有 浏览 器 都 支持 contentwindow 属性 。 













访问 框架 或 内 谈 框 架 的 文档 对 象 要 受到 跨 域 安全 策略 的 限制 。 如 果 某 个 框架 中 的 
页 面 来 自 其 他 域 或 不 同 子 域 ， 或 者 使 用 了 不 同 的 协议 ， 那 么 要 访问 这 个 框架 的 文档 对 
象 就 会 导致 错误 。 





12.2 ”样式 


在 HIML 中 定义 样式 的 方式 有 3 种 : 通过 <1ink/> 元 素 包 含 外 部 样式 表 文 件 、 使 用 <style/> 元 素 
定义 租 入 式样 式 , 以 及 使 用 style 特性 定义 针对 特定 元 素 的 样式 。“DOM2 级 样式 ”模块 围绕 这 3 种 应 用 
样式 的 机 制 提供 了 一 套 API。 要 确定 浏览 如 是 否 支持 DOM2 级 定义 的 CSS 能力， 可 以 使 用 下 列 代 码 。 


Var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0"); 
Var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0"); 
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12.2.1 访问 元 素 的 样式 


任何 支持 style 特性 的 HTML 元 素 在 JavaScript 中 都 有 一 个 对 应 的 style 属性 。 这 个 style 对 象 
是 cSsstyleDeclaration 的 实例 , 包含 着 通过 HTML 的 style 特性 指定 的 所 有 样式 信息 , 但 不 包含 
与 外 部 样式 表 或 矢 人 样式 表 经 层 释 而 来 的 样式 。 在 style 特性 中 指定 的 任何 CSS 属性 都 将 表现 为 这 个 
style 对 象 的 相应 属性 。 对 于 使 用 短 划 线 (分隔 不 同 的 词汇 ， 例 如 background-image ) 的 CSS 属性 
名 ， 必 须 将 其 转换 成 驼峰 大 小 写 形 式 ， 才 能 通过 JavaScript 来 访问 。 下 表 列 出 了 几 个 常见 的 CSS 属性 及 
其 在 style 对 象 中 对 应 的 属性 名 。 



































CSS 属 性 JavaScript 属 性 
background-image style.backgroundImage 
color style.color 
display style.display 
font-family style.fontFamily 


I 








all 


多 数 情况 下 , 都 可 以 通过 简单 地 转换 属性 名 的 格式 来 实现 转换 。 其 中 一 个 不 能 直接 转换 的 CSS 属性 
就 是 float。 由 于 float 是 JavaScript 中 的 保留 字 ， 因 此 不 能 用 作 属 性 名 。“DOM2 级 样式 ”规范 规定 
样式 对 象 上 相应 的 属性 名 应 该 是 cssFloat; Firefox、Safari、Opera 和 Chrome 都 支持 这 个 属性 ， 而 下 
支持 的 则 是 styleFloat。 

只 要 取得 一 个 有 效 的 DOM 元 素 的 引用 , 就 可 以 随时 使 用 JavaScript 为 其 设置 样式 。 以 下 是 几 个 例子 。 


var myDiv = document .getElementById("myDiV" ) ; 






































/ /设置 背景 颜色 
myDiv.style.backgroundColor = "red"; 
// 改 变 大 小 

myDiv.style.width = "100px"; 
myDiv.style.height = "200px"; 

// 指 定 边框 

myDiv.style.border = "lpx solid black"; 


在 以 这 种 方式 改变 样式 时 ， 元 素 的 外 观 会 自动 被 更 新 。 










在 标准 模式 下 ， 所 有 度量 值 都 必须 指定 一 个 度量 单位 。 在 混杂 模式 下 ， 可 以 将 
style.width 设置 为 "20" ,浏览 器 会 假设 它 是 "20px"; 但 在 标准 模式 下 ， 将 
style.width 设置 为 "20" 会 导致 被 忽略 一 因为 没有 度量 单位 。 在 实践 中 ， 最 好 始 
终 都 指定 度量 单位 。 





通过 style 对 象 同样 可 以 取得 在 style 特性 中 指定 的 样式 。 以 下 面 的 HTML 代码 为 例 。 
<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div> 


在 style 特性 中 指定 的 样式 信息 可 以 通过 下 列 代码 取得 。 





alert (myDiv.style.backgroundColor); //"blue" 
alert (myDiv.style.width); A LOB 
alert (myDiv.style.height); // 25D" 
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如 果 没 有 为 元 素 设置 style 特性 ， 那 么 style 对 象 中 可 能 会 包含 一 些 默认 的 值 ， 但 这 些 值 并 不 能 
准确 地 反映 该 元 素 的 样式 信息 。 

1. DOM 样式 属性 和 方法 

“DOM2 级 样式 ”规范 还 为 style 对 象 定义 了 一 些 属 性 和 方法 .这 些 属性 和 方法 在 提供 元 素 的 style 
特性 值 的 同时 ， 也 可 以 修改 样式 。 下 面 列 出 了 这 些 属性 和 方法 。 
口 cssText: 如 前 所 述 ， 通 过 它 能 够 访问 到 style 特性 中 的 CSS 代码 。 
口 length: 应 用 给 元 素 的 CSS 属性 的 数量 。 
口 parentRule: 表示 CSS 信息 的 cssRule 对 象 。 本 节 后 面 将 讨论 cssRule 类 型 。 
口 getPropertyCSSValue (propertyName) : 返回 包含 给 定 属性 值 的 cssvalue 对 象 。 
口 getPropertyPriority (propertyName): 如 果 给 定 的 属性 使 用 了 ! important 设置 , 则 返回 
"important"; 否则 ， 返 回 空 字 符 串 。 
口 getPropertyValue (propertyName) : 返回 给 定 属性 的 字符 串 值 。 
口 item(index) : 返回 给 定位 置 的 CSS 属性 的 名 称 。 
口 removeProperty (propertyName) : 从 样式 中 删除 给 定 属性 。 
口 setProperty (propertyName, value, priority) : 将 给 定 属性 设置 为 相应 的 值 , 并 加 上 优先 

权 标 志 ("important "或 者 一 个 空 字符 串 )。 

通过 cssText 属性 可 以 访问 style 特 性 中 的 CSS 代 码 , 在 读 取 模式 下 ,cssText 返回 浏览 器 对 style 
特性 中 CSS 代码 的 内 部 表示 。 在 写 人 模式 下 , 赋 给 cssText 的 值 会 重 写 整个 style 特性 的 值 ; 也 就 是 
说 ， 以 前 通过 style 特性 指定 的 样式 信息 都 将 丢失 。 例 如 ， 如 果 通 过 style 特性 为 元 素 设置 了 边框 ， 
然后 再 以 不 包含 边框 的 规则 重 写 cssText ， 那 么 就 会 抹 去 元 素 上 的 边框 。 下 面 是 使 用 cssText 属性 的 
一 个 例子 。 


myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; 
alert (myDiv.style.cssText); 


设置 cssText 是 为 元 素 应 用 多 项 变化 最 快捷 的 方式 ， 因 为 可 以 一 次 性 地 应 用 所 有 变化 。 

设计 length 属性 的 目的 , 就 是 将 其 与 item() 方 法 配套 使 用 , 以 便 迭 代 在 元 素 中 定义 的 CSS 属性 。 
在 使 用 length 和 item() 时 ，style 对 象 实际 上 就 相当 于 一 个 集合 ， 都 可 以 使 用 方 括号 语法 来 代替 
item() 来 取得 给 定位 置 的 CSS 属性， 如 下 面 的 例子 所 示 。 


for (var i=0, len=myDiv.style.length; i < len; i++){ 
alert (myDiv.style[i]); // 或 者 myDiv.style.item(i) 



















































































































































































上 1 





























} 

无 论 是 使 用 方 括号 语法 还 是 使 用 item() 方 法 ， 都 可 以 取得 CSS 属性 名 ( "background-color",， 
不 是 "backgroundColor" )。 然 后 ， 就 可 以 在 getPropertyValue () 中 使 用 取得 的 属性 名 进一步 取得 
属性 的 值 ， 如 下 所 示 。 


Var prop, value, i, len; 

for (i=0, len=myDiv.style.length; i < len; i++){ 
prop = myDiv.style[i]; // 或 者 myDiv.style.item(i) 
value = myDiv.style.getPropertyValue (prop); 
alert(prop + " : "+ value); 














} 
getPropertyValue () 方 法 取得 的 始终 都 是 CSS 属性 值 的 字符 串 表 示 。 如 果 你 需要 更 多 信息 ， 可 
以 使 用 getPropertycssvalue() 方 法 ， 它 返回 一 个 包含 两 个 属性 的 cssvalue 对 象 ， 这 两 个 属性 分 
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别 是 : cssText 和 cssVvalueType。 其 中 , cssText 属性 的 值 与 getPropertyValue() 返 回 的 值 相同 ， 
而 cssValueType 属性 则 是 一 个 数值 常量 ， 表 示 值 的 类 型 : 0 表示 继承 的 值 ，1 表示 基本 的 值 ，2 表示 
值 列 表 ，3 表示 自 定义 的 值 。 以 下 代码 既 输 出 CSS 属性 值 ， 也 输出 值 的 类 型 。 


Var prop, value, i, len; 
CC for (i=0, len=myDiv.style.length; i < len; i++){ 
prop = myDiv.style[i]; // 或 者 myDiv.style.item(i) 
value = myDiv.style.getPropertyCSSValue (prop); 
alert(prop + " : " + value.cssText + " (" + Vvalue.cssValueType + ")"); 











DOMStyleObjectExample.htm 


在 实际 开发 中 , getPropertyCssvalue() 使 用 得 比 getPropertyValue () 少 得 多 。IE9+ 、Safarie 
3+ 以 及 Chrome 支持 这 个 方法 。Firefox 7 及 之 前 版 本 也 提供 这 个 访问 ,但 调用 总 返回 nul1。 
要 从 元 素 的 样式 中 移 除 某 个 CSS 属性 ， 需 要 使 用 removeProperty() 方 法 。 使 用 这 个 方法 移 除 一 
个 属性 ， 意 味 着 将 会 为 该 属性 应 用 默认 的 样式 ( 从 其 他 样式 表 经 层 著 而 来 )。 例 如 ， 要 移 除 通过 style 
特性 设置 的 borger 属性 ， 可 以 使 用 下 面 的 代码 。 


myDIV.Style.zemoveProperty("bordqer" ) ; 


在 不 确定 某 个 给 定 的 CSS 属性 拥有 什么 默认 值 的 情况 下 , 就 可 以 使 用 这 个 方法 。 只 要 移 除 相应 的 属 
就 可 以 为 元 素 应 用 默认 值 。 















































这 


除非 另 有 说 明 ， 本 节 讨 论 的 属性 和 方法 都 得 到 了 IE9+、Firefox、Safari、Opera 9+ 


以 及 Chrome 的 支持 。 





2. 计算 的 样式 
虽然 style 对 象 能 够 提供 支持 style 特性 的 任何 元 素 的 样式 信息 ， 但 它 不 包含 那些 从 其 他 样式 表 
层 革 而 来 并 影响 到 当前 元 素 的 样式 信息 。“DOM2 级 样式 ”增强 了 document .defaultView， 提 供 了 
getComputedStyle() 方 法 。 这 个 方法 接受 两 个 参数 : 要 取得 计算 样式 的 元 素 和 一 个 伪 元 素 字符 串 ( 例 
如 " :after" )。 如 果 不 需 要 伪 元 素 信息 ， 第 二 个 参数 可 以 是 nu11。getcomputedstyle () 方 法 返回 一 
个 cssstyleDeclaration 对 象 (与 style 属性 的 类 型 相同 )， 其 中 包含 当前 元 素 的 所 有 计算 的 样式 。 
以 下 面 这 个 HTML 页 面 为 例 。 
<!DOCTYPE html> 
CY) <html> 
<head> 
<title>Computed Styles Example</title> 
<style type="text/css"> 
#myDiv { 
background-color: blue; 


width: 100px; 
height: 200px; 



























































} 
</style> 
</head> 
<body> 
<div id="myDiv" style="background-color: red; border: lpx solid black"></div> 
</body> 
</html> 





ComputedStylesExample.htm 
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应 用 给 这 个 例子 中 <aqiv> 元 素 的 样式 一 方面 来 自 艇 入 式样 式 表 (<style> 元 素 中 的 样式 )， 另 一 方 
面 来 自 其 style 特性 。 但 是 ，style 特性 中 设置 了 backgroundColor 和 border， 没 有 设置 width 
和 neight， 后 者 是 通过 样式 表 规 则 应 用 的 。 以 下 代码 可 以 取得 这 个 元 素 计算 后 的 样式 。 


Var myDiv = document .getElementById ("myDiv"); 
Var computedStyle = document.defaultView.getComputedStyle (myDiv, null); 























alert (computedStyle.backgroundColor); // "red" 

alert (computedStyle.width); A/ “L100pBX" 

alert (computedStyle.height); // "200px" 

alert (computedStyle.border); // 在 某 些 浏览 器 中 是 "lpx solid pblack" 


ComputedStylesExample.htm 


在 这 个 元 素 计 算 后 的 样式 中 ,背景 颜色 的 值 是 "red" ， 宽 度 值 是 "100px" ， 高 度 值 是 "200px"。 我 
们 注意 到 ， 背 景 颜色 不 是 "blue" ， 因 为 这 个 样式 在 自身 的 style 特性 中 已 经 被 覆盖 了 。 边 框 属性 可 能 
会 也 可 能 不 会 返回 样式 表 中 实际 的 border 规则 ( Opera 会 返回 , 但 其 他 浏览 器 不 会 )。 存在 这 个 差别 的 
原因 是 不 同 浏览 器 解释 综合 (rollup ) 属性 ( 如 border ) 的 方式 不 同 ， 因 为 设置 这 种 属性 实际 上 会 涉及 
很 多 其 他 属性 。 在 设置 border 时 ,实际 上 是 设置 了 四 个 边 的 边框 宽度 、 颜 色 、 样 式 属性 
( border-left-width 、border-top-color 、border-bottom-style ， 等 等 )。 此 ， 即 使 
computedStyle.border 不 会 在 所 有 浏览 器 中 都 返 回 值 ， 但 computedStyle.borderLeftWidth 会 
返回 值 。 


























































需要 注意 的 是 , 即使 有 些 浏览 器 支持 这 种 功能 , 但 表示 值 的 方式 可 能 会 有 所 区 别 。 
例如 ,Firefox 和 Safari 会 将 所 有 颜色 转换 成 RGB 格式 ( 例如 红色 是 rgb(255,0,0) )。 
因此 ， 在 使 用 getcomputedStyle() 方 法 时 ， 最 好 多 在 几 种 浏览 器 中 测试 一 下 。 






IE 不 支持 getcomputedstyle () 方 法 ， 但 它 有 一 种 类 似 的 概念 。 在 正 中， 每 个 具有 style 属性 
的 元 素 还 有 一 个 currentstyle 属性 。 这 个 属性 是 cssstyleDeclaration 的 实例 ， 包 含 当前 元 素 全 
部 计算 后 的 样式 。 取 得 这 些 样式 的 方式 也 差不多 ， 如 下 面 的 例子 所 示 。 


Var myDiv = document .getElementById ("myDiv"); 
var computedStyle = myDiv.currentStyle; 
































alert (computedStyle.backgroundColor); //"red" 
alert (computedStyle.width); L/L100Bx" 
alert (computedStyle.height); //"200px" 
alert (computedSsStyle.border); //undefined 


TIEComputedStyles Example.htm 


与 DOM 版 本 的 方式 一 样 ，IE 也 没有 返回 border 样式 ， 因 为 这 是 一 个 综合 属性 。 

无 论 在 哪个 浏览 器 中 , 最 重要 的 一 条 是 要 记 住所 有 计算 的 样式 都 是 只 读 的 ; 不 能 修改 计算 后 样式 对 
象 中 的 CSS 属性 。 此 外 , 计算 后 的 样式 也 包含 属于 浏览 器 内 部 样式 表 的 样式 信息 , 因此 任何 具有 默认 值 
的 CSS 属性 都 会 表现 在 计算 后 的 样式 中 。 例 如 ， 所 有 浏览 器 中 的 visibility 属性 都 有 一 个 默认 值 ， 
但 这 个 值 会 因 实现 而 异 。 在 默认 情况 下 ， 有 的 浏览 器 将 visipility 属性 设置 为 "visible"， 而 有 的 
浏览 器 则 将 其 设置 为 "inherit"。 换 句 话 说， 不 能 指望 某 个 CSS 属性 的 默认 值 在 不 同 浏览 器 中 是 相同 
的 。 如 果 你 需要 元 素 具 有 某 个 特定 的 默认 值 ， 应 该 手工 在 样式 表 中 指定 该 值 。 
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12.2.2 ”操作 样式 表 


CSSStyleSheet 类 型 表示 的 是 样式 表 ， 包 括 通过 <1ink> 元 素 包 含 的 样式 表 和 在 <style> 元 素 中 定义 
的 样式 表 。 有 读者 可 能 记得 ， 这 两 个 元 素 本 身分 别 是 由 HTMLLinkElement 和 HTMLStyleElement 类 型 
表示 的 。 但 是 ，cssstyleSheet 类 型 相对 更 加 通用 一 些 ， 它 只 表示 样式 表 ， 而 不 管 这 些 样式 表 在 HTML 
中 是 如 何 定 义 的 。 此 外 ， 上 述 两 个 针对 元 素 的 类 型 允许 修改 HTML 特性 , 但 cssstyleSheet 对 象 则 是 一 
套 只 读 的 接口 《有 一 个 属性 例外 )。 使 用 下 面 的 代码 可 以 确定 浏览 器 是 否 支持 DOM2 级 样式 表 。 


Var supportsDOM2StyleSheets = 
document .implementation.hasFeature("StyleSheets", "2.0"); 


CSSStyleSheet 继承 自 Stylesheet， 后 者 可 以 作为 一 个 基础 接口 来 定义 非 CSS 样式 表 。 从 

StyleSheet 接口 继承 而 来 的 属性 如 下 。 

口 aisableq: 表示 样式 表 是 否 被 禁用 的 布尔 值 。 这 个 属性 是 可 读 / 写 的 , 将 这 个 值 设 置 为 true 可 

以 禁用 样式 表 。 

口 href: 如 果 样 式 表 是 通过 <1ink> 包 含 的 ， 则 是 样式 表 的 URL; 和 否则， 是 nul1。 

口 media: 当前 样式 表 支 持 的 所 有 媒体 类 型 的 集合 。 与 所 有 DOM 集合 一 样 ， 这 个 集合 也 有 一 个 
length 属性 和 一 个 item() 方 法 。 也 可 以 使 用 方 括号 语法 取得 集合 中 特定 的 项 。 如 果 集 合 是 空 
列表 , 表示 样式 表 适 用 于 所 有 媒体 。 在 正中 , media 是 一 个 反映 <1ink> 和 <style> 元 素 media 
特性 值 的 字符 串 。 

口 ownerNode: 指向 拥有 当前 样式 表 的 节点 的 指针 ， 样 式 表 可 能 是 在 HTML 中 通过 <1ink> 或 
<style/> 引 入 的 (在 XML 中 可 能 是 通过 处 理 指令 引入 的 ),。 如 果 当 前 样式 表 是 其 他 样式 表 通 过 
@import 导入 的 ， 则 这 个 属性 值 为 nul1。IE 不 支持 这 个 属性 。 

口 barentStylesheet: 在 当前 样式 表 是 通过 eimport 导入 的 情况 下 ， 这 个 属性 是 一 个 指向 导入 

它 的 样式 表 的 指针 。 

口 title: ownerNode 中 title 属性 的 值 。 

口 type: 表示 样式 表 类 型 的 字符 串 。 对 CSS 样式 表 而 言 ， 这 个 字符 串 是 "type/css"。 

除了 disableq 属性 之 外 ， 其 他 属性 都 是 只 读 的 。 在 支持 以 上 所 有 这 些 属性 的 基础 上 ， 

CSSStyleSheet 类 型 还 支持 下 列 属性 和 方法 : 

口 cssRules: 样式 表 中 包含 的 样式 规则 的 集合 。 IE 不 支持 这 个 属性 , 但 有 一 个 类 似 的 rules 属性 。 

口 ownerRule: 如 果 样 式 表 是 通过 @import 导 和 的， 这 个 属性 就 是 一 个 指针 ， 指 向 表示 导入 的 规 

则 ; 否则， 值 为 aul1。 正 不 支持 这 个 属性 。 

口 deleteRule (index) : 删除 cssRules 集合 中 指定 位 置 的 规则 。IE 不 支持 这 个 方法 ,但 支持 

一 个 类 似 的 removeRule () 方 法 。 

口 ijnsertRule (rule, index) : 向 cssRules 集合 中 指定 的 位 置 插入 rule 字符 串 。IE 不 支持 这 
个 方法 ,但 支持 一 个 类 似 的 aadqRule () 方 法 。 

应 用 于 文档 的 所 有 样式 表 是 通过 document .styleSheets 集合 来 表示 的 。 通过 这 个 集合 的 length 

属性 可 以 获知 文档 中 样式 表 的 数量 ， 而 通过 方 括号 语法 或 item() 方 法 可 以 访问 每 一 个 样式 表 。 来 看 一 个 

例子 。 



























































































































































































































































曙 Var Sheet = null; 
for (var i=0, len=document.styleSheets.length; i < len; i++){ 
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hre 


sheet = document.styleSheets[i]; 
alert (sheet .href).; 


StyleSheetsExample.htm 
以 上 代码 可 以 输出 文档 中 使 用 的 每 一 个 样式 表 的 href 属性 ( <style> 元 素 包 含 的 样式 表 没有 


E 属性 )。 
不 同 浏览 器 的 document .styleSheets 返回 的 样式 表 也 不 同 。 所 有 浏览 器 都 会 包含 <style> 元 素 

















和 rel 特性 被 设置 为 "stylesheet" 的 <l1ink> 元 素 引 入 的 样式 表 。IE 和 Opera 也 包含 rel 特性 被 设置 
为 "alternate stylesheet" 的 <link> 元 素 引 入 的 样式 表 。 


CSS 
StY 


型 ， 


@pa 


属性 


也 可 以 直接 通过 <1link> 或 <style> 元 素 取 得 cssstyleSheet 对 象 。DOM 规定 了 一 个 包含 
StyleSheet 对 象 的 属性 ， 名 叫 sheet; 除了 了 正 ， 其 他 浏览 器 都 支持 这 个 属性 。 正 支持 的 是 
leSheet 属性 。 要 想 在 不 同 浏览 器 中 都 能 取得 样式 表 对 象 ， 可 以 使 用 下 列 代码 。 


function getStyleSheet (element)t{ 
return element.sheet || element.styleSheet; 


























} 


// 取 得 第 一 个 <Link/> 元 素 引 入 的 样式 表 
var link = dqocument .getElementsByTagName ("link")[0]; 
Var sheet = getStylesheet (link); 


StyleSheetsExample2.htm 


这 里 的 getstyleSheet () 返 回 的 样式 表 对 象 与 document .styleSheets 集合 中 的 样式 表 对 象 相 同 。 

1. CSS 规则 

CSSRule 对 象 表示 样式 表 中 的 每 一 条 规则 。 实 际 上 ，cssRule 是 一 个 供 其 他 多 种 类 型 继承 的 基 类 

其 中 最 常见 的 就 是 cssstyleRule 类 型 ， 表 示 样 式 信息 ( 其 他 规则 还 有 @import、@font-face、 

ge 和 echarset， 但 这 些 规则 很 少 有 必要 通过 脚本 来 访问 )。cssstyleRule 对 象 包含 下 列 属性 。 

口 cssText: 返回 整 条 规则 对 应 的 文本 。 由 于 浏览 器 对 样式 表 的 内 部 处 理 方式 不 同 ， 返回 的 文本 
可 能 会 与 样式 表 中 实际 的 文本 不 一 样 ; Safari 始终 都 会 将 文本 转换 成 全 部 小 写 。IE 不 支持 这 个 
属性 。 

口 parentRule: 如 果 当 前 规则 是 导入 的 规则 ， 这 个 属性 引用 的 就 是 导入 规则 ; 否则 ， 这 个 值 为 

nul1l。 了 不 支持 这 个 属性 。 

口 parentStyleSheet: 当前 规则 所 属 的 样式 表 。IE 不 支持 这 个 属性 。 

口 selectorText: 返回 当前 规则 的 选择 符 文本 。 由 于 浏览 带 对 样式 表 的 内 部 处 理 方式 不 同 , 返回 
的 文本 可 能 会 与 样式 表 中 实际 的 文本 不 一 样 ( 例如 ，Safari 3 之 前 的 版 本 始终 会 将 文本 转换 成 全 
部 小 写 )。 在 Firefox、Safari、Chrome 和 正中 这 个 属性 是 只 读 的 。Opera 允许 修改 selectorText。 

口 style: 一 个 CssstyleDeclaration 对 象 ， 可 以 通过 它 设置 和 取得 规则 中 特定 的 样式 值 。 

口 type: 表示 规则 类 型 的 常量 值 。 对 于 样式 规则 ， 这 个 值 是 1。IE 不 支持 这 个 属性 。 

其 中 三 个 最 常用 的 属性 是 cssText、selectorText 和 styleo。cssText 属性 与 style.cssText 


E 类 似 , 但 并 不 相同 。 前 者 包含 选择 符 文本 和 围绕 样式 信息 的 花 括 号 , 后 者 只 包含 样式 信息 ( 类 似 于 












































































































































元 素 的 style .cssText )。 此 外 ，cssText 是 只 读 的 ， 而 style .cssText 也 可 以 被 重 写 。 
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大 多 数 情 况 下 ， 仅 使 用 style 属性 就 可 以 满足 所 有 操作 样式 规则 的 需求 了 。 这 个 对 象 就 像 每 个 元 
素 上 的 style 属性 一 样 ， 可 以 通过 它 读 取 和 修改 规则 中 的 样式 信息 。 以 下 面 的 CSS 规则 为 例 。 
div,bBbox 1 
background-color: blue; 


width: 100px; 
height: 200px; 




















CSSRulesExample.htm 


假设 这 条 规则 位 于 页 面 中 的 第 一 个 样式 表 中 , 而 且 这 个 样式 表 中 只 有 这 一 条 样式 规则 , 那么 通过 下 
列 代码 可 以 取得 这 条 规则 的 各 种 信息 。 


Var Sheet 























document .styleSheets[0]; 


var rules sheet.cssRules || sheet.rules; // 取 得 规则 列表 
var rule = rules[0]; // 取 得 第 一 条 规则 
alert (rule.selectorText); A/"dliv DG 
alert (rule.style.cssText); // 完 整 的 CSS 代码 
alert (rule.style.backgroundColor); //"blue" 

alert (rule.style.width); /7 "L100px" 
alert (rule.style.height); //"200px" 


CSSRulesExample.htm 


使 用 这 种 方式 ， 可 以 像 确 定 元 素 的 行内 样式 信息 一 样 ,确定 与 规则 相关 的 样式 信息 。 与 使 用 元 素 的 
方式 一 样 ， 在 这 种 方式 下 也 可 以 修改 样式 信息 ， 如 下 面 的 例子 所 示 。 


var sheet 





























document .styleSheets[0]; 


var rules sheet.cssRules || sheet.rules; // 取 得 规则 列表 
var rule = rules[0]; // 取 得 第 一 条 规则 
rule.style.backgroundColor = "red" 


CSSRulesExample.htm 


必须 要 注意 的 是 ， 以 这 种 方式 修改 规则 会 影响 页 面 中 适用 于 该 规则 的 所 有 元 素 。 换 句 话 说 ， 如 果 有 
两 个 带 有 box 类 的 <div> 元 素 ， 那 么 这 两 个 元 素 都 会 应 用 修改 后 的 样式 。 

2. 创建 规则 

DOM 规定 ， 要 向 现 有 样式 表 中 添加 新 规则 ， 需 要 使 用 insertRule() 方 法 。 这 个 方法 接受 两 个 参 
数 : 规则 文本 和 表示 在 哪里 插入 规则 的 索引 。 下 面 是 一 个 例子 。 

sheet.insertRule('"body { background-color: silver }", 0); //DOM 方法 

这 个 例子 插入 的 规则 会 改变 元 素 的 背景 颜色 。 插入 的 规则 将 成 为 样式 表 中 的 第 一 条 规则 (插入 到 了 
位 置 0 ) 一 一 规则 的 次 序 在 确定 层 释 之 后 应 用 到 文档 的 规则 时 至 关 重 要 。 Firefox、Safari、Opera 和 Chrome 
都 支持 insertRule() 方 法 。 

IE8 及 更 早 版 本 支持 一 个 类 似 的 方法 ， 名 叫 addRule () ， 也 接收 两 必 选 参数 : 选择 符 文本 和 CSS 
样式 信息 ; 一 个 可 选 参数 : 插入 规则 的 位 置 。 在 正 中 插入 与 前 面 例子 相同 的 规则 ， 可 使 用 如 下 代码 。 

sheet.addRule ("body"，"background-color: silver"，0); // 仅 对 了 正 有 效 

有 关 这 个 方法 的 规定 中 说 , 最 多 可 以 使 用 addRule () 添 加 4095 条 样式 规则 。 超 出 这 个 上 限 的 调用 
将 会 导致 错误 。 


















































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





2 


320 第 12 章 DOM2 和 DOM3 

















要 以 路 浏览 需 的 方式 向 样式 表 中 搬入 规则 ， 可 以 使 用 下 面 的 函数 。 这 个 函数 接受 4 个 参数 : 要 向 其 
中 添加 规则 的 样式 表 以 及 与 aadaRule () 相同 的 3 个 参数 ， 如 下 所 示 。 


function insertRule(sheet, selectorText, cssText, position){ 
if (sheet.insertRule){ 
sheet.insertRule(selectorText + "{" + cssText + "}", position); 
} else if (sheet.addRule)t{ 
sheet.addRule (selectorText, cssText, position); 











3 


CSSRulesExample2.htm 





下 面 是 调用 这 个 函数 的 示例 代码 。 
insertRule(document.styleSheets[0], "body", "background-color: silver", 0); 


虽然 可 以 像 这样 来 添加 规则 ,但 随 着 要 添加 规则 的 增多 ， 这 种 方法 就 会 变 得 非常 繁琐 。 因 此 ， 如 果 
要 添加 的 规则 非常 多 ， 我 们 建议 还 是 采用 第 10 章 介 绍 过 的 动态 加 载 样式 表 的 技术 。 

3. 删除 规则 

从 样式 表 中 删除 规则 的 方法 是 seleteRule () ， 这 个 方法 接受 一 个 参数 : 要 删除 的 规则 的 位 置 。 例 
如 ， 要 删除 样式 表 中 的 第 一 条 规则 ， 可 以 使 用 以 下 代码 。 



































sheet .deleteRule(0); //DOM 方法 
IE 支持 的 类 似 方 法 叫 removeRule () ,使 用 方法 相同 ， 如 下 所 示 : 
sheet .removeRule (0); // 仅 对 了 有 效 











下 面 是 一 个 能 够 跨 浏览 絮 删 除 规则 的 函数 。 第 一 个 参数 是 要 操作 的 样式 表 , 第 二 个 参数 是 要 删除 的 
规则 的 索引 。 


function deleteRule(sheet, index){ 
if (sheet.deleteRule){ 
sheet.deleteRule (index); 
} else if (sheet.removeRule)t{ 
sheet .removeRule (index); 














} 


CSSRulesExample2.htm 
调用 这 个 函数 的 方式 如 下 。 
deleteRule(document.styleSheets[0], 0); 


与 添加 规则 相似 ， 删 除 规则 也 不 是 实际 Web 开发 中 常见 的 做 法 。 考 虑 到 删除 规则 可 能 会 影响 CSS 
层 和 的 效果 ， 因 此 请 大 家 慎重 使 用 。 


12.2.3 ”元 素 大 小 


本 节 介 绍 的 属性 和 方法 并 不 属于 “DOM2 级 样式 ”规范 , 但 却 与 HTML 元 素 的 样式 息息相关 。DOM 
中 没有 规定 如 何 确定 页 面 中 元 素 的 大 小 。IE 为 此 率先 引入 了 一 些 属性 ,以 便 开发 人 员 使 用 。 目 前,， 所 有 
主要 的 浏览 器 都 已 经 支持 这 些 属性 。 
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1. 偏 移 量 

首先 要 介绍 的 属性 涉及 偏 移 量 ( offset dimension ), 包括 元 素 在 屏幕 上 占用 的 所 有 可 见 的 空间 。 元 素 
的 可 见 大 小 由 其 高 度 、 宽 度 决定 ， 包 括 所 有 内 边 距 、 深 动 条 和 边框 大 小 ( 注意 ， 不 包括 外 边 距 )。 通 过 
下 列 4 个 属性 可 以 取得 元 素 的 偏 移 量 。 

口 offsetHeight: 元 素 在 垂直 方向 上 占用 的 空间 大 小 ， 以 像素 计 。 包 括 元 素 的 高 度 、( 可 见 的 ) 
水 平 滚动 条 的 高 度 、 上 边框 高 度 和 下 边框 高 度 。 

口 offsetwidth: 元 素 在 水 平方 向 上 占用 的 空间 大 小 ， 以 像素 计 。 包括 元 素 的 宽度 、( 可 见 的 ) 垂 
直 滚 动 条 的 宽度 、 左 边框 宽度 和 右边 框 宽度 。 

口 offsetLeft: 元 素 的 左 外 边框 至 包含 元 素 的 左 内 边框 之 间 的 像素 距离 。 

口 offsetTop: 元 素 的 上 外 边框 至 包含 元 素 的 上 内 边框 之 间 的 像素 距离 。 

其 中 ，offsetLeft 和 offsetTop 属性 与 包含 元 素 有 关 ， 包 含 元 素 的 引用 保存 在 offsetParent 
属性 中 。offsetParent 属性 不 一 定 与 parentNode 的 值 相 等 。 例 如 ，<td> 元 素 的 offsetParent 是 
作为 其 祖先 元 素 的 <table> 元 素 ， 因 为 <table> 是 在 DOM 层次 中 距 <ta> 最 近 的 一 个 具有 大 小 的 元 素 。 
图 12-1 形象 地 展示 了 上 面 几 个 属性 表示 的 不 同 大 小 。 
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offsetLeft 
一 OffsetHeight 

















offsetWidth 











图 12-1 


要 想 知 道 某 个 元 素 在 页 面 上 的 偏 移 量 ， 将 这 个 元 素 的 offsetLeft 和 offsetTop 与 其 offsetParent 
的 相同 属性 相 加 ， 如 此 循环 直至 根 元 素 ， 就 可 以 得 到 一 个 基本 准确 的 值 。 以 下 两 个 函数 就 可 以 用 于 分 别 
取得 元 素 的 左 和 上 偏 移 量 。 
function getElementLeft (element) 


Var actualLeft = element.offsetLeft; 
Var current = element.offsetParent; 


























while (current !== null)t{ 
actualLeft += current.offsetLeft; 
current = current.offsetParent; 








} 


return actualLeft; 
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function getElementTop (element)t{ 
Var actualTop = element.offsetTop; 
Var current = element.offsetParent; 


while (current !== null)t{ 
actualTop += current. offsetTop; 
current = current.offsetParent; 


} 


return actualTop; 


OfsetDimensionsExample.htm 


两 个 函数 利用 of fsetParent 属性 在 DOM 层次 中 逐 级 向 上 回溯 ,将 每 个 层次 中 的 偏 移 量 属性 
块 。 对 于 简单 的 CSS 布局 的 页 面 , 这 两 函数 可 以 得 到 非常 精确 的 结果 。 对 于 使 用 表格 和 内 髓 
框架 布局 的 页 面 , 由 于 不 同 浏览 器 实现 这 些 元 素 的 方式 不 同 , 因此 得 到 的 值 就 不 太 精 确 了 。 一 般 来 说 ， 
页 面 中 的 所 有 元 素 都 会 被 包含 在 几 个 <aiv> 元 素 中 ， 而 这 些 <aiv> 元 素 的 offsetParent 又 是 
<body> 元 素 , 所 以 getElementLeft () 与 getElementTop () 会 返回 与 offsetLett 和 offsetTop 


相同 的 值 。 


























































所 有 这 些 偏 移 量 属性 都 是 只 读 的 ， 而 且 每 次 访问 它们 都 需要 重新 计算 。 因 此 ， 应 
该 尽量 避免 重复 访问 这 些 属 性 ; 如 果 需 要 重复 使 用 其 中 某 些 属性 的 值 ， 可 以 将 它们 保 
存在 局 部 变量 中 ， 以 提高 性 能 。 








2. 客户 区 大 小 

元 素 的 客户 区 大 小 〈client dimension )， 指 的 是 元 素 内 容 及 其 内 边 距 所 占据 的 空间 大 小 。 有 关 客 户 区 
大 小 的 属性 有 两 个 : clientwiath 和 clientHeight。 其 中 ,clientwidth 属性 是 元 素 内 容 区 宽度 加 
上 左右 内 边 距 宽度 ; clientHeight 属性 是 元 素 内 容 区 高 度 加 上 上 下 内 边 距 高 度 。 图 12-2 形象 地 说 明 
了 这 些 属性 表示 的 大 小 。 
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图 12-2 
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从 字面 上 看 ,客户 区 大 小 就 是 元 素 内 部 的 空间 大 小 ， 因 此 滚动 条 占用 的 空间 不 计算 在 内 。 最 常用 到 
这 些 属 性 的 情况 ， 就 是 像 第 8 章 讨论 的 确定 浏览 器 视 口 大 小 的 时 候 。 如 下 面 的 例子 所 示 ， 要 确定 浏览 
视 口 大 小 ， 可 以 使 用 aocument .documentElement 或 document .body (在 IE7 之 前 的 版 本 中 ) 的 








clientWidth 和 clientHeight。 


function getViewport()t{ 
IE (document.compatMode == "BackCompat")f{ 
return { 
width: document.body.clientWidth, 
height: document.body.clientHeight 
> 
} else { 
return { 








width: document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 





} 








这 个 函数 首先 检查 document .compatMode 属性 ， 以 确定 浏览 絮 是 否 运 行 在 混杂 模式 。Safari 3.1 
之 前 的 版 本 不 支持 这 个 属性 ， 因 此 就 会 自动 执行 else 语句 。Chrome 、Opera 和 Firefox 大 多 数 情 况 下 都 
运行 在 标准 模式 下 , 因此 它们 也 会 前 进 到 else 语句 。 这 个 孔 数 会 返回 一 个 对 象 , 包含 两 个 属性 : wiath 





























和 height; 表示 浏览 器 视 口 (<html> 或 <body> 元 素 ) 的 大 小 。 











与 偏 移 量 相似 ， 客 户 区 大 小 也 是 只 读 的 ， 也 是 每 


3. 滚动 大 小 
最 后 要 介绍 的 是 滚动 大 小 (scroll dimension )， 指 的 是 包含 滚 
<html> 元 素 )， 即 使 没有 执行 任何 代码 也 能 自动 地 添加 滚动 条 ; 




















overflow 属性 进行 设置 才能 滚动 。 以 下 是 4 个 与 滚动 大 小 相关 的 属性 。 
口 scrollHeight: 在 没有 滚动 条 的 情况 下 ， 元 素 内 容 的 总 高 度 。 











次 访问 都 要 重新 计算 的 。 


动 内 容 的 元 素 的 大 小 。 有 些 元 素 〈 例如 
但 另外 一 些 元 素 ， 则 需要 通过 CSS 的 








D scrollwidth: 在 没有 滚动 条 的 情况 下 ， 元 素 内 容 的 总 宽度 。 
口 scrollLeft: 被 隐藏 在 内 容 区 域 左 侧 的 像素 数 。 通 过 设置 这 个 属性 可 以 改变 元 素 的 滚动 位 置 。 




















图 12-3 展示 了 这 些 属 性 代表 的 大 小 。 


口 scrollTop: 被 隐藏 在 内 容 区 域 上 方 的 像素 数 。 通 过 设置 这 个 属性 可 以 改变 元 素 的 滚动 位 置 。 








scrollWidth 和 scrollHeight 主要 用 于 确定 元 素 内 容 的 实际 大 小 。 例如 , 通常 认为 <ntml> 元 素 
是 在 Web 浏览 器 的 视 口 中 深 动 的 元 素 (IE6 之 前 版 本 运行 在 混杂 模式 下 时 是 <body> 元 素 )。 因 此 ， 带 有 
垂直 滚动 条 的 页 面 总 高 度 就 是 document .documentElement .scrollHeight。 

















对 于 不 包含 滚动 条 的 页 面 而 言 ，scrollwiath 和 s 


crollHeight 与 clientWiath 和 


clientHeight 之 间 的 关系 并 不 十 分 清晰 。 在 这 种 情况 下 ， 基 于 document .documentElement 查看 





这 些 属 性 会 在 不 同 浏览 需 间 发 现 一 些 不 一 致 性 问题 ， 如 下 所 述 。 





尺 吉 。 
口 Opera、Safari 3.1 及 更 高 版 本 、Chrome 中 的 这 两 组 属 怕 
scrollHeight 等 于 视 口 大 小 ,而 clientwigth 和 cli 
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口 Firefox 中 这 两 组 属性 始终 都 是 相等 的 ， 但 大 小 代表 的 是 文档 内 容 区域 的 实际 尺寸 ， 而 非 视 口 的 


E 是 有 差别 的 ， 其 中 scrollwiath 和 
entHeight 等 于 文档 内 容 区 域 的 大 小 。 
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口 IE 在 标准 模式 ) 中 的 这 两 组 属性 不 相等 ， 其 中 scrollwidth 和 scrollHeight 等 于 文档 内 
容 区 域 的 大 小 ， 而 clientwidth 和 clientHeight 等 于 视 口 大 小 。 


scrollHeight 





Ca 











在 








scrollHeight/clientHeight 中 的 最 大 值 ， 才 色 


是 这 样 一 个 例子 。 





scrollwidth 











隐藏 的 内 容 





scrollLeft 


12-3 
定 文 档 的 总 高 度 时 (包括 基于 视 口 的 最 小 高 度 时 ), 必须 取得 scrollwidth/clientwiqdth 和 





scrollTop 














保证 在 跨 浏览 器 的 环境 下 得 到 精确 的 结果 。 下 面 就 














Var docHeight = Math.max(document .documentElement.scrollHeight, 


document .documen 


tElement.clientHeight); 


Var docWidth = Math.max(document .documentElement.scrollWidth, 


document .documen 





tElement.clientWidth); 


注意 ， 对 于 运行 在 混杂 模式 下 的 正 ， 则 需要 用 document .body 代替 document .document- 


Element。 








通过 scrollLeft 和 scrollTop 属性 既 可 以 确定 元 素 当前 滚动 的 状态 ， 也 可 以 设置 元 素 的 滚动 位 











置 。 在 元 素 尚 未 被 滚动 时 ， 这 两 个 属性 的 值 都 等 于 0。 如 果 元 素 被 垂直 滚动 了 ,那么 scrollTop 的 值 


会 大 于 0， 且 表示 元 素 上 方 不 可 见 内 容 的 像素 高 度 。 如 果 元 素 被 水 平 滚动 了 , 那么 scrollLeft 的 值 会 
大 于 0， 且 表示 元 素 左 侧 不 可 见 内 容 的 像素 宽度 。 这 两 个 








scrollLeft 和 scrollTop 设置 为 0， 就 可 以 村 


于 顶部 ， 如 果 不 是 就 将 其 回 深 到 顶部 。 


function scrollToTop (element){ 
if (element.scrollTop 
element.scrollTop = 0; 


} 
} 





!= 0){ 


这 个 函数 既 取 得 了 scrollTop 的 值 ， 也 设置 了 它 的 值 。 


4. 确定 元 素 大 小 





属性 都 是 可 以 设置 的 ， 因 此 将 元 素 的 
重 置 元 素 的 深 动 位 置 。 下 面 这 个 也 数 会 检测 元 素 是 否 位 

















I[E、Firefox 3+、Safari4+、Opera9.5 及 Chrome 为 每 个 元 素 都 提供 了 一 -人 ee () 方 








法 。 这 个 方法 返回 会 一 个 矩 
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形 对 象 ， 包 含 4 个 





属性 : left、top、right 和 bottom。 这 些 属性 给 出 了 
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元 素 在 页 面 中 相对 于 视 口 的 位 置 。 但 是 ,浏览 器 的 实现 稍 有 不 同 。IE8 及 更 早 版 本 认为 文档 的 左上 角 坐 
标 是 (2, 2)， 而 其 他 浏览 器 包括 IE9 则 将 传统 的 (0,0) 作 为 起 点 坐标 。 因 此 ， 就 需要 在 一 开始 检查 一 下 位 于 
(0,0) 处 的 元 素 的 位 置 ， 在 IE8 及 更 早 版 本 中 ， 会 返回 (2.2)， 而 在 其 他 浏览 器 中 会 返回 (0,0)。 来 看 下 面 的 
函数 : 
function getBoundingClientRect (elLement){ 
曙 if (typeof arguments.callee.offset != "number")f{ 


Var scrollTop = document.documentElement.scrollTop; 
Var temp = document.createElement ("div"); 

















temp.style.cssText = "position:absolute;left:0;top:0;"; 
document .body.appendChild (temp); 
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; 


document .body.removeChild(temp); 
temp = null; 
} 


Var rect = element.getBoundingClientRect(); 
var offset = arguments.callee.offset; 


return { 
left: rect.left + offset, 
right: rect.right + offset, 
top: rect.top + offset, 
bottom: rect.bottom + offset 


GetBoundingClientRectExample.htm 


这 个 函数 使 用 了 它 自身 的 属性 来 确定 是 否 要 对 坐标 进行 调整 。 第 一 步 是 检测 属性 是 否 有 定义 ， 如果 
没有 就 定义 一 个 。 最 终 的 offset 会 被 设置 为 新 元 素 上 坐标 的 负 值 ， 实 际 上 就 是 在 正 中 设置 为 -2， 在 
Firefox 和 Opera 中 设置 为 -0。 为 此 ， 需 要 创建 一 个 临时 的 元 素 ， 将 其 位 置 设置 在 (0,0)， 然 后 再 调用 其 
getBoundingClientRect ()。 而 之 所 以 要 减 去 视 口 的 scroll1Top， 是 为 了 防止 调用 这 个 函数 时 窗口 
被 滚动 了 。 这 样 编写 代码 ， 就 无 需 每 次 调用 这 个 函数 都 执行 两 次 getBoundingClientRect () 了 。 接 
下 来 ， 再 在 传人 的 元 素 上 调用 这 个 方法 并 基于 新 的 计算 公 \ 式 创建 一 个 对 象 。 

对 于 不 支持 getBoundingclientRect () 的 浏览 器 ， 可 以 通过 其 他 手段 取得 相同 的 信息 。 般 来 
说 ，right 和 left 的 差 值 与 offsetwidth 的 值 相等 ， 而 bottom 和 top 的 差 值 与 offsetHeight 
相等 ,而 且 ,left 和 top 属性 大 致 等 于 使 用 本 章 前 面 定 义 的 getElementLeft () 和 getElementTop () 
函数 取得 的 值 。 综 合 上 述 ， 就 可 以 创建 出 下 面 这 个 跨 浏 览 右 的 函数 : 


CY function getBoundingClientRect (element){ 











融 











































































































Var scrollTop = document .documentElement .scrollTop; 
Var scrollLeft = document .documentElement .scrollLeft; 


if (element .getBoundingClientRect)t{ 
if (typeof arguments.callee.offset != "number")f{ 
Var temp = document.createElement ("div"); 
temp.style.cssText = "position:absolute;left:0;top:0;"; 
document .body.appendChild(temp); 
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; 
document .body.removeChild(temp); 
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temp = null; 
} 


Var rect = element.getBoundingClientRect () ; 
Var offset = arguments.callee.offset; 


return { 
left: rect.left + offset, 
right: rect.right + offset, 
top: rect.top + offset, 
bottom: rect.bottom + offset 


} . 


} else { 


var actualLeft = getElementLeft (element); 
var actualTop = getElementTop (element); 


return { 
left: actualLeft - scrollLeft, 
right: actualLeft + element .offsetWidth - scrollLeft, 
top: actualTop - scrollTop, 
bottom: actualTop + element .offsetHeight - scrollTop 


GetBoundingClientRectExample.htm 

这 个 函数 在 getBoundingClientRect () 有 效 时 ， 就 使 用 这 个 原生 方法 ， 而 在 这 个 方法 无 效 时 则 

使 用 默认 的 计算 公式 。 在 某 些 情 况 下 ， 这 个 函数 返回 的 值 可 能 会 有 所 不 同 ， 例 如 使 用 表格 布局 或 使 用 滚 
动 元 素 的 情况 下 。 














由 于 这 里 使 用 了 arguments .callee， 所 以 这 个 方法 不 能 在 严格 模式 下 使 用 。 





12.3 遍历 


“DOM2 级 遍历 和 范围 ”模块 定义 了 两 个 用 于 辅助 完成 顺序 遍历 DOM 结构 的 类 型 : NodeIterator 
和 Treewalker。 这 两 个 类 型 能 够 基于 给 定 的 起 点 对 DOM 结构 执行 深度 优先 ( depth-first ) 的 遍历 操作 。 
在 与 DOM 兼容 的 浏览 器 中 (Firefox 1 及 更 高 版 本 、Safari 1.3 及 更 高 版 本 、Opera 7.6 及 更 高 版 本 、Chrome 
0.2 及 更 高 版 本 )， 都 可 以 访问 到 这 些 类 型 的 对 象 。 了 不 支持 DOM 遍历 。 使 用 下 列 代 码 可 以 检测 浏览 
对 DOM2 级 遍历 能 力 的 支持 情况 。 








Var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0"); 
Var supportsNodeIterator = (typeof document.createNodeIterator == "function"); 
Var supportsTreeWalker = (typeof document.createTreeWalker == "function"); 


如 前 所 述 ，DOM 遍历 是 深度 优先 的 DOM 结构 遍历 ， 也 就 是 说 ,移动 的 方向 至 少 有 两 个 ( 取决 
于 使 用 的 遍历 类 型 )。 人 遍历 以 给 定 节点 为 根 ， 不 可 能 向 上 超出 DOM 树 的 根 节 点 。 以 下 面 的 HTML 页 
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<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
</head> 
<body> 
<p><b>Hello</b> world!</p> 
</body> 
</html> 


图 12-4 展示 了 这 个 页 面 的 DOM 树 。 














Document 











Element html 












































Element head Element body 
Element title Element p 
Text Example Element b Text world! 





























Text Hello 








图 12-4 


任何 节点 都 可 以 作为 遍历 的 根 节点 。 如 果 假 设 <body> 元 素 为 根 节点 ,那么 遍历 的 第 一 步 就 是 访问 <p> 
元 素 , 然后 再 访问 同 为 <boqy> 元 素 后 代 的 两 个 文本 节点 。 不 过 , 这 次 遍历 永远 不 会 到 达 <html>、<head> 
元 素 ， 也 不 会 到 达 不 属于 <body> 元 素 子 树 的 任何 节点 。 而 以 aocument 为 根 节点 的 遍历 则 可 以 访问 到 文 
档 中 的 全 部 节点 。 图 12-5 展示 了 对 以 aocument 为 根 节点 的 DOM 树 进 行 深度 优先 遍历 的 先后 顺序 。 


(9) Document 


(2) Element html 


ER 


G) Element head 《6) Element body 


Element title (7) Element p 


Text Example Element b Text world! 


(9) Text Hello 


图 12-5 
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从 qocument 开始 依 序 向 前 ,访问 的 第 一 
从 文档 最 后 的 文本 节点 开始 ， 遍 历 可 以 反 向 移动 到 DOM 树 的 顶端 。 此 时 ， 访 
问 的 第 一 个 节点 是 包含 "Hello" 的 文本 节点 , 访问 的 最 后 一 个 节点 是 document 节点 。NodeIterator 
和 Treewalker 都 以 这 种 方式 执行 遍历 。 


"world!" 的 文本 节点 。 


12.3.1 NodeIterator 














口 entityReferenceExpansion: 


个 节点 是 document ， 访 问 的 最 后 一 个 节点 是 包含 








NodeIterator 类 型 是 两 者 中 比较 简单 的 一 个 ， 可 以 使 用 document .createNodeIterator() 方 
法 创建 它 的 新 实例 。 这 个 方法 接受 下 列 4 个 参数 。 

口 root: 想 要 作为 搜索 起 点 的 树 中 的 节点 。 

口 whatToshow: 表示 要 访问 哪些 节 
口 filter: 是 一 个 NodeFilter 对 象 ， 或 者 一 个 表示 应 谱 该 接受 还 是 拒绝 茶 种 特定 节点 的 函数 。 
布尔 值 ， 表 示 是 否 要 扩展 实体 引用 。 这 个 参数 在 HTML 页 面 


点 的 数字 代码 。 














中 没有 用 ， 因 为 其 中 的 实体 引用 不 能 扩 


whatToShow 参数 是 一 个 位 掩 码 























展 。 


通过 应 用 一 或 多 个 过 滤器 (filter ) 来 确定 要 访问 哪些 节点 。 这 个 

















参数 的 值 以 常量 形式 在 NodeFilter 类 型 中 定义 ， 如 下 所 示 。 





NodeFilter.s 
NodeFilter.s 
NodeFilter.s 
NodeFilter. 
NodeFilter. 
oderilter. 


odeFilter. 


odeFilter. 


S 
S 
S 
S 
odeFilter.s 
S 
S 
odeFilter.s 
S 


N 
区 
N 
NodeFilter. 
N 
N 
N 


odeFilter. 








DoOOOOOOOOODODO DO 











NodeFilter.s 


除了 NodeFilter .SHOW_AL] 


var whatToShow = 


H 





OW_AL 




















,: 显示 所 有 类 型 的 节点 。 


OW_ELEMENT: 显示 元 素 节点 。 


OW_TEX" 











OW_ATTRIBUTE: 显示 特性 节点 。 由 于 DOM 结构 原因 , 实际 上 不 能 使 用 这 个 值 。 





























OW_CDA] 





Wy 显 示 文 本 节点 。 
[LA_SECTION : 





显示 CDATA 节点 。 对 HTML 页 面 没有 用 。 









































OW_PROC 
OW_COMMENT: 显示 注 
MENT: 显示 文档 节点 

: 显示 文档 类 型 节点 。 


OW_ DOCU 
OW_DOCU 
OW_DOCU 














OW_ENTITY_REFERENCE: 显示 实体 引用 节点 。 对 HTML 页 面 没 有 用 。 
OW_ENTITYE: 显示 实体 节点 。 对 HTML 页 面 没 有 用 。 
ESSING_INSTRUCTION: 显示 处 理 指令 节点 。 对 HTML 页 面 没 有 用 。 





















































释 节 点 。 




















MENT_TYPE 














MENT_FRAGMI 


ENT: 显示 文档 片段 节点 。 对 HTML 页 面 没 有 用 。 























OW_NOTATION: 显示 符号 节点 。 对 HTML 页 面 没 有 用 。 
L 之 外 ， 可 以 使 用 按 位 或 操作 符 来 组 合 多 个 选项 ， 如 下 面 的 例子 所 示 : 























NodeFilter .SHOW_ ELEMENT | NodeFilter.SHOW_TEXT; 





可 以 通过 createNodeIterator () 方 法 的 filter 参数 来 指定 自 定义 的 NodeFilter 对 象 , 或 者 


GT 点 过 滤器 (nodetfilter ) 的 





Node () ; 如 果 应 该 访问 给 定 的 节点 ， 该 方法 返 
I 该 方法 返回 NodeFilter .FILTER_SKIP。 由 于 NodeFilter 是 一 个 抽象 的 类 型 ， 因 此 不 能 





createNodeIterator() 


var filter = { 
acceptNode: 

















图 数 。 每 个 NodeFilter 对 象 只 有 一 个 方法 , 即 accept- 





回 NodeFilter .FILTER_ACCEPT， 如 果 不 应 该 访问 给 














直接 创建 它 的 实例 。 在 必要 时 ， 只 要 创建 一 个 包含 acceptNode () 方 法 的 对 象 ， 然 后 将 这 个 对 象 传 人 





function (node)t{ 











中 即 可 。 例 如 ， 下 列 代码 展示 了 如 何 创建 一 个 只 显示 <p> 元 素 的 节点 欠 代 器 。 





return nodqe .tagName .toLowerCase() == "p" ? 
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NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER_ SKIP; 














}3 











Var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ ELEMENT, 
filter, false); 


第 三 个 参数 也 可 以 是 一 个 与 acceptNode () 方 法 类 似 的 函数 ， 如 下 所 示 。 


var filter = function(node){ 
return node.tagName.toLowerCase() == "p" ? 
NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER SKIP; 








}; 
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ ELEMENT, 
filter, false); 


一 般 来 说 ， 这 就 是 在 JavaScript 中 使 用 这 个 方法 的 形式 ， 这 种 形式 比较 简单 ， 而 且 也 跟 其 他 的 
JavaScript 代码 很 相似 。 如 果 不 指定 过 滤器 ， 那 么 应 该 在 第 三 个 参数 的 位 置 上 传人 null。 
下 面 的 代码 创建 了 一 个 能 够 访问 所 有 类 型 节点 的 简单 的 NodeIterator。 


Var iterator = document.createNodeIterator (document, NodeFilter .SHOW ALL, 
null, false); 


NodeIterator 类 型 的 两 个 主要 方法 是 nextNode () 和 previousNode () 。 顾 名 思 义 , 在 深度 优先 
的 DOM 子 树 遍 历 中 ，nextNode() 方 法 用 于 向 前 前 进一步 ， 而 previousNode () 用 于 向 后 后 退 一 步 。 
在 刚刚 创建 的 NodeIterator 对 象 中 ， 有 一 个 内 部 指针 指向 根 节点 ， 因 此 第 一 次 调用 nextNode () 会 
返回 根 节 点 。 当 遍历 到 DOM 子 树 的 最 后 一 个 节点 时 ，nextNode () 返 回 nul1。previousNodae () 方 法 
的 工作 机 制 类 似 。 当 遍历 到 DOM 子 树 的 最 后 一 个 节点 ， 且 previousNode() 返 回 根 节点 之 后 ,再 次 调 
用 它 就 会 返回 nul1l。 
以 下 面 的 HTML 片段 为 例 。 
<div Ld="QLv]"> 
<p><b>Hello</b> world!</p> 
<ul> 
<l1i>List item 1</1i> 
<li>List item 2</1i> 
<l1i>List item 3</1i> 


</ul> 
</div> 



























































NodelteratorExamplel.htm 





假设 我 们 想 要 遍历 <aiv> 元 素 中 的 所 有 元 素 ， 那 么 可 以 使 用 下 列 代码 。 


var div = document.getElementById("div1"); 
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ ELEMENT, 
null, false); 
Var node = iterator.nextNode(); 
while (node !== null) { 
alert (node.tagName); // 输 出 标签 名 
node = iterator.nextNode(); 

















NodelteratorExamplel.htm 
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在 这 个 例子 中 , 第 一 次 调用 nextNode () 返 回 <p> 元 素 。 因 为 在 到 达 DOM 子 树 末 端 时 nextNode () 
返回 nul1， 所 以 这 里 使 用 了 while 语句 在 每 次 循环 时 检查 对 nextNode () 的 调用 是 和 否 返 回 了 nul1。 
执行 上 面 的 代码 会 显示 如 下 标签 名 : 











也 许 用 不 着 显示 那么 多 信息 ， 你 只 想 返 回 遍 历 中 遇 到 的 <1i> 元 素 。 很 简单 ， 只 要 使 用 一 个 过 滤器 
即 可 ， 如 下 面 的 例子 所 示 。 


var div = document .getElementById("div1l"); 
var filter = function(node){ 
return node.tagName.toLowerCase() == "li" ? 
NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER SKIP; 

















}; 


Var iterator = document .createNodeIterator(div, NodeFilter.SHOW ELEMENT, 
filter, false); 


Var node = iterator.nextNode(); 

while (node !== null) { 
alert (node.tagName); // 输 出 标签 名 
node = iterator.nextNode(); 


NodelteratorExample2.htm 


在 这 个 例子 中 ， 人 迭代 器 只 会 返回 <11> 元 素 。 
由 于 nextNode () 和 previousNodae () 方 法 都 基于 NodeIterator 在 DOM 结构 中 的 内 部 指针 工 
作 ， 所 以 DOM 结构 的 变化 会 反映 在 遍历 的 结果 中 。 





人 Firefox 3.5 之 前 的 版 本 没有 实现 createNodeIterator () 方 法 ， 但 却 支持 下 一 
让 
节 


要 讨论 的 createTreeWalker () 方 法 。 





12.3.2 TreeWalker 


TreeWalker 是 NodeIterator 的 一 个 更 高 级 的 版 本 ,除了 包括 nextNode () 和 previousNode() 
在 内 的 相同 的 功能 之 外 ， 这 个 类 型 还 提供 了 下 列 用 于 在 不 同方 向 上 遍历 DOM 结构 的 方法 。 
口 parentNode(): 遍历 到 当前 节点 的 父 节点 ; 
口 firstchild(): 遍历 到 当前 节点 的 第 一 个 子 节点 ; 
口 lastchild(): 遍历 到 当前 节点 的 最 后 一 个 子 节 点 ; 
口 nextSibling(): 遍历 到 当前 节点 的 下 一 个 同辈 节点 ; 
口 previousSibling (): 遍历 到 当前 节点 的 上 一 个 同辈 节点 。 
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创建 rreewalkezr 对 象 要 使 用 document .createTreeWalker () 方 法 ， 这 个 方法 接受 的 4 个 参数 
与 document . createNodeIterator 1() 方 法 相同 : 作为 遍历 起 点 的 根 节点 、 要 显示 的 节点 类 型 、 过 滤 
器 和 一 个 表示 是 否 扩展 实体 引用 的 布尔 值 。 由 于 这 两 个 创建 方法 很 相似 ， 所 以 很 容易 用 Treewalker 
来 代替 NodeIterator， 如 下 面 的 例子 所 示 。 
var div = document.getElementById("div1"); 
() Var filter = function(node)t 
return node.tagName.toLowerCase() == "11"? 


NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER_ SKIP; 

















}3 


Var walker= document .createTreeWalker (div, NodeFilter.SHOW ELEMENT, 
filter, false); 


Var node = iterator.nextNode(); 

while (node !== null) { 
alert (node.tagName); // 输 出 标签 名 
node = iterator.nextNode(); 


TreeWalkerExamplel.htm 


在 这 里 ，filter 可 以 返回 的 值 有 所 不 同 。 除了 NodeFilter.FILTER_ACCEPT 和 NodeFilter. 
FILTER_SKIP 之 外 ， 还 可 以 使 用 NodeFilter .FILTER_REJECT。 在 使 用 NodeIterator 对 象 时 ， 
NodeFilter.FILTER_SKIP 与 NodeFilter .FILTER_REJECT 的 作用 相同 : 跳 过 指定 的 节点 。 但 在 使 
用 TreeWalker 对 象 时 ,NodeFilter .FILTER_SKIP 会 跳 过 相应 节点 继续 前 进 到 子 树 中 的 下 一 个 节点 ， 
而 NodeFilter .FILTER_REJECT 则 会 跳 过 相应 节点 及 该 节点 的 整个 子 树 。 例 如 ， 将 前 面 例子 中 的 
NodeFilter .FILTER_SKIP 修改 成 NodeFilter .FILTER_REJECT, 结果 就 是 不 会 访问 任何 节点 
因为 第 一 个 返回 的 节点 是 <aiv> ， 它 的 标签 名 不 是 "11" ， 于 是 就 会 返回 NodeFilter .FILTER_REJECT， 
这 意味 着 遍历 会 跳 过 整个 子 树 。 在 这 个 例子 中 ，<div> 元 素 是 遍历 的 根 节点 ， 于 是 结果 就 会 停止 遍历 。 

当然 ，Treewalker 真正 强大 的 地 方 在 于 能 够 在 DOM 结构 中 沿 任何 方向 移动 。 使 用 Treewalker 
遍历 DOM 树 ， 即 使 不 定义 过 滤器 ， 也 可 以 取得 所 有 <1i> 元 素 ， 如 下 面 的 代码 所 示 。 


CY var div = document.getElementById("div1l"); 
































































































































Var walker = document.createTreeWalker (div, NodeFilter.SHOW_ ELEMENT, null, false); 

















walker.firstchild(); // 转 到 <p> 
walker .nextSibling(); // 转 到 <ul> 

var node = walker.firstchild(); // 转 到 第 一 个 <1i> 
while (node !== null) { 


alert (node.tagName); 
node = walker.nextSibling(); 


TreeWalkerExample2.htm 


因为 我 们 知道 <1i> 元 素 在 文档 结构 中 的 位 置 ， 所 以 可 以 直接 定位 到 那里 ， 即 使 用 firstchilaq() 12 
转 到 <p> 元 素 , 使 用 nextsipbling() 转 到 <ul> 元 素 ,然后 再 使 用 firstchild() 转 到 第 一 个 <1i> 元 素 。 

注意 , 此 处 TreeWalker 只 返回 元 素 ( 由 传人 到 createTreewalker () 的 第 二 个 参数 决定 )。 因 此 , 可 

以 放心 地 使 用 nextsibling () 访 问 每 一 个 <1i> 元 素 ， 直 至 这 个 方法 最 后 返回 nul1。 
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TreeWalker 类 型 还 有 一 个 属性 ， 名 叫 currentNode， 表 示 任 何 遍 历 方 法 在 上 一 次 遍历 中 返回 的 
节点 。 通 过 设置 这 个 属性 也 可 以 修改 遍历 继续 进行 的 起 点 ， 如 下 面 的 例子 所 示 。 











Var node = walker.nextNode(); 
alert (node === walker.currentNode); //true 
walker.currentNode = document .body; // 修 改 起 点 


与 NodeIterator 相 比 ，TreeWalker 类 型 在 遍历 DOM 时 拥有 更 大 的 灵活 性 。 由 于 正中 没有 对 
应 的 类 型 和 方法 ， 所 以 使 用 遍历 的 跨 浏览 器 解决 方案 非常 少见 。 














12.4 ”范围 


为 了 让 开发 人 员 更 方便 地 控制 页 面 ,“DOM2 级 遍历 和 范围 ”模块 定义 了 “范围 ”( range ) 接口 。 通 
过 范围 可 以 选择 文档 中 的 一 个 区 域 ， 而 不 必 考 虑 节点 的 界限 ( 选择 在 后 台 完 成 ， 对 用 户 是 不 可 见 的 )。 
在 常规 的 DOM 操作 不 能 更 有 效 地 修改 文档 时 ， 使 用 范围 往往 可 以 达到 目的 。Firefox 、Opera 、Safari 和 
Chrome 都 支持 DOM 范围 。IE 以 专 有 方式 实现 了 自己 的 范围 特性 。 

































































12.4.1 DOM 中 的 范围 


DOM2 级 在 Document 类 型 中 定义 了 createRange () 方 法 。 在 兼容 DOM 的 浏览 器 中 ， 这 个 方法 
属于 document 对 象 。 使 用 hasFeature () 或 者 直接 检测 该 方法 ， 都 可 以 确定 浏览 器 是 否 支持 范围 。 


Var supportsRange = document.implementation.hasFeature("Range", "2.0"); 
var alsoSupportsRange = (typeof document.createRange == "function"); 


如 果 浏 览 器 支持 范围 ， 那 么 就 可 以 使 用 createRange () 来 创建 DOM 范围 ， 如 下 所 示 : 
Var range = document.createRange(); 
与 节点 类 似 , 新 创建 的 范围 也 直接 与 创建 它 的 文档 关联 在 一 起 ,不 能 用 于 其 他 文档 。 创建 了 范围 之 

后 , 接 下 来 就 可 以 使 用 它 在 后 台 选 择 文档 中 的 特定 部 分 。 而 创建 范围 并 设置 了 其 位 置 之 后 ,还 可 以 针对 

范围 的 内 容 执行 很 多 种 操作 ， 从 而 实现 对 底层 DOM 树 的 更 精细 的 控制 。 

每 个 范围 由 一 个 Range 类 型 的 实例 表示 ， 这 个 实例 拥有 很 多 属性 和 方法 。 下 列 属性 提供 了 当前 范 

习 在 文档 中 的 位 置信 息 。 

口 startContainer: 包含 范围 起 点 的 节点 ( 即 选区 中 第 一 个 节点 的 父 节点 )。 

口 startoffset: 范围 在 startcontainer 中 起 点 的 偏 移 量 。 如 果 startcontainer 是 文本 节 
点 、 注 释 节 点 或 CDATA 节点 ,那么 startoffset 就 是 范围 起 点 之 前 跳 过 的 字符 数量 。 否 则 ， 
startoffset 就 是 范围 中 第 一 个 子 节点 的 索引 。 

口 endContainer: 包含 范围 终点 的 节点 〈《 即 选区 中 最 后 一 个 节点 的 父 节 点 )。 

口 sndoffset: 范 围 在 endcontainer 中 终点 的 偏 移 量 ( 与 startoffset 遵循 相同 的 取 值 规则 )。 

口 commonAncestorContainer: startContainer 和 endcontainer 共同 的 祖先 节点 在 文档 树 
中 位 置 最 深 的 那个 。 

在 把 范围 放 到 文档 中 特定 的 位 置 时 ， 这 些 属性 都 会 被 赋值 。 

1. 用 DOM 范围 实现 简单 选择 

要 使 用 范围 来 选择 文档 中 的 一 部 分 ， 最 简 的 方式 就 是 使 用 selectNode () 或 selectNodecontents ()。 
这 两 个 方法 都 接受 一 个 参数 ， 即 一 个 DOM 节点 ， 然 后 使 用 该 节点 中 的 信息 来 填充 范围 。 其 中 ， 
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selectNode () 方 法 选择 整个 节点 ， 包 括 其 子 节点 ; 而 selectNodeContents() 方 法 则 只 选择 节点 的 
子 节点 。 以 下 面 的 HTML 代码 为 例 。 


<!IDOCTYPE html> 
<html> 
<body> 
<p id="pl"><b>Hello</b> world!</p> 
</body> 
</html> 


我 们 可 以 使 用 下 列 代 码 来 创建 范 有 


Var rangel = Qocument .createRange () ; 
range2 = document.createRange(); 
pl = document .getElementById("pl"); 
rangel .selectNode (pl1); 
range2.selectNodeContents (pl1); 
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DOMRangeExample.htm 


这 里 创建 的 两 个 范围 包含 文档 中 不 同 的 部 分 : rang1 包含 <p/> 元 素 及 其 所 有 子 元 素 , 而 rang2 包 
含 <bp/> 元 素 、 文 本 节点 "Hello" 和 文本 节点 "world!" (如 图 12-6 所 示 )。 


range1 








[ 1 
<p 10 "Bb Hellos /b> Yorld! /p> 





range2 


网 12-6 





在 调用 selectNode() 时 ,startContainer、endContainer 和 commonAncestorContainer 
都 等 于 传人 节点 的 父 节 点 ， 也 就 是 这 个 例子 中 的 document .body。 而 startoffset 属性 等 于 给 定 节 
点 在 其 父 节点 的 childNodes 集合 中 的 索引 (在 这 个 例子 中 是 1 一 一 因为 兼容 DOM 的 浏览 器 将 空格 算 
作 一 个 文本 节点 )，endOffset 等 于 startoffset 加 1 (因为 只 选择 了 一 个 节点 )。 

在 调用 selectNodeContents() 时 ,startContainer .endContainer 和 commonAncestorConta- 
iner 等 于 传人 的 节点 ， 即 这 个 例子 中 的 <pb> 元 素 。 而 startoffset 属性 始终 等 于 0， 因 为 范围 从 给 定 节 
点 的 第 一 个 子 节点 开始 。 最 后 , endoffset 等 于 子 节点 的 数量 (node.childNodes.1ength ), 在 这 | 
子 中 是 2。 

此 外 ， 为 了 更 精细 地 控制 将 哪些 节点 包含 在 范围 中 ， 还 可 以 使 用 下 列 方法 。 

口 setSstartBefore(refNode) : 将 范围 的 起 点 设置 在 refNode 之 前 , 因此 refNode 也 就 是 范围 
选区 中 的 第 一 个 子 节点 。 同 时 会 将 startcontainer 属性 设置 为 refNode. parentNode, 将 
startoffset 属性 设置 为 refNode 在 其 父 节 点 的 childNodes 集合 中 的 索引 

口 setstartAfter (refNode) : 将 范围 的 起 点 设置 在 refNode 之 后 ， 因 此 refNode 也 就 不 在 范 
围 之 内 了 ， 其 下 一 个 同辈 节点 才 是 范围 选区 中 的 第 一 个 子 节点 。 同 时 会 将 startcontainer 属 
性 设置 为 refwode.parentNode， 将 startoffset 属性 设置 为 refNode 在 其 父 节点 的 
childNodes 集合 中 的 索引 加 1。 

口 setEndBefore (refNode) : 将 范围 的 终点 设置 在 refNode 之 前 ， 因 此 refNode 也 就 不 在 范围 
之 内 了 ， 其 上 一 个 同辈 节 点 才 是 范围 选区 中 的 最 后 一 个 子 节点 。 同时 会 将 endcontainer 属性 
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集合 
和 setEnd() 设 置 默 认 值 即 可 。 模仿 selectNode () 和 selectNodeContents() 并 不 是 setstart () 
和 setEnd() 的 主要 用 途 ， 它 们 更 胜 一 筹 的 地 方 在 于 能 够 选择 节点 的 一 部 分 。 





设置 为 refNode.parentNode, 将 endoffset 属性 设置 为 refNode 在 其 父 节点 的 chilgdNodes 
集合 中 的 索引 。 

口 setEngdAfter (refNode) : 将 范围 的 终点 设置 在 refNode 之 后 , 因此 refNode 也 就 是 范围 选区 
中 的 最 后 一 个 子 节点 。 同 时 会 将 endcontainer 属性 设置 为 refNode.parentNode，,， 将 
endoffset 属性 设置 为 refNode 在 其 父 节 点 的 childNodes 集合 中 的 索引 加 1。 

在 调用 这 些 方法 时 ， 所 有 属性 都 会 自动 为 你 设置 好 。 不 过 ,要 想 创建 复杂 的 范围 选区 ,也 可 以 直接 

这 些 属性 的 值 。 

2. 用 DOM 范围 实现 复杂 选择 

要 创建 复杂 的 范围 就 得 使 用 setstart () 和 setEnd() 方 法 。 这 两 个 方法 都 接受 两 个 参数 ， 一 个 参 



















































































照 节点 和 一 个 偏 移 量 值 。 对 setstart () 来 说 ， 参 照 节点 会 变 成 startcontainer， 而 偏 移 量 值 会 变 成 
startoffset。 对 于 setEnd() 来 说 ， 参 照 节点 会 变 成 endcontainer， 而 偏 移 量 值 会 变 成 endoffset。 














可 以 使 用 这 两 个 方法 来 模仿 selectNode () 和 selectNodeContents () 。 来 看 下 面 的 例子 : 





Var rangel = document .createRange () ; 
range2 = document.createRange(); 
pl = document .getElementById("pl"); 
plIndex = -1; 
i, len; 
for (i=0, len=pl.parentNode.childNodes.length; i < len; i++) { 
if (pl.parentNode.childNodes[i] == p1) { 
plIndex = i; 
break; 


} 
rangel.setStart (pl .parentNode, plIndex); 
rangel.setEnd(pl.parentNode, plIndex + 1); 


range2.setstart (pl, 0); 
range2.setEnd(pl, pl.childNodes.length); 


DOMRangeExample2.htm 


显然 ， 要 选择 这 个 节点 (使 用 range1 )， 就 必须 确定 当前 节点 (pl ) 在 其 父 节点 的 childNodes 
的 索引 。 而 要 选择 这 个 节点 的 内 容 (使 用 range2 )， 也 不 必 计 算 什 么 ; 只 要 通过 setstart () 
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假设 你 只 想 选 择 前 面 HTML 示例 代码 中 从 "Hello" 的 "11o" 到 "worlda!" 的 "o" 一 一 很 容易 做 到 。 
第 一 步 是 取得 所 有 节点 的 引用 ， 如 下 面 的 例子 所 示 : 
Var pl = document .getElementById("pl1l"); 
helloNode = pl.firstChild.firstChild; 
worldNode = pl.lastChild; 
DOMRangeExample3.htm 





实际 上 ，"Hello" 文 本 节点 是 <p> 元 素 的 孙子 节点 ， 因 为 它 本 身 是 <b> 元 素 的 一 个 子 节 点 。 因 此 ， 





pl.firstchild 取 得 的 是 <b>, 而 pl.firstchild.firstchild 取 得 的 才 是 这 个 文本 节点 ,"world!" 
文本 节点 是 <zp> 元 素 的 第 二 个 子 节点 (也 是 最 后 一 个 子 节点 )， 因 此 可 以 使 用 p1.1astchilg 取得 该 节 
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点 。 然 后 ， 必 须 在 创建 范围 时 指定 相应 的 起 点 和 终点 ， 如 下 面 的 例子 所 示 。 


Var range = document.createRange(); 
range.setStart (helloNode, 2); 
range.setEnd (worldNode, 3); 














DOMRangeExample3.htm 


因为 这 个 范围 的 选区 应 该 从 "Hello" 中 "e" 的 后 面 开始 ， 所 以 在 setstart() 中 传人 helloNogde 
的 同时 ,传人 了 偏 移 量 2 ( 即 "e" 的 下 一 个 位 置 ; "H" 的 位 置 是 0 )。 设置 选区 的 终点 时 ,在 setEnd() 
中 传人 worlgNoge 的 同时 传人 了 偏 移 量 3， 表示 选 区 之 外 的 第 一 个 字符 的 位 置 ， 这 个 字符 是 "x", 它 的 
位 置 是 3 (位 置 0 上 还 有 一 个 空格 )。 如 图 12-7 所 示 。 

range 


ml 
<p id="pl"><b>lHelllllol< /b> wlolrilel kk /p> 


01234 0123456 


图 12-7 


1 于 helloNode 和 worlgdNode 都 是 文本 节点 ,因此 它们 分 别 变 成 了 新 建 范围 的 startContainer 
和 endContainer。 此 时 startoffset 和 endoffset 分 别 用 以 确定 两 个 节点 所 包含 的 文本 中 的 位 置 ， 
而 不 是 用 以 确定 子 节点 的 位 置 (就 像 传 人 的 参数 为 元 素 节点 时 那样 )。 此 时 的 commonAncestor- 
container 是 <p> 元 素 ， 也 就 是 同时 包含 这 两 个 节点 的 第 一 个 祖先 元 素 。 

当然 ， 仅 仅 是 选择 了 文档 中 的 某 一 部 分 用 处 并 不 大 。 但 重要 的 是 ， 选 择 之 后 才 可 以 对 选区 进行 操作 。 

3. 操作 DOM 范围 中 的 内 容 

在 创建 范围 时 ,内 部 会 为 这 个 范围 创建 一 个 文档 片段 , 范围 所 属 的 全 部 节点 都 被 添加 到 了 这 个 文档 
片段 中 。 为 了 创建 这 个 文档 片段 ， 范 围 内 容 的 格式 必须 正确 有 效 。 在 前 面 的 例子 中 ,我 们 创建 的 选区 分 
别 开 始 和 结束 于 两 个 文本 节点 的 内 部 ， 因 此 不 能 算是 格式 良好 的 DOM 结构 ， 也 就 无 法 通过 DOM 来 表 
示 。 但 是 ， 范 围 知道 自身 缺少 哪些 开标 签 和 闭 标签 ， 它 能 够 重新 构建 有 效 的 DOM 结构 以 便 我 们 对 其 进 
行 操作 。 

对 于 前 面 的 例子 而 言 ， 范 围 经 过 计算 知道 选区 中 缺少 一 个 开始 的 <b> 标 签 ， 因 此 就 会 在 后 台 动 态 加 
和信 一 个 该 标签 ， 同 时 还 会 在 前 面 加 入 一 个 表示 结束 的 </b> 标 签 以 结束 "He" 。 于 是 ， 修 改 后 的 DOM 就 
变 成 了 如 下 所 示 。 


<D><b>He</b><b>11o</b> world!</p> 


另外 ,文本 节点 "world!" 也 被 拆 分 为 两 个 文本 节点 ， 一 个 包含 "wo",， 另 一 个 包含 "zl1d!"。 最 终 的 
DOM 树 如 图 12-8 所 示 ， 右 侧 是 表示 范围 的 文档 片段 的 内 容 。 

像 这 样 创建 了 范围 之 后 ， 就 可 以 使 用 各 种 方法 对 范围 的 内 容 进行 操作 了 【注意 ， 表 示范 朋 
档 片 段 中 的 所 有 节点 ， 都 只 是 指向 文档 中 相应 节点 的 指针 )。 

第 一 个 方法 ， 也 是 最 容易 理解 的 方法 ， 就 是 deletecontents () 。 这 个 方法 能 够 从 文档 中 删除 范 
围 所 包含 的 内 容 。 例 如 : 

Var pl = document .getElementById("p1"); 

helloNode = pl.firstChild.firstChild; 


worldNode = pl.lastChild; 
range = document.createRange(); 
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range.setStart (helloNode, 2); 
range.setEnd (worldNode, 3); 


range.deleteContents(); 
































































































































DOMRangeExample4.htm 
文档 范围 
Element p Document Fragment 
Element Pb Element b 
村 Text He es LS 
Element b Text wo 
| Text 11o 
Text wo 
Text rld! 
图 12-8 





执行 以 上 代码 后 ， 页 面 中 会 显示 如 下 HTML 代码 : 


<p><b>He</b>rld!</p> 


由 于 范围 选区 在 修改 底层 DOM 结构 时 能 够 保证 格式 良好 ， 因 此 即使 内 容 被 删除 了 ， 最 终 的 DOM 
结构 依旧 是 格式 良好 的 。 


与 deletecontents () 方 法 相似 ，extractcontents () 也 会 从 文档 中 移 除 范围 选区 。 但 这 两 个 方 
法 的 区 别 在 于 ，extractcontents () 会 返回 范围 的 文档 片段 。 利 用 这 个 返回 的 值 ， 可 以 将 范围 的 内 容 
插入 到 文档 中 的 其 他 地 方 。 如 下 面 的 例子 所 示 : 


Var pl = document .getElementById("pl1l"); 
helloNode = pl.firstChild.firstChild; 
worldNode = pl.lastChild; 
range = document.createRange(); 
































range.setStart (helloNode, 2); 
range.setEnd (worldNode, 3); 


Var fragment = range.extractContents(); 
pl.parentNode.appendChild(fragment); 


DOMRangeExampleS.htm 
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在 这 个 例子 中 ,我 们 将 提取 出 来 的 文档 片段 添加 到 了 文档 <pody> 元 素 的 末尾 。( 记 住 ,在 将 文档 片 
段 传人 appendchilda() 方 法 中 时 ,添加 到 文档 中 的 只 是 片段 的 子 节点 ， 而 非 片段 本 身 。) 结果 得 到 如 下 
HTML 代码 : 





<p><b>He</b>rld!</p> 
<b>llo</b> wo 


还 一 种 做 法 ， 即 使 用 clonecontents () 创建 范围 对 象 的 一 个 副本 ， 然 后 在 文档 的 其 他 地 方 插 人 该 
副本 。 如 下 面 的 例子 所 示 : 
var pl = document .getElementByIQ("P1") ， 
helloNode = p1.firstchild.firstchila， 


worldNode = pl.lastChild, 
range = document.createRange(); 








range.setSsStart (helloNode, 2); 
range.setEnd (worldNode, 3); 





Var fragment = range.cloneContents(); 
pl.parentNode.appendChild(fragment); 


DOMRangeExample6.htm 


这 个 方法 与 extractcontents() 非 常 类 似 ， 因 为 它们 都 返回 文档 片段 。 它 们 的 主要 区 别 在 于 ， 
cloneContents() 返 回 的 文档 片段 包含 的 是 范围 中 节点 的 副本 ， 而 不 是 实际 的 节点 。 执 行 上 面 的 操作 
后 ， 页 面 中 的 HTML 代码 应 该 如 下 所 示 : 


<p><b>Hello</b> world!</p> 
<b>llo</b> wo 


有 一 点 请 读者 注意 , 那 就 是 在 调用 上 面 介绍 的 方法 之 前 , 拆 分 的 节点 并 不 会 产生 格式 良好 的 文档 片 
段 。 换 句 话 说 ， 原 始 的 HTML 在 DOM 被 修改 之 前 会 始终 保持 不 变 。 

4. 插入 DOM 范围 中 的 内 容 

利用 范围 ,可 以 删除 或 复制 内 容 , 还 可 以 像 前 面 介 绍 的 那样 操作 范围 中 的 内 容 。 使 用 insertNode () 
方法 可 以 向 范围 选区 的 开始 处 插入 一 个 节点 。 假 设 我 们 想 在 前 面 例子 中 的 HIML 前 面 插入 以 下 HTML 
代码 : 

<span style="color: red">Inserted text</span> 

那么 ， 就 可 以 使 用 下 列 代码 : 


Var pl = document .getElementById("pl1"); 
helloNode = pl.firstChild.firstChild; 
worldNode = pl.lastChild; 
range = document.createRange(); 
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range.setStart (helloNode, 2); 
range.setEnd (worldNode, 3); 


Var span = document .createElement ("span"); 

span.style.color = "red"; 

span.appendChild(document .createTextNode ("Inserted text")); 
zange .insertNode (span); 
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运行 以 上 JavaScript 代码 ， 就 会 得 到 如 下 HTML 代码 : 
<p id="pl"><b>He<span style="color: red">Inserted text</span>llo</b> world</p> 


注意 <span> 正好 被 插入 到 了 "Hello" 中 的 "1l11o" 前 面 , 而 该 位 置 就 是 范围 选区 的 开始 位 置 。 还 要 
注意 的 是 ， 由 于 这 里 没有 使 用 上 一 节 介 绍 的 方法 ,结果 原始 的 HTML 并 没有 添加 或 删除 <b> 元 素 。 使 用 
这 种 技术 可 以 插入 一 些 帮 助 提示 信息 ， 例 如 在 打开 新 窗口 的 链接 旁边 插入 一 幅 图 像 。 

除了 向 范围 内 部 插入 内 容 之 外 ,还 可 以 环绕 范围 插入 内 容 , 此 时 就 要 使 用 surroundcontents () 
方法 。 这 个 方法 接受 一 个 参数 ， 即 环绕 范围 内 容 的 节点 。 在 环绕 范围 插入 内 容 时 ， 后 台 会 执行 下 列 

(1) 提取 出 范围 中 的 内 容 〈 类 似 执行 sextractContent () ); 

CO) 将 给 定 节 点 插入 到 文档 中 原来 范围 所 在 的 位 置 上 ; 

(3) 将 文档 片段 的 内 容 添加 到 给 定 节点 中 。 

可 以 使 用 这 种 技术 来 突出 显示 网 页 中 的 某 些 词句 ， 例 如 下 列 代码 : 

























































































Var pl = document .getElementById("pl1l"); 
helloNode = pl.firstChild.firstChild; 
worldNode = pl.lastChild; 
range = document.createRange(); 

range.selectNode (helloNode); 

Var span = document .createElement ("span"); 


span.style.backgroundColor = "yellow"; 
range.surroundContents (span); 


DOMRangeExamples.htm 
会 给 范围 选区 加 上 一 个 黄色 的 背景 。 得 到 的 HTML 代码 如 下 所 示 : 


<p><b><span style="background-color:yellow">Hello</span></b> world!</p> 








为 了 插入 <span>， 范 围 必须 包含 整个 DOM 选区 (不 能 仅仅 包含 选中 的 DOM 节点 )。 

5. 折 又 DOM 范围 

所 谓 折 全 范 围 ， 就 是 指 范围 中 未 选择 文档 的 任何 部 分 。 可 以 用 文本 框 来 描述 折 苹 范围 的 过 程 。 假 设 
文本 框 中 有 一 行文 本 ， 你 用 鼠标 选择 了 其 中 一 个 完整 的 单词 。 然 后 ， 你 单 击 鼠 标 左 键 ， 选 区 消失 ， 而 光 
标 则 落 在 了 其 中 两 个 字母 之 间 。 同 样 ， 在 折 受 范围 时 ， 其 位 置 会 落 在 文档 中 的 两 个 部 分 之 间 ， 可 能 是 范 
恒 选 区 的 开始 位 置 ， 也 可 能 是 结束 位 置 。 图 12-9 展示 了 折 释 范围 时 发 生 的 情形 。 

使 用 collapse () 方 法 来 折 肥 范围 ， 这 个 方法 接受 一 个 参数 ， 一 个 布尔 值 ， 表 示 要 折 秋 到 范围 的 哪 




























































































一 端 。 参数 true 表示 折 秋 到 范围 的 起 点 ,参数 false 表示 折 释 到 范围 的 终点 。 要 确定 范围 已 经 折 释 完 
毕 ， 可 以 检查 collapsed 属性 ， 如 下 所 示 : 

range.collapse (true); // 折 登 到 起 点 

alert (range.collapsed); // 输 出 true 
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<p id="pl"><b>Hel lo</b> wla! </p> 


<p id="p1l"><b>He 


原始 范围 








折 生 到 开始 位 置 


llo</b> world!</p> 


<p id="pl"><b>Hello</b> wla! </p> 





折 释 到 结束 位 置 
图 12-9 





检测 某 个 范围 是 否 处 于 折 和 到 状态， 可 以 帮 有 我 们 确定 范围 中 的 两 个 节点 是 否 紧 密 相 邻 。 例 如 ， 对 于 下 





面 的 HTML 代码 : 











<p id="pl">Paragraph 1</p><p id="p2">Paragraph 2</p> 





如 果 我 们 不 知道 其 实际 构成 ( 比如 说 , 这 行 代码 是 动态 生成 的 ), 那么 可 以 像 下 面 这 样 创建 一 个 范围 。 


Var pl = document .getElementById("pl1") 
p2 = document .getElementById("p2") 








’ 
’ 


range = document.createRange(); 


range.setSstartAfter (p1); 
range.setStartBefore (p2); 


alert (range.collapsed); // 输 出 true 


在 这 个 例子 中 ， 新 创建 的 范围 是 折 著 的 ， 因 为 pl 的 后 面 和 p2 的 前 面 什么 也 没有 。 





6. 比较 DOM 范围 


在 有 多 个 范围 的 情况 下 ， 可 以 使 用 compareBoundaryPoints() 方 法 来 确定 这 些 
的 边界 ( 起 点 或 终点 )。 这 个 方法 接受 两 个 参数 : 表示 比较 方式 的 常量 值 和 要 比较 的 范 








式 的 常量 值 如 下 所 示 。 
































口 Range .END_TO_END (2): 比较 第 一 个 范围 和 第 二 个 范围 的 终点 ; 
口 Range.END_TO_START(3) : 比较 第 一 个 范围 的 终点 








compareBoundaryPoints() 方 法 可 能 的 返回 值 如 下 : 如 果 第 一 个 范 


点 之 前 ,返回 -1; 如 果 两 个 点 相等 ， 返 
1。 来 看 下 面 的 例子 。 





























围 是 否 有 公共 


。 表 示 比 较 方 


[= 











mn 
< 








口 Range.STRART_TO_START(0) : 比较 第 一 个 范围 和 第 二 个 范围 的 起 点 ; 
口 Range.START_TO_END(1) : 比较 第 一 个 范围 的 起 点 


和 第 二 个 范围 的 终点 ; 

















和 第 一 个 范围 的 起 点 。 








围 中 的 点 位 于 第 二 个 范围 中 的 














回 0; 如 果 第 一 个 范 目 





Var rangel = document.createRange(); 
Var range2 = document .createRange () ; 
Var pl = qdqocument .getElementById("pl1"); 





zange1.selectNodqeContents (p1); 
range2.selectNodeContents (P1) ; 





range2.setEndBefore(pl.lastChild); 


alert (rangel .compareBoundaryPoints (Range.START TO_START, 
alert (rangel .compareBoundaryPoints (Range. 


目 中 的 点 位 于 第 














END_TO_END, range2)); 


二 个 范围 中 的 点 之 后 ,返回 


range2)); //0 


Xi 和 


DOMRangeExampley.htm 
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在 这 个 例子 中 , 两 个 范围 的 起 点 实际 上 是 相同 的 ， 因为 它们 的 起 点 都 是 1 selectNodeContents () 
方法 设置 的 默认 值 来 指定 的 ,因此 ,第 一 次 比较 返回 0。 但 是 ,range2 的 终点 由 于 调用 setEndBefore () 
已 经 改变 了 ， 结 果 是 rangel 的 终点 位 于 range2 的 终点 后 面 ( 见 图 12-10 )， 因 此 第 二 次 比较 返回 1。 

range1 


[ 1 
<p id="pl"><b>Hello</b> world!</p> 
| 
























































range2 
图 12-10 


7. 复制 DOM 范围 

可 以 使 用 cloneRange () 方 法 复制 范围 。 这 个 方法 会 创建 调用 它 的 范围 的 一 个 副本 。 

Var newRange = range.cloneRange(); 

新 创建 的 范围 与 原来 的 范围 包含 相同 的 属性 ， 而 修改 它 的 端点 不 会 影响 原来 的 范围 。 

8. 清理 DOM 范围 

在 使 用 完 范围 之 后 ， 最 好 是 调用 aetach () 方 法 ,以便 从 创建 范围 的 文档 中 分 离 出 该 范围 。 调 用 
detach() 之 后 ， 就 可 以 放心 地 解除 对 范围 的 引用 ， 从 而 让 垃圾 回收 机 制 回收 其 内 存 了 。 来 看 下 面 的 
例子 。 


range.detach (); // 从 文档 中 分 离 
range = null; // 解 除 引 用 


在 使 用 范围 的 最 后 再 执行 这 两 个 步骤 是 我 们 推荐 的 方式 。 一 旦 分 离 范 围 ， 就 不 能 再 恢复 使 用 了 。 
12.4.2 1IE8 及 更 早 版 本 中 的 范围 


虽然 耻 9 支持 DOM 范围 , 但 IE8 及 之 前 版 本 不 支持 DOM 范围 。 不过, IE8 及 早期 版 本 支持 一 种 类 
似 的 概念 ， 即 文本 范围 ( text range )。 文 本 范围 是 于 专 有 的 特性 ， 其 他 浏览 器 都 不 支持 。 顾 名 思 义 ， 文 
本 范围 处 理 的 主要 是 文本 (不 一 定 是 DOM 节点 ),。 通过 <body>、<button>、<input> 和 <textarea> 
等 这 几 个 元 素 ， 可 以 调用 createTextRange () 方 法 来 创建 文本 范围 。 以 下 是 一 个 例子 : 

Var range = Qocument .bodqy. createTextRange () ; 

像 这 样 通过 aocument 创建 的 范围 可 以 在 页 面 中 的 任何 地 方 使 用 ( 通过 其 他 元 素 创 建 的 范围 则 只 能 
在 相应 的 元 素 中 使 用 )。 与 DOM 范围 类 似 , 使 用 正文 本 范围 的 方式 也 有 很 多 种 。 

1. 用 IE 范围 实现 简单 的 选择 

选择 页 面 中 某 一 区 域 的 最 简单 方式 ,就 是 使 用 范围 的 fingdText () 方 法 。 这 个 方法 会 找到 第 一 次 出 
现 的 给 定 文 本 ， 并 将 范围 移 过 来 以 环绕 该 文本 。 如 果 没 有 找到 文本 ， 这 个 方法 返回 false; 否则 返回 
true。 同 样 ， 仍 然 以 下 面 的 HTML 代码 为 例 。 

<p id="pl"><b>Hello</b> world!</p> 

要 选择 "Hello"， 可 以 使 用 下 列 代 码 。 


Var range 
var found 
















































































































































































































































































document .bodqy. createTextRange ( ) ; 
range.findText ("Hello"); 
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在 执行 完 第 二 行 代 码 之 后 ,文本 "Hello" 就 被 包围 在 范围 之 内 了 。 为 此 ， 可 以 检查 范围 的 text 属 
性 来 确认 〈 这 个 属性 返回 范围 中 包含 的 文本 )， 或 者 也 可 以 检查 findText () 的 返回 值 一 一 在 找到 了 文 
本 的 情况 下 返回 值 为 true。 例如: 


alert (found); //true 
alert (range.text); //"Hello" 


还 可 以 为 findText () 传人 另 一 个 参数 ， 即 一 个 表示 向 哪个 方向 继续 搜索 的 数值 。 负 值 表示 应 该 从 
当前 位 置 向 后 搜索 , 而 正 值 表示 应 该 从 当前 位 置 向 前 搜索 。 因 此 , 要 查找 文档 中 前 两 个 "Hello" 的 实例 ， 
应 该 使 用 下 列 代码 。 


var found = range.findText ("Hello"); 
var foundAgain = range.findText ("Hello", 1); 


正中 与 DOM 中 的 selectNode() 方 法 最 接近 的 方法 是 moveToElementText () , 这 个 方法 接受 一 
个 DOM 元 素 ， 并 选择 该 元 素 的 所 有 文本 ,包括 HTML 标签 。 下 面 是 一 个 例子 。 
Var range = document.body.createTextRange(); 


Var pl = document .getElementById("pl1"); 
range.moveToElementText (p1); 
























































eRangekxample? htm 
在 文本 范围 中 包含 HTML 的 情况 下 ， 可 以 使 用 htmlText 属性 取得 范围 的 全 部 内 容 ， 包 括 HTML 
和 文本 ， 如 下 面 的 例子 所 示 。 
alert (range.htmlText); 
IE 的 范围 没有 任何 属性 可 以 随 着 范围 选区 的 变化 而 动态 更 新 。 不 过 ,其 parentElement () 方 法 倒 
是 与 DOM 的 commonAncestorContainer 属性 类 似 。 



































Var ancestor = range.parentElement (); 

这 样 得 到 的 父 元 素 始 终 都 可 以 反映 文本 选区 的 父 节点 。 

2. 使 用 IE 范围 实现 复杂 的 选择 

在 IE 中 创建 复杂 范围 的 方法 ， 就 是 以 特定 的 增 量 向 四 周 移动 范围 。 为 此 ,IE 提供 了 4 个 方法 : 
move()、moveStart ()、moveEnd() 和 expand() 。 这 些 方法 都 接受 两 个 参数 : 移动 单位 和 移动 单位 
的 数量 。 其 中 ， 移 动 单位 是 下 列 一 种 字符 串 值 。 
口 "character": 逐个 字符 地 移动 。 
口 "word" : 逐个 单词 (一 系列 非 空 格 字 符 ) 地 移动 。 
口 "sentence": 逐个 句子 (一 系列 以 句号 、 问 号 或 叹 号 结尾 的 字符 ) 地 移动 。 
口 "textedit": 移动 到 当前 范围 选区 的 开始 或 结束 位 置 。 

通过 movestart () 方 法 可 以 移动 范围 的 起 点 , 通过 moveEnd() 方 法 可 以 移动 范围 的 终点 , 移动 的 
幅度 由 单位 数量 指定 ， 如 下 面 的 例子 所 示 。 


range.moveStart ("word", 2); // 起 点 移动 2 个 单词 
range.moveEnd ("character", 1); // 终 点 移动 1 个 字符 


使 用 expand() 方 法 可 以 将 范围 规范 化 。 换 句 话说 ，expana() 方 法 的 作用 是 将 任何 部 分 选择 的 文 
本 全 部 选中 。 例 如 ， 当 前 选择 的 是 一 个 单词 中 间 的 两 个 字符 , 调用 expanad ("wora") 可 以 将 整个 单词 都 
包含 在 范围 之 内 。 
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而 move () 方 法 则 首先 会 折 秋 当前 范围 ( 让 起 点 和 终点 相等 )， 然 后 再 将 范围 移动 指定 的 单位 数量 ， 
如 下 面 的 例子 所 示 。 

range.move ("character", 5); // 移 动 5 个 字符 

调用 move () 之后， 范围 的 起 点 和 终点 相同 ， 因 此 必须 再 使 用 movestart () 或 moveEnd () 创建 新 
的 选区 。 

3. 操作 IE 范围 中 的 内 容 

在 正中 操作 范围 中 的 内 容 可 以 使 用 text 属性 或 pasteHTML () 方 法 。 如 前 所 述 ， 通 过 text 属性 
可 以 取得 范围 中 的 内 容 文 本 ; 但 是 ， 也 可 以 通过 这 个 属性 设置 范围 中 的 内 容 文 本 。 来 看 一 个 例子 。 

Var range = document .body.createTextRange(); 


range.findText ("Hello"); 
range.text = "Howdy"; 


如 果 仍 以 前 面 的 Hello World 代码 为 例 ， 执 行 以 上 代码 后 的 HTML 代码 如 下 。 
<p id="pl"><b>Howdy</b> world!</p> 


注意 ， 在 设置 text 属性 的 情况 下 ，HTML 标签 保持 不 变 。 
要 向 范围 中 插入 HTML 代码 ， 就 得 使 用 pasteHTML () 方 法 ， 如 下 面 的 例子 所 示 。 
Var range = document .bodqy.createTextRange () ; 


range.findText ("Hello"); 
range.pasteHTML("<em>Howdy</em>"); 














































































































TERangeExample3.htm 

执行 这 些 代码 后 ， 会 得 到 如 下 HTML。 

<p id="pl"><b><em>Howdy</em></b> world!</p> 

不 过 ， 在 范围 中 包含 HTML 代码 时 ， 不 应 该 使 用 pasteHmMr () ， 因 为 这 样 很 容易 导致 不 可 预料 的 
结果 一 一 很 可 能 是 格式 不 正确 的 HTML。 

4. 折 又 IE 范围 

下 为 范围 提供 的 collapse() 方 法 与 相应 的 DOM 方法 用 法 一 样 : 传人 true 把 范围 折 释 到 起 点 ， 
传人 false 把 范围 折 双 到 终点 。 例 如 : 

range.collapse (true); // 折 登 到 起 点 

可 惜 的 是 ， 没 有 对 应 的 collapsed 属性 让 我 们 知道 范围 是 否 已 经 折 生 完毕 。 为 此 ， 必 须 使 用 
boundingwidth 属性 ， 该 属性 返回 范围 的 宽度 ( 以 像素 为 单位 )。 如 果 boundingwidtn 属性 等 于 0， 
就 说 明 范 围 已 经 折 和 县 了 : 


var isCollapsed = (range.boundingWidth == 0) 






















































































此 外 ， 还 有 boundingHeight 、boundingLeft 和 boundingTop 等 属性 ， 虽然 它们 都 不 像 
boundingwidth 那么 有 用 ,但 也 可 以 提供 一 些 有 关 范 围 位 置 的 信息 。 

5. 比较 IE 范围 

正中 的 compareEndPoints() 方 法 与 DOM 范围 的 compareBoundaryPoints() 方 法 类 似 。 这 个 
方法 接受 两 个 参数 : 比较 的 类 型 和 要 比较 的 范围 。 比 较 类 型 的 取 值 范围 是 下 列 几 个 字符 串 值 : 
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"StartToStart" 、"StartToEnd" 、"EndToEnd" 和 "EnaTostart"。 这 几 种 比较 类 型 与 比较 DOM 范 
围 时 使 用 的 几 个 值 是 相同 的 。 

同样 与 DOM 类 似 的 是 ，compareEnqPoints () 方 法 也 会 按照 相同 的 规则 返回 值 ， 即 如 果 第 一 个 范 
围 的 边界 位 于 第 二 个 范围 的 边界 前 面 , 返回 -1; 如 果 二 者 边界 相同 ， 返回 0; 如 果 第 一 个 范围 的 边界 位 
于 第 二 个 范围 的 边界 后 面 , 返回 1。 仍 以 前 面 的 Hello World 代码 为 例 , 下 列 代 码 将 创建 两 个 范围 ,一 个 
选择 "Hello world!" (包括 <b> 标 签 )， 另 一 个 选择 "Hello"。 





















































document .bodqy .createTextRange () ; 
document .bodqy .createTextRange () ; 


Var rangel = 
Var range2 = 
zangde1.findqText ("Hello world!"); 
range2.findText ("Hello"); 


alert (rangel .compareEndPoints ("StartToStart", range2)); HO 
alert (rangel .compareEndPoints ("EndToEnd", range2)); 作证 
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于 这 两 个 范围 共享 同一 个 起 点 ， 所 以 使 用 compareEndPoints () 比较 起 点 返回 0。 而 rangel 
的 终点 在 range2 的 终点 后 面 ， 所 以 compareEndPoints() 返 回 1。 
IE 中 还 有 两 个 方法 ， 也 是 用 于 比较 范围 的 : isEqual () 用 于 确定 两 个 范围 是 否 相 等 ，inRange () 
用 于 确定 一 个 范围 是 否 包含 另 一 个 范围 。 下 面 是 相应 的 示例 。 
Var rangel = qdqocument .bodqy.createTextRange () ; 
“9 Var range2 = document .body.createTextRange(); 
rangel .findText ("Hello World"); 
range2.findText ("Hello"); 


alert ("rangel.isEqual (range2): " + rangel.isEqual (range2)); //false 
alert ("rangel.inRange(range2):" + rangel.inRange (range2)); //true 
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IERangeExample6.htm 


这 个 例子 使 用 了 与 前 面相 同 的 范围 来 示范 这 两 个 方法 。 由 于 这 两 个 范围 的 终点 不 同 , 所 以 它们 不 相 
等 ， 调 用 isEqual () 返 回 false。 由 于 range2 实际 位 于 rangel 内 部 ， 它 的 终点 位 于 后 者 的 终点 之 
前 、 起 点 之 后 ， 所 以 range2 被 包含 在 rangel 内 部 ， 调 用 inRange () 返 回 true。 

6. 复制 IE 范围 

在 正中 使 用 auplicate() 方 法 可 以 复制 文本 范围 ， 结 果 会 创建 原 范 围 的 一 个 副本 ， 如 下 面 的 例子 


所 示 。 
var newRange = range.duplicate(); 


新 创建 的 范围 会 带 有 与 原 范围 完全 相同 的 属性 。 


12.5 小结 


DOM2 级 规范 定义 了 一 些 模块 ， 用 于 增强 DOM1 级 。“DOM2 级 核心 ”为 不 同 的 DOM 类 型 引入 了 
一 些 与 XML 命名 空间 有 关 的 方法 。 这 些 变 化 只 在 使 用 XML 或 XHTML 文档 时 才 有 用 ; 对 于 HTML 文 
档 没有 实际 意义 。 除 了 与 XML 命名 空间 有 关 的 方法 外 ,“DOM2 级 核心 ”还 定义 了 以 编程 方式 创建 
Document 实例 的 方法 ， 也 支持 了 创建 DocumentType 对 象 。 
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“DOM2 级 样式 ”模块 主要 针对 操作 元 素 的 样式 信息 而 开发 ， 其 特性 简要 总 结 如 下 。 

口 每 个 元 素 都 有 一 个 关联 的 style 对 象 ， 可 以 用 来 确定 和 修改 行内 的 样式 。 

口 要 确定 某 个 元 素 的 计算 样式 (包括 应 用 给 它 的 所 有 CSS 规则 ), 可 以 使 用 getcomputedstyle() 

方法 。 

口 正 不 支持 getcomputedSstyle () 方 法 ,但 为 所 有 元 素 都 提供 了 能 够 返回 相同 信息 currentstyle 

属性 。 

口 可 以 通过 document .styleSheets 集合 访问 样式 表 。 

口 除 正 之 外 的 所 有 浏览 器 都 支持 针对 样式 表 的 这 个 接口 ，IE 也 为 几乎 所 有 相应 的 DOM 功能 提供 

了 自己 的 一 套 属 性 和 方法 。 

“DOM2 级 遍历 和 范围 ”模块 提供 了 与 DOM 结构 交互 的 不 同方 式 ， 简 要 总 结 如 下 。 

口 遍历 即使 用 NodeIterator 或 TreeWalker 对 DOM 执行 深度 优先 的 遍历 。 

口 NodeIterator 是 一 个 简单 的 接口 ， 只 允许 以 一 个 节点 的 步 幅 前 后 移动 。 而 Treewalker 在 提 
供 相 同 功能 的 同时 , 还 支持 在 DOM 结构 的 各 个 方向 上 移动 , 包括 父 节 点 、 同 辈 节 点 和 子 节 点 等 
方向 。 

口 范围 是 选择 DOM 结构 中 特定 部 分 ， 然 后 再 执行 相应 操作 的 一 种 手段 。 

口 使 用 范围 选区 可 以 在 删除 文档 中 某 些 部 分 的 同时 ， 保 持 文档 结构 的 格式 良好 ， 或 者 复制 文档 中 

的 相应 部 分 。 

口 IE8 及 更 早 版 本 不 支持 “DOM2 级 遍历 和 范围 ”模块 ,但 它 提供 了 一 个 专 有 的 文本 范 目 
以 用 来 完成 简单 的 基于 文本 的 范围 操作 。IE9 完全 支持 DOM 遍历 。 
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本 章 内 容 

口 理解 事件 流 

口 使 用 事件 处 理 程序 
口 不 同 的 事件 类 型 














avaScript 与 HTML 之 间 的 交互 是 通过 事件 实现 的 。 事 件 ， 就 是 文档 或 浏览 大 窗 口中 发 生 的 一 些 





特定 的 交互 瞬间 。 可 以 使 用 侦 听 器 (或 处 理 程序 ) 来 预订 习 





码 。 这 种 在 传统 软件 工程 中 被 称 为 观察 员 模式 的 模型 ， 
面 的 外 观 (HTML 和 CSS 代码 ) 之 间 的 松散 看 合 。 
































人 件 ， 以 便 事件 发 生 时 执行 相应 的 代 


支持 页 面 的 行为 (JavaScript 代码 ) 与 页 





事件 最 早 是 在 IE3 和 Netscape Navigator 2 中 出 现 的 ， 当 时 是 作为 分 担 服务 需 运算 负载 的 一 种 手段 。 


在 IE4 和 Navigator4 发布 时 , 这 两 种 浏览 器 都 提供 了 相似 但 不 相同 的 API, 这 些 API 并 存 经 过 了 好 几 个 
主要 版 本 。DOM2 级 规范 开始 尝试 以 一 种 符合 逻辑 的 方式 来 标准 化 DOM 事件 。IE9、Firefox、Opera、 
Safari 和 Chrome 全 都 已 经 实现 了 “DOM2 级 事件 ”模块 的 核心 部 分 。IE8 是 最 后 一 个 仍然 使 用 其 专 有 事 























件 系统 的 主要 浏览 需 。 








浏览 器 的 事件 系统 相对 比较 复杂 。 尽 管 所 有 主要 浏览 器 已 经 实现 了 “DOM2 级 事件 ”， 但 这 个 规范 
本 身 并 没有 涵盖 所 有 事件 类 型 。 浏 览 需 对 象 模型 (BOM ) 也 支持 一 些 事件 ， 这 些 事件 与 文档 
( DOM ) 事件 之 间 的 关系 并 不 十 分 清晰 ,因为 BOM 事件 长 期 没有 规范 可 以 遵循 (HTML5 后 来 给 出 了 详 


























细 的 说 明 )。 随 着 DOM3 级 的 出 现 ， 增 强 后 的 DOM 事件 API 变 得 更 加 繁琐 。 使 用 事件 有 时 相 

















有 时 则 非常 复杂 ， 难 易 程 度 会 因 你 的 需求 而 不 同 。 不 过 ， 有 关 寻 


13.1 事件 流 


当 浏 览 器 发 展 到 第 四 代 时 (IE4 及 Netscape Communicator 4 








的 问题 : 页 面 的 哪 一 部 分 会 拥有 某 个 特定 的 事件 ?要 明白 这 个 问题 问 的 是 什么 ， 





























对 象 模型 


对 简单 ， 





丰 件 的 一 些 核心 概念 是 一 定 要 到 


E 解 的 。 


), 浏览 器 开发 团队 遇 到 了 一 个 很 有 意思 











可 以 想象 画 在 一 张 纸 上 


的 一 组 同心 圆 。 如 果 你 把 手指 放 在 圆心 上 ,那么 你 的 手指 指向 的 不 是 一 个 圆 ， 而 是 纸 上 的 所 有 圆 。 两 家 
公司 的 浏览 需 开 发 团队 在 看 待 浏览 需 事 件 方面 还 是 一 致 的 。 如 果 你 单 击 了 某 个 按钮 ， 他 们 都 认为 单 击 事 
件 不 仅仅 发 生 在 按钮 上 。 换 句 话说 ,在 单 击 按钮 的 同时 ,你 也 单 击 了 按钮 的 容器 元 素 ， 甚 至 也 单 击 了 整 


























个 页 再 





]。 














事件 流 描述 的 是 从 页 面 中 接收 事件 的 顺序 。 但 有 意思 的 是 ，IE 和 Netscape 开发 团队 居然 提出 了 差 




















不 多 是 完全 相反 的 事件 流 的 概念 。IE 的 事件 流 是 事件 冒 泡 流 ， 而 Netscape Communicator 的 习 


件 捕获 流 。 
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13.1.1 事件 冒 泡 


IE 的 事件 流 叫 做 事件 冒 泡 (event bubbling )， 即 事件 开始 时 由 最 具体 的 元 素 ( 文档 中 髓 套 层次 最 深 
的 那个 节点 ) 接收 ， 然 后 逐 级 向 上 传播 到 较为 不 具体 的 节点 (文档 )。 以 下 面 的 HTML 页 面 为 例 : 

<!DOCTYPE html> 

<html> 

<head> 
<title>Event Bubbling Example</title> 
</head> 
<body> 
<div id="myDiv">Click Me</div> 

</body> 

</html> 

如 果 你 单 击 了 页 面 中 的 <aiv> 元 素 ， 那 么 这 个 click 事件 会 按照 如 下 顺序 传播 : 

(1) <div> 

(2) <body> 

(3) <html> 

(4) document 

也 就 是 说 ，click 事件 首先 在 <div> 元 素 上 发 生 ， 而 这 个 元 素 就 是 我 们 单 击 的 元 素 。 然 后 ，click 
事件 治 DOM 树 向 上 传播 , 在 每 一 级 节点 上 都 会 发 生 ， 直 至 传播 到 document 对 象 。 图 13-1 展示 了 事件 
冒 泡 的 过 程 。 

































































Document (9) ) 


Element html G) | 













Element body 
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Element div 


图 13-1 


所 有 现代 浏览 器 都 支持 事件 冒 泡 ， 但 在 具体 实现 上 还 是 有 一 些 差 别 。IE5.5 及 更 早 版 本 中 的 事件 冒 
泡 会 跳 过 <html> 元 素 ( 从 <body> 直 接 跳 到 document )。IE9、Firefox 、Chrome 和 Safari 则 将 事件 一 直 
冒 泡 到 window 对 象 。 


13.1.2 事件 捕获 


Netscape Communicator 团队 提出 的 另 一 种 事件 流 叫 做 事件 捕获 〈event capturing )。 事 件 捕 获 的 思想 
是 不 太 具 体 的 节点 应 该 更 早 接收 到 事件 , 而 最 具体 的 节点 应 该 最 后 接收 到 事件 。 事件 捕获 的 用 意 在 于 在 
事件 到 达 预 定 目 标 之 前 捕获 它 。 如 果 仍 以 前 面 的 HTML 页 面 作为 演示 事件 捕获 的 例子 , 那么 单 击 <div> 
元 素 就 会 以 下 列 顺序 触发 click 事件 。 


(1) document 
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(2) <html> 
(3) <body> 
(4) <div> 


在 事件 捕获 过 程 中 ，document 对 象 首先 接收 到 click 事件 , 然后 事件 沿 DOM 树 依 次 向 下 , 一 直 











传播 到 事件 的 实际 目标 ， 即 <aiv> 元 素 。 图 13-2 展示 了 事件 捕获 的 过 程 。 


闫 


最 多 


TS 


山中 





有 件 捕获 是 Netscape 








Document 





Element body 


Element div 2) 


图 13-2 

















Communicator 唯一 支持 的 事件 流 模 型 ， 但 IE9、Safari 、Chrome 、Opera 


和 Firefox 目前 也 都 支持 这 种 事件 流 模 型 。 尽 管 “DOM2 级 事件 ”规范 要 求 事件 应 该 从 document 对 象 
开始 传播 ， 但 这 些 浏览 器 都 是 从 window 对 象 开始 捕获 事件 的 。 























1 于 老 版 本 的 浏览 器 不 支持 ， 因 此 很 少 有 人 使 用 事件 捕获 。 我 们 也 建议 读 考 放心 地 使 用 事件 冒 泡 ， 


在 有 特殊 需要 时 再 使 用 事件 捕获 。 


13.1.3 ”DOM 事件 流 


“DOM2 级 事件 ”规定 的 事 
先 发 生 的 是 事件 捕获 ， 为 截获 





件 流 包括 三 个 阶段 :事件 捕获 阶段 、 处 于 目标 阶段 和 事件 冒 泡 阶 段 。 首 
件 提供 了 机 会 。 然 后 是 实际 的 目标 接收 到 事件 。 最 后 一 个 阶段 是 冒 泡 阶 














段 ,可 以 在 这 个 阶段 对 事件 做 
示 顺 序 触 发 事件 。 





响应 。 以 前 面 简单 的 HTML 页 面 为 例 ， 单 击 <aiv> 元 素 会 按照 图 13-3 所 


Document C) 
人 Element html 冒 泡 阶段 


Element body @) \ 


捕获 阶段 


图 13-3 










































在 DOM 事件 流 中 , 实际 的 目标 ( <aiv> 元 素 ) 在 捕获 阶段 不 会 接收 到 事件 。 这 意味 着 在 捕获 阶段 ， 
事件 从 aocument 到 <html1> 再 到 <bodqy> 后 就 停止 了 .下 一 个 阶段 是 “处 于 目标 ”阶段 ,于 是 事件 在 <aiv> 
上 发 生 ， 并 在 事件 处 理 〈 后 面 将 会 讨论 这 个 概念 ) 中 被 看 成 冒 泡 阶段 的 一 部 分 。 然 后 ， 冒 泡 阶 段 发 生 ， 




















事件 又 传播 回 文档 。 
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多 数 支持 DOM 事件 流 的 浏览 器 都 实现 了 一 种 特定 的 行为 ;即使 “DOM2 级 事件 ”规范 明确 要 求 捕 
获 阶段 不 会 涉及 事件 目标 ， 但 IE9、Safari 、Chrome 、Firefox 和 Opera 9.5 及 更 高 版 本 都 会 在 捕获 阶段 触 
发 事件 对 象 上 的 事件 。 结 果 ， 就 是 有 两 个 机 会 在 目标 对 象 上 面 操作 事件 。 























IE9、Opera、Firefox、Chrome 和 Safari 都 支持 DOM 事件 流 ; IE8 及 更 早 版 本 不 


支持 DOM 事件 流 。 





13.2 事件 处 理 程序 


事件 就 是 用 户 或 浏览 器 自身 执行 的 某 种 动作 。 诸 如 click、load 和 mouseover, 都 是 事件 的 名 字 。 
而 响应 某 个 事件 的 函数 就 叫做 事件 处 理 程序 ( 或 事件 侦 听 器 )。 事 件 处 理 程序 的 名 字 以 "on" 开 头 ， 因 此 
click 事件 的 事件 处 理 程序 就 是 onclick，1loadq 事件 的 事件 处 理 程 序 就 是 onload。 为 事件 指定 处 理 
程序 的 方式 有 好 几 种 。 


13.2.1 HTML 事 件 处 理 程序 


某 个 元 素 支 持 的 每 种 事件 ， 都 可 以 使 用 一 个 与 相应 事件 处 理 程序 同名 的 HTML 特性 来 指定 。 这 个 
特性 的 值 应 该 是 能 够 执行 的 JavaScript 代码 。 例 如 ， 要 在 按钮 被 单 击 时 执行 一 些 JavaScript， 可 以 像 下 画 
这 样 编写 代码 : 

<input type="button" value="Click Me" onclick="alert('Clicked')" /> 

当 单 击 这 个 按钮 时 ， 就 会 显示 一 个 警告 框 。 这 个 操作 是 通过 指定 onclick 特性 并 将 一 些 JavaScript 
代码 作为 它 的 值 来 定义 的 。 由 于 这 个 值 是 JavaScript, 因此 不 能 在 其 中 使 用 未 经 转 义 的 HTML 语法 字符 ， 
例如 和 号 (&)、 双 引号 ("")、 小 于 号 (<) 或 大 于 号 (> )。 为 了 避免 使 用 HTML 实体 ， 这 里 使 用 了 单 
引号 。 如 果 想 要 使 用 双 引 号 ， 那 么 就 要 将 代码 改写 成 如 下 所 示 : 


<input type="button" value="Click Me" onclick="alert (&quot;Clicked&quot;)" /> 


在 HIML 中 定义 的 事件 处 理 程序 可 以 包含 要 执行 的 具体 动作 ， 也 可 以 调用 在 页 面 其 他 地 方 定义 的 
脚本 ， 如 下 面 的 例子 所 示 : 


<script type="text/javascript"> 
function showMessage(){ 
alert ("Hello world!"); 
} 
</script> 
<input type="button" value="Click Me" onclick="showMessage()" /> 


































































































HIMLEventHandlerExample01.htm 


在 这 个 例子 中 , 单 击 按钮 就 会 调用 showMessage () 函数 。 这 个 函数 是 在 一 个 独立 的 <script> 元 素 
中 定义 的 ， 当 然 也 可 以 被 包含 在 一 个 外 部 文件 中 。 事 件 处 理 程 序 中 的 代码 在 执行 时 ， 有 权 访 问 全 局 作用 
域 中 的 任何 代码 。 

这 样 指定 事件 处 理 程序 具有 一 些 独到 之 处 。 首 先 ， 这 样 会 创建 一 个 封装 着 元 素 属 性 值 的 函数 。 这 个 
函数 中 有 一 个 局 部 变量 event ， 也 就 是 事件 对 象 ( 本 章 稍 后 讨论 ): 
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<!-- 输出 "click" --> 
<input type="button" value="Click Me" onclick="alert(event .type) "> 





通过 event 变量 ,可 以 直接 访问 事件 对 象 ， 你 不 用 自己 定义 它 ， 也 不 用 从 函数 的 参数 列表 中 读 取 。 
在 这 个 函数 内 部 ，this 值 等 于 事件 的 目标 元 素 ， 例 如 : 











<!1-- 输出 "Click Me" --> 
<input type="button" value="Click Me" onclick="alert (this.value)"> 











关于 这 个 动态 创建 的 函数 ， 另 一 个 有 意思 的 地 方 是 它 扩展 作用 域 的 方式 。 在 这 个 函数 内 部 ， 可 以 像 
访问 局 部 变量 一 样 访问 document 及 该 元 素 本 身 的 成 员 。 这 个 函数 使 用 with 像 下 面 这 样 扩展 作用 域 : 





function(){ 
with(document){ 
with(this)t 
/ /元 素 属性 值 
} 


} 




















如 此 一 来 ,事件 处 理 程 序 要 访问 自己 的 属性 就 简单 多 了 。 下 面 这 行 代码 与 前 面 的 例子 效果 相同 : 

















<!1-- 输出 "Click Me" --> 
<input type="button" value="Click Me" onclick="alert(value)"> 


如 果 当 前 元 素 是 一 个 表单 输入 元 素 ， 则 作用 域 中 还 会 包含 访问 表单 元 素 ( 父 元 素 ) 的 和 人口， 这 个 函 
数 就 变 成 了 如 下 所 示 : 














function(){ 
with(document){ 
with(this.Eorm){ 
withn(this)t 
/ /元 素 属性 值 
} 


实际 上 , 这 样 扩展 作用 域 的 方式 , 无 非 就 是 想 让 事件 处 理 程序 无 需 引 用 表单 元 素 就 能 访问 其 他 表单 
字段 。 例 如 : 








中) <form method="post"> 
<input type="text" name="username" value=""> 
<input type="button" value="Echo Username" onclick="alert (username.value)"> 





</form> 
HTMLEventHandlerExample04.htm 


在 这 个 例子 中 , 单 击 按钮 会 显示 文本 框 中 的 文本 。 值得 注意 的 是 , 这 里 直接 引用 了 username 元 素 。 
不 过 ,在 HTML 中 指定 事件 处 理 程序 有 两 个 缺点 。 首 先 ， 存 在 一 个 时 差 问题 。 因 为 用 户 可 能 会 在 
HTML 元 素 一 出 现在 页 面 上 就 触发 相应 的 事件 , 但 当时 的 事件 处 理 程序 有 可 能 尚 不 具备 执行 条 件 。 以 前 er 
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面 的 例子 来 说 明 ， 假设 showMessage () 函数 是 在 按钮 下 方 、 页 面 的 最 底部 定义 的 。 如 果 用 户 在 页 面 解 
析 showMessage () 函数 之 前 就 单 击 了 按钮 ， 就 会 引发 错误 。 为 此 ,很 多 HIML 事件 处 理 程序 都 会 被 封 
装 在 一 个 try-catch 块 中 ， 以 便 错 误 不 会 浮 出 水 面 ， 如 下 面 的 例子 所 示 : 


<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}"> 


这 样 ,如果 在 showMessage () 函数 有 定义 之 前 单 击 了 按钮 , 用 户 将 不 会 看 到 JavaScript 错误 ,因为 
在 浏览 器 有 机 会 处 理 错误 之 前 ， 错 误 就 被 捕获 了 。 

另 一 个 缺点 是 , 这 样 扩展 事件 处 理 程序 的 作用 域 链 在 不 同 浏览 器 中 会 导致 不 同 结果 。 不 同 JavaScript 
引擎 遵循 的 标识 符 解 析 规 则 略 有 差异 ， 很 可 能 会 在 访问 非 限 定 对 象 成 员 时 出 错 。 

通过 HTML 指定 事件 处 理 程序 的 最 后 一 个 缺点 是 HTML 与 JavaScript 代码 紧密 耦合 。 如果 要 更 换 事 
件 处 理 程序 ， 就 要 改动 两 个 地 方 : HTML 代码 和 JavaScript 代码 。 而 这 正 是 许多 开发 人 员 据 弃 HIML 事 
件 处 理 程 序 ， 转 而 使 用 JavaScript 指定 事件 处 理 程序 的 原因 所 在 。 
























































要 了 解 关于 HTML 事件 处 理 程序 缺点 的 更 多 信息 ， 请 参考 Garrett Smith 的 文章 


“Event Handler Scope” (www.jibbering.com/faq/names/event handler.html ) 。 





13.2.2 DOM0 级 事件 处 理 程 序 


通过 JavaScript 指定 事件 处 理 程序 的 传统 方式 ， 就 是 将 一 个 函数 赋值 给 一 个 事件 处 理 程序 属性 。 这 
种 为 事件 处 理 程序 赋值 的 方法 是 在 第 四 代 Web 浏览 器 中 出 现 的 ， 而 且 至 今 仍然 为 所 有 现代 浏览 器 所 文 
持 。 原 因 一 是 简单 ， 二 是 具有 路 浏览 器 的 优势 。 要 使 用 JavaScript 指定 事件 处 理 程序 ， 首 先 必 须 取 得 一 
个 要 操作 的 对 象 的 引用 。 
每 个 元 素 (包括 window 和 document ) 都 有 自己 的 事件 处 理 程序 属性 ， 这 些 属性 通常 全 部 小 写 ， 
例如 onclick。 将 这 种 属性 的 值 设 置 为 一 个 函数 ， 就 可 以 指定 事件 处 理 程序 ， 如 下 所 示 : 

Var btn = document .getElementById("myBtn"); 


btn.onclick = function(){ 
alert ("Clicked"); 












































于 

在 此 ， 我 们 通过 文档 对 象 取得 了 一 个 按钮 的 引用 ， 然 后 为 它 指定 了 onclick 事件 处 理 程序 。 但 要 
注意 , 在 这 些 代 码 运行 以 前 不 会 指定 事件 处 理 程序 ,因此 如 果 这 些 代 码 在 页 面 中 位 于 按钮 后 面 ， 就 有 可 
能 在 一 段 时 间 内 怎么 单 击 都 没有 反应 。 

使 用 DOM0 级 方法 指定 的 事件 处 理 程序 被 认为 是 元 素 的 方法 。 因 此 ， 这 时 候 的 事件 处 理 程序 是 在 
元 素 的 作用 域 中 运行 ; 换 句 话说 ， 程 序 中 的 this 引用 当前 元 素 。 来 看 一 个 例子 。 


) Var btn = document .getElementById("myBtn"); 












































btn.onclick = function(){ 
alert (this.id); //"myBtn" 
eg 


DOMLevel0EventHandlerExample01.htm 


单 击 按钮 显示 的 是 元 素 的 ID ， 这 个 ID 是 通过 this.id 取得 的 。 不 仅仅 是 ID ， 实 际 上 可 以 在 事件 
处 理 程序 中 通过 this 访问 元 素 的 任何 属性 和 方法 。 以 这 种 方式 添加 的 事件 处 理 程序 会 在 事件 流 的 骨 泡 
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阶段 被 处 理 。 

也 可 以 删除 通过 DOM0 级 方法 指定 的 事件 处 理 程序 ， 只 要 像 下 面 这 样 将 事件 处 理 程序 属性 的 值 设 
置 为 null 即 可 : 

btn.onclick = null; / /删除 事件 处 理 程序 


将 事件 处 理 程 序 设置 为 null 之 后 ， 再 单 击 按钮 将 不 会 有 任何 动作 发 生 。 




























如 果 你 使 用 HTML 指定 事件 处 理 程序 ， 那 么 onclick 属性 的 值 就 是 一 个 包含 着 
在 同名 HTML 特性 中 指定 的 代码 的 函数 。 而 将 相应 的 属性 设置 为 null1， 也 可 以 删除 
以 这 种 方式 指定 的 事件 处 理 程序 。 


13.2.3 ”DOM2 级 事件 处 理 程 序 


“DOM2 级 事件 ”定义 了 两 个 方法 , 用 于 处 理 指定 和 删除 事件 处 理 程序 的 操作 : addEventListener () 
和 removeEventListener () 。 所 有 DOM 节点 中 都 包含 这 两 个 方法 ,并 且 它 们 都 接受 3 个 参数 : 要 处 
理 的 事件 名 、 作 为 事件 处 理 程序 的 函数 和 一 个 布尔 值 。 最 后 这 个 布尔 值 参数 如 果 是 true， 表 示 在 捕获 
阶段 调用 事件 处 理 程序 ， 如 果 是 false， 表 示 在 冒 泡 阶段 调用 事件 处 理 程 序 。 

要 在 按钮 上 为 click 事件 添加 事件 处 理 程序 ， 可 以 使 用 下 列 代码: 


























Var btn = document .getElementById("myBtn"); 

btn.addEventListener("click", function()t{ 
alert (this.id); 

}, false); 


上 面 的 代码 为 一 个 按钮 添加 了 onclick 事件 处 理 程序 ， 而 且 该 事件 会 在 冒 泡 阶段 被 触发 ( 因为 最 
后 一 个 参数 是 false )。 与 DOM0 级 方法 一 样 ， 这 里 添加 的 事件 处 理 程序 也 是 在 其 依附 的 元 素 的 作用 域 
中 和 运行。 使 用 DOM2 级 方法 添加 事件 处 理 程序 的 主要 好 处 是 可 以 添加 多 个 事件 处 理 程序 。 来 看 下 面 的 
例子 。 


Var btn = document .getElementById("myBtn"); 

btn.addEventListener("click", function()t{ 
alert (this.id); 

}, false); 

btn.addEventListener("click", function()t{ 
alert ("Hello world!"); 

}, false); 





























DOMLevel2EventHandlerExample01.htm 


这 里 为 按钮 添加 了 两 个 事件 处 理 程序 。 这 两 个 事件 处 理 程序 会 按照 添加 它们 的 顺序 触发 , 因此 首先 
会 显示 元 素 的 ID ， 其 次 会 显示 "Hello world! "消息 。 

通过 addEventListener () 添 加 的 事件 处 理 程序 只 能 使 用 removeEventListener () 来 移 除 ; 移 
除 时 传人 的 参数 与 添加 处 理 程序 时 使 用 的 参数 相同 。 这 也 意味 着 通过 addEventListener () 添加 的 匿 
名 函数 将 无 法 移 除 ， 如 下 面 的 例子 所 示 。 











Var btn = document .getElementById("myBtn" ) ; 
btn.addEventListener("click", function()t 
alert (this.id); 
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}, false); 
// 这 里 省 略 了 其 他 代码 
btn.removeEventListener("click",，function(){ // 没 用 


alert (this.id); 
}, false); 





在 这 个 例子 中 ， 我 们 使 用 addEventListener () 添 加 了 一 个 事件 处 理 程序 。 虽 然 调用 remove- 

















Var btn = document .getElementById("myBtn"); 
var handler = function(){ 
alert (this.id); 
}; 
btn.addEventListener("click", handler, false); 


// 这 里 省 略 了 其 他 代码 


btn .removeEventListener ("click"，handler，false); // 有 效 | 














EventListener () 时 看 似 使 用 了 相同 的 参数 , 但 实际 上 , 第 二 个 参数 与 传人 addEventListener() 中 
的 那 一 个 是 完全 不 同 的 函数 。 而 传人 removeEventListener() 中 的 事件 处 理 程序 函数 必须 与 传人 
addEventListener() 中 的 相同 ， 如 下 面 的 例子 所 示 。 











DOMLevel2EventHandlerExample01.htm 





重 写 后 的 这 个 例子 没有 问题 ， 是 因为 在 addEventListener() 和 removeEventListener() 中 使 





日 了 相同 的 函数 。 





大 多 数 情 况 下 ,都 是 将 事件 处 理 程序 添加 到 事件 流 的 胃 泡 阶段 ,这样 可 以 最 大 限度 地 兼容 各 种 浏览 




















器 。 最 好 只 在 需要 在 事件 到 达 目 标 之 前 截获 它 的 时 候 将 事件 处 理 程 序 添 加 到 捕获 阶段 。 如 果 不 是 特别 需 
要 ， 我 们 不 建议 在 事件 捕获 阶段 注册 事件 处 理 程序 。 


四 IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 级 事件 处 理 程序 。 


13.2.4 “IE 事件 处 理 程序 


IE 实现 了 与 DOM 中 类 似 的 两 个 方法 : attachEvent () 和 detach] 








Event ()。 这 两 个 方法 接受 相同 


的 两 个 参数 : 事件 处 理 程序 名 称 与 事件 处 理 程序 函数 。 由 于 IE8 及 更 早 版 本 只 支持 事件 冒 泡 ， 所 以 通过 
attachEvent () 添 加 的 事件 处 理 程序 都 会 被 添加 到 骨 泡 阶段 。 
要 使 用 attachEvent () 为 按钮 添加 一 个 事件 处 理 程序 ， 可 以 使 用 以 下 代码 。 








Var btn = document .getElementByIQ("myBtn" ) ; 

btn.attachEvent ("onclick", function(){ 
alert ("Clicked"); 

}); 








TEEventHandlerExample01.htm 


注意 ，attachEvent () 的 第 一 个 参数 是 "onclick"， 而 非 DOM 的 addEventListener () 方 法 中 
的 "click"s 
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在 正中 使 用 attachEvent () 与 使 用 DOM0 级 方法 的 主要 区 别 在 于 事件 处 理 程序 的 作用 域 。 在 使 
用 DOM0 级 方法 的 情况 下 ,事件 处 理 程序 会 在 其 所 属 元 素 的 作用 域内 运行 ; 在 使 用 attachEvent () 方 
法 的 情况 下 ,事件 处 理 程序 会 在 全 局 作用 域 中 运行 ， 因 此 this 等 于 window。 来 看 下 面 的 例子 。 


Var btn = document .getElementById("myBtn"); 
btn.attachEvent ("onclick", function()t 
alert (this === window); //true 


}) 3 

在 编写 跨 浏览 器 的 代码 时 ， 牢 记 这 一 区 别 非常 重要 。 

与 addEventListener() 类 似 , attachEvent () 方 法 也 可 以 用 来 为 一 个 元 素 添 加 多 个 事件 处 理 程 
序 。 来 看 下 面 的 例子 。 



























































Var btn = document .getElementById("myBtn"); 

btn.attachEvent ("onclick", function()t{ 
alert ("Clicked"); 

已 下 

btn.attachEvent ("onclick", function(){ 
alert ("Hello world!"); 

}); 





IEEventHandlerExample01.htm 


这 里 调用 了 两 次 attachEvent (), 为 同一 个 按钮 添加 了 两 个 不 同 的 事件 处 理 程序 。 不过, 与 DOM 
方法 不 同 的 是 ， Wr ee 它们 的 顺序 执行 ， 而 是 以 相反 的 顺序 被 触发 。 单 击 这 个 例 
子 中 的 按钮 ， 首 先 看 到 的 是 "Hello world!"， 然 后 才 是 "clicked"。 

使 用 attachEvent () 添加 的 事件 可 以 通过 detachEvent () 来 移 除 ， 条件 是 必须 提供 相同 的 参数 。 
与 DOM 方法 一 样 ， te 被 移 除 。 不 过 ， 只 要 能 够 将 对 相同 函数 的 引用 传 
给 detachEvent ()， 就 可 以 移 除 相 应 的 事件 处 理 程序 。 例 如 : 


Var btn = document .getElementById("myBtn"); 
var handler = function()t{ 
alert ("Clicked"); 






































}; 
btn.attachEvent ("onclick", handler); 


// 这 里 省 略 了 其 他 代码 
btn.detachEvent ("onclick", handler); 


TEEventHandlerExample02.htm 


这 个 例子 将 保存 在 变量 nandler 中 的 函数 作为 事件 处 理 程序 。 因此, 后 面 的 detachEvent () 可 以 
使 用 相同 的 函数 来 移 除 事件 处 理 程序 。 

















支持 但 事件 处 理 程序 的 浏览 器 有 IE 和 Opera。 





13.2.5 ”路 浏览 器 的 事件 处 理 程 序 


为 了 以 跨 浏 览 器 的 方式 处 理事 件 ， 不 少 开 发 人 员 会 使 用 能 够 隔离 浏览 器 差异 的 JavaScript 库 ， 还 有 
一 些 开 发 人 员 会 自己 开发 最 合适 的 事件 处 理 的 方法 。 自 己 编写 代码 其 实 也 不 难 ， 只 要 恰当 地 使 用 能 力 检 
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测 即 可 (能力 检 测 在 第 9 章 介 绍 过 )。 要 保证 处 理事 件 的 代码 能 在 大 多 数 浏 览 器 下 一 致 地 运行 ， 只 需 关 
注 冒 泡 阶段 。 

第 一 个 要 创建 的 方法 是 addHandler () ， 它 的 职责 是 视 情况 分 别 使 用 DOM0 级 方法 、DOM2 级 方 
法 或 正方 法 来 添加 事件 。 这 个 方法 叫 EventUtil 的 对 象 , 本 书 将 使 用 这 个 对 象 来 处 理 浏 ? 
器 间 的 差异 。aqqaHanqler () 方 法 接受 3 个 参数 : 要 操作 的 元 素 、 事 件 名 称 和 事件 处 理 程序 函数 。 

与 addHandler () 对 应 的 方法 是 removeHandler () ， 它 也 接受 相同 的 参数 。 这 个 方法 的 职责 是 移 
除 之 前 添加 的 事件 处 理 程序 一 一 无 论 该 事件 处 理 程序 是 采取 什么 方式 添加 到 元 素 中 的 , 如 果 其 他 方法 无 
效 ， 默 认 采 用 DOM0 级 方法 。 

EventUtil 的 用 法 如 下 所 示 。 





























三 



































var EventUtil = { 
SS addHandler: function(element, type, handler)t{ 

if (element.addEventListener)t{ 
element .addEventListener (type, handler, false); 

} else if (element.attachEvent)t{ 
element . attachEvent ("on" + type, handler); 

} else { 
element["on" + type] = handler; 








} 
站 
removeHandler: function(element, type, handler)t{ 
if (element.removeEventListener)t{ 
element .removeEventListener (type, handler, false); 
} else if (element.detachEvent)t{ 
element .detachEvent ("on" + type, handler); 
} else { 
element["on" + type] = null; 











} 


EventUtiljs 


这 两 个 方法 首先 都 会 检测 传人 的 元 素 中 是 否 存 在 DOM2 级 方法 。 如 果 存 在 DOM2 级 方法 ， 则 使 用 
该 方法 : 传人 事件 类 型 、 事 件 处 理 程序 函数 和 第 三 个 参数 false (表示 冒 泡 阶段 )。 如 果 存 在 的 是 下 的 
方法 ， 则 采取 第 二 种 方案 。 注 意 ， 为 了 在 IE8 As 运行 ， 此 时 的 事件 类 型 必须 加 上 "on" 前 级 。 
最 后 一 种 可 能 就 是 使 用 DOM0 级 方法 ( 在 现代 浏览 器 中 ， 应 该 不 会 执行 这 里 的 代码 )。 此 时 ， 我 们 使 用 
的 是 方 括号 语法 来 将 属性 名 指定 为 事件 处 理 程序 ， ws 属性 设置 为 nu11。 
可 以 像 下 面 这 样 使 用 EventUtil 对 象 : 
中， Var btn = document .getElementById ("myBtn"); 


var handler = function()f{ 
alert ("Clicked"); 



















































































下 
EventUtil.addHandler (btn, "click", handler); 


// 这 里 省 略 了 其 他 代码 
EventUtil.removeHandler (btn, "click", handler); 


CrossBrowserEventHandlerExample01.htm 
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addHandler () 和 removeHandler () 没 有 考虑 到 所 有 的 浏览 器 问题 , 例如 在 正 中 的 作用 域 问题 。 
不 过 ,使 用 它们 添加 和 移 除 事件 处 理 程 序 还 是 足够 了 。 此 外 还 要 注意 ，DOM0 级 对 每 个 事件 只 支持 一 
个 事件 处 理 程序 。 好 在 ， 只 支持 DOM0 级 的 浏览 圳 已 经 没有 那么 多 了 ， 因 此 这 对 你 而 言 应 该 不 是 什么 
问题 


13.3 ”事件 对 象 


在 触发 DOM 上 的 某 个 事件 时 ， 会 产生 一 个 事件 对 象 event ， 这 个 对 象 中 包含 着 所 有 与 事件 有 关 的 
信息 。 包 括 导 致 事件 的 元 素 、 事 件 的 类 型 以 及 其 他 与 特定 事件 相关 的 信息 。 例 如 ， 鼠 标 操作 导致 的 事件 
对 象 中 , 会 包含 鼠标 位 置 的 信息 ， 而 键盘 操作 导致 的 事件 对 象 中 ,会 包含 与 按 下 的 键 有 关 的 信息 。 所 有 
浏览 器 都 支持 event 对 象 ， 但 支持 方式 不 同 。 


13.3.1 DOM 中 的 事件 对 象 


兼容 DOM 的 浏览 器 会 将 一 个 event 对 象 传 人 到 事件 处 理 程序 中 ,无 论 指定 事件 处 理 程序 时 使 用 什 
么 方法 (DOM0 级 或 DOM2 级 )， 都 会 传人 event 对 象 。 来 看 下 面 的 例子 。 


































































































var btn = document .getElementById("myBtn"); 
btn.onclick = function(event)t{ 


alert (event .type); //"click" 

}; 

btn.addEventListener("click", function(event)t{ 
alert (event .type); //"click" 

}, false); 


这 个 例子 中 的 两 个 事件 处 理 程序 都 会 弹出 一 个 警告 框 ， 显示 由 event .type 属性 表示 的 事件 类 型 。 
这 个 属性 始终 都 会 包含 被 触发 的 事件 类 型 ， 例 如 "click" (与 传人 addEventListener() 和 
removeEventListener () 中 的 事件 类 型 一 致 )。 

在 通过 HTML 特性 指定 事件 处 理 程 序 时 ， 变 量 event 中 保存 着 event 对 象 。 请 看 下 面 的 例子 。 




















<input type="button" value="Click Me" onclick="alert (event.type)'"/> 


以 这 种 方式 提供 event 对 象 ， 可 以 让 HTML 特性 事件 处 理 程序 与 JavaScript 函数 执行 相同 的 操作 。 
event 对 象 包含 与 创建 它 的 特定 事件 有 关 的 属性 和 方法 。 触 发 的 事件 类 型 不 一 样 ,可 用 的 属性 和 方 
法 也 不 一 样 。 不 过 ， 所 有 事件 都 会 有 下 表 列 出 的 成 员 。 










































































属性 /方法 类 型 读 / 写 说 明 

bubbles Boolean 只 读 ”表明 事件 是 否 骨 泡 

cancelable Boolean 只 读 。 ”表明 是 否 可 以 取消 事件 的 默认 行为 

currentTarget Element 只 读 。 ”其 事件 处 理 程序 当前 正在 处 理事 件 的 那个 元 素 

defaultPrevented Boolean 只 读 为 true 表示 已 经 调用 了 preventDefault() 
(DOM3 级 事件 中 新 增 ) 

detail Integer 只 读 与 事件 相关 的 细节 信息 

eventPhase Integer 只 读 。 ”调用 事件 处 理 程序 的 阶段 ，1 表 示 捕 获 阶 段 ，2 表 















































示 “ 处 于 目标 ”，3 表 示 冒 泡 阶 段 
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( 续 ) 
属性 /方法 类 型 读 / 写 说 明 
preventDefault () Function 只 读 取消 事件 的 默认 行为 。 如 果 cancelable 是 
true， 则 可 以 使 用 这 个 方法 
stopImmediatePropagation () Function 只 读 取消 事件 的 进一步 捕获 或 冒 泡 ， 同 时 阻止 任何 
事件 处 理 程序 被 调用 ( DOM3 级 事件 中 新 增 ) 
stopPropagation () Function 只 读 取消 事件 的 进一步 捕获 或 冒 泡 。 如 果 bubbles 
为 true， 则 可 以 使 用 这 个 方法 











target Element 


只 读 ”事件 的 目标 

i Bo 只 读 。 ”为 true 表 示 事 件 是 浏览 名 生成 的 。 为 false 表 
示 事 件 是 由 开发 人 员 通 过 JavaScript 创 建 的 
(DOM3 级 事件 中 新 增 ) 
























































type String 只 读 ”被 触发 的 事件 的 类 型 
view AbstractView ”只 读 ”与 事件 关联 的 抽象 视图 。 等 同 于 发 生 事件 的 














window 对 象 


在 事件 处 理 程序 内 部 ， 对 象 this 始终 等 于 currentTarget 的 值 ， 而 target 则 只 包含 事件 的 实 
际 目标 。 如 果 直 接 将 事件 处 理 程序 指定 给 了 目标 元 素 , 则 this、currentTarget 和 target 包含 相同 
的 值 。 来 看 下 面 的 例子 。 

Var btn = document .getElementById ("myBtn"); 

btn.onclick = function(event)t{ 


alert (event .currentTarget === this); //true 
alert (event .target === this); //true 
































}; 
DOMEventObjectExample01.htm 
这 个 例子 检测 了 currentTarget 和 target 与 this 的 值 。 由 于 click 事件 的 目标 是 按钮 ,因此 
这 三 个 值 是 相等 的 。 如 果 事 件 处 理 程序 存在 于 按钮 的 父 节 点 中 (例如 aocument .body ), 那么 这 些 值 是 
不 相同 的 。 再 看 下 面 的 例子 。 


document .bodqy.onclick = function(event)t{ 








alert (event.currentTarget === document .body); //true 
alert (this === document .body); //true 
alert (event.target === document.getElementById("myBtn")); //true 





DOMEventObjectExample02.htm 


当 单 击 这 个 例子 中 的 按钮 时 ,this 和 currentTarget 都 等 于 daocument .body, 因为 事件 处 理 程 
序 是 注册 到 这 个 元 素 上 的 。 然 而 ，target 元 素 却 等 于 按钮 元 素 ， 因 为 它 是 click 事件 真正 的 目标 。 由 
于 按钮 上 并 没有 注册 事件 处 理 程序 , 结果 click 事件 就 冒 泡 到 了 document .body, 在 那里 事件 才 得 到 
了 处 理 。 

在 需要 通过 一 个 函数 处 理 多 个 事件 时 ， 可 以 使 用 type 属性 。 例 如 : 


Var btn = document .getElementById("myBtn"); 
var handler = function(event)t{ 
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Switch(event .上 ype){ 
case "click": 


alert ("Clicked"); 


break; 


Case "mouseover 


event .target .style.backgroundColor = "red"; 


break; 


case "mouseout": 


event .target .style.backgroundColor = ""}; 


break; 


}; 


btn.onclick = handler; 


btn.onmouseover = handler; 
btn.onmouseout = handler; 


这 个 例子 定义 了 一 个 名 为 


当 单 击 按钮 时 , 会 出 现 一 个 与 前 面 例子 中 一 样 的 警告 框 。 当 按钮 移动 到 按钮 上 首 


DOMEventObjectExample03.htm 


andler 的 函数 ,用 于 处 理 3 种 事件 :click、mouseover 和 mouseout。 








成 红色 ， 而 当 鼠 标 移动 出 按钮 的 范围 时 ， 背 景 颜色 应 该 会 恢复 为 默认 值 。 这 里 











i 时 ， 背景 闫 色 应 该 会 变 














属性 ， 让 函数 能 够 确定 发 生 了 什么 事件 ， 并 执行 相应 的 操作 。 

要 阻止 特定 事件 的 默认 行为 ， 可 以 使 用 preventDefault () 方 法 。 例 如 ， 链 接 的 默认 行为 就 是 在 
被 单 击 时 会 导航 到 其 href 特性 指定 的 URL。 如 果 你 想 阻 止 链接 导航 这 一 默认 行为 ,那么 通过 链接 的 
onclick 事件 处 理 程序 可 以 取消 它 ， 如 下 面 的 例子 所 示 。 





var link = document .get] 
link.onclick = function 
event .preventDefaul 


} 




















ElementById("myLink"); 
(event){ 
t (); 





通过 检测 event .type 
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只 有 cancelable 属性 设置 为 true 的 事件 , 才 可 以 使 用 preventDefault () 来 取消 其 默认 行为 。 








另外 ，stopPropagation 





) 方 法 用 于 立即 停止 事件 在 DOM 层次 中 的 传播 ， 即 取消 进一步 的 事件 





捕获 或 冒 泡 。 例 如 ， 直 接 添加 到 一 个 按钮 的 事件 处 理 程序 可 以 调用 stopPropagation() ， 从 而 避免 触 
发 注册 在 document .body 上 面 的 事件 处 理 程序 ， 如 下 面 的 例子 所 示 。 


Var btn = document .getElementById("myBtn"); 
btn.onclick = function(event)t 








alert ("Clicked"); 














event .stopPropagation(); 
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document .body.onclick = 


function(event)t{ 


alert ("Body clicked"); 


}; 


DOMEventObjectExample05.htm 
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对 于 这 个 例子 而 言 , 如 果 不 调用 stopPropagation()，, 就 会 在 单 击 按钮 时 出 现 两 个 警告 框 。 可 是 ， 
1 于 click 事件 根本 不 会 传播 到 aocument .body， 因 此 就 不 会 触发 注册 在 这 个 元 素 上 的 onclick 事 
件 处 理 程序 。 

事件 对 象 的 eventPhase 属性 , 可 以 用 来 确定 事件 当前 正 位 于 事件 流 的 哪个 阶段 。 如 果 是 在 捕获 阶 
段 调 用 的 事件 处 理 程序 ,那么 eventPhase 等 于 1; 如 果 事 件 处 理 程序 处 于 目标 对 象 上 ， 则 event- 
Phase 等 于 2; 如 果 是 在 冒 泡 阶段 调用 的 事件 处 理 程序 ，eventPhase 等 于 3。 这 里 要 注意 的 是 ， 尽 管 
“处 于 目标 ”发 生 在 冒 泡 阶 段 ， 但 eventPhase 仍然 一 直 等 于 2。 来 看 下 面 的 例子 。 

Var btn = document .getElementById("myBtn"); 


btn.onclick = function(event)t{ 
alert (event .eventPhase); //2 
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document .body .addEventListener("click", function(event)t{ 
alert (event .eventPhase); //1 
}, true); 


document .body.onclick = function(event)t{ 
alert (event .eventPhase); //3 
}; 


DOMEventObjectExample06.htm 


当 单 击 这 个 例子 中 的 按钮 时 ， 首 先 执行 的 事件 处 理 程序 是 在 捕获 阶段 触发 的 添加 到 document .body 
中 的 那 一 个 ， 结 果 会 弹出 一 个 警告 框 显示 表示 eventPhase 的 1。 接着 , 会 触发 在 按钮 上 注册 的 事件 处 
理 程序 ， 此 时 的 eventPhase 值 为 2。 最 后 一 个 被 触发 的 事件 处 理 程序 ， 是 在 冒 泡 阶段 执行 的 添加 到 
document .body 上 的 那 一 个 ,显示 eventPhase 的 值 为 3。 而 当 eventPhase 等 于 2 时 ,this、 上 arget 
和 currentTarget 始终 都 是 相等 的 。 


























只 有 在 事件 处 理 程序 执行 期 间 ，event 对 象 才 会 存在 ; 一 旦 事件 处 理 程序 执行 完 


成 ，event 对 象 就 会 被 销毁 。 





13.3.2 IE 中 的 事件 对 象 


与 访问 DOM 中 的 event 对 象 不 同 , 要 访问 正中 的 event 对 象 有 几 种 不 同 的 方式 ， 取 决 于 指定 事 
件 处 理 程序 的 方法 。 在 使 用 DOM0 级 方法 添加 事件 处 理 程序 时 ，event 对 象 作 为 window 对 象 的 一 个 
属性 存在 。 来 看 下 面 的 例子 。 























Var btn = document .getElementById("myBtn"); 
btn.onclick = function(){ 

Var event = window.event; 

alert (event .type); //"click" 
}; 


在 此 ， 我 们 通过 window .event 取得 了 event 对 象 ， 并 检测 了 被 触发 事件 的 类 型 ( 了 中 的 type 
属性 与 DOM 中 的 type 属性 是 相同 的 )。 可 是 ， 如 果 事 件 处 理 程序 是 使 用 attachEvent () 添 加 的 ， 那 
么 就 会 有 一 个 event 对 象 作为 参数 被 传人 事件 处 理 程序 函数 中 ， 如 下 所 示 。 
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Var btn = document .getElementById("myBtn"); 

btn.attachEvent ("onclick", function(event)t{ 
alert (event .type); //"click" 

}); 


在 像 这 样 使 用 attachEvent () 的 情况 下 ,也 可 以 通过 window 对 象 来 访问 event 对 象 ， 就 像 使 月 
DOM0 级 方法 时 一 样 。 不 过 为 方便 起 见 ， 同 一 个 对 象 也 会 作为 参数 传递 。 

如 果 是 通过 HTML 特性 指定 的 事件 处 理 程序 ,那么 还 可 以 通过 一 个 名 叫 event 的 变量 来 访问 event 
对 象 (与 DOM 中 的 事件 模型 相同 )。 再 看 一 个 例子 。 

<input type="button" value="Click Me" onclick="alert(event .type) "> 

IE 的 event 对 象 同样 也 包含 与 创建 它 的 事件 相关 的 属性 和 方法 。 其 中 很 多 属性 和 方法 都 有 对 应 的 
或 者 相关 的 DOM 属性 和 方法 。 与 DOM 的 event 对 象 一 样 ， 这些 属性 和 方法 也 会 因为 事件 类 型 的 不 同 
而 不 同 ， 但 所 有 事件 对 象 都 会 包含 下 表 所 列 的 属性 和 方法 。 











< 



























































山中 





















































属性 /方法 类 型 读 / 写 说 明 
cancelBubble Boolean 读 / 写 默认 值 为 false, 但 将 其 设置 为 true 就 可 以 取消 事件 冒 泡 (与 DOM 中 
的 stopPropagation() 方 法 的 作用 相同 
returnValue Boolean 读 / 写 默认 值 为 true, 但 将 其 设置 为 false 就 可 以 取消 事件 的 默认 行为 (与 
DOM 中 的 preventDefault () 方 法 的 作用 相同 ) 
srcElement Element 只 读 事件 的 目标 (与 DOM 中 的 target 属 性 相同 ) 
type String 只 读 被 触发 的 事件 的 类 型 





























因为 事件 处 理 程序 的 作用 域 是 根据 指定 它 的 方式 来 确定 的 ， 所 以 不 能 认为 this 会 始终 等 于 事件 目 
标 。 故 而 ， 最 好 还 是 使 用 event .srcElement 比较 保险 。 例 如 : 
Var btn = document .getElementById("myBtn"); 


btn.onclick = function()t{ 
alert (window.event .srcElement === this); //true 

















}; 


btn.attachEvent ("onclick", function(event)t{ 
alert (event .srcElement === this); //false 
}); 


TEEventObjectExample01.htm 


在 第 一 个 事件 处 理 程序 中 (使 用 DOM0 级 方法 指定 的 )，srcElement 属性 等 于 this, 但 在 第 二 
个 事件 处 理 程序 中 ， 这 两 者 的 值 不 相同 。 

如 前 所 述 ，returnvalue 属性 相当 于 DOM 中 的 preventDefault () 方 法 ,它们 的 作用 都 是 取消 
给 定 事件 的 默认 行为 。 只 要 将 returnvalue 设置 为 false， 就 可 以 阻止 默认 行为 。 来 看 下 面 的 例子 。 

var link = document .getElementById("myLink"); 


link.onclick = function()t 
window.event.returnValue = false; 





























}3 
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个 例子 在 onclick 事 件 处 理 程序 中 使 用 returnvalue 达 到 了 阻止 链接 默认 行为 的 目的 ,与 DOM 
不 同 的 是 ， 在 此 没有 办 法 确定 事件 是 否 能 被 取消 。 
相应 地 ，cancelBubble 属性 与 DOM 中 的 stopPropagation() 方 法 作用 相同 ， 都 是 用 来 停止 事 
件 冒 泡 的。 由 于 IE 不 支持 事件 捕获 ， 因 而 只 能 取消 事件 冒 泡 ; 但 stopPropagatioin() 可 以 同时 取消 
事件 捕获 和 冒 泡 。 例 如 : 
Var btn = document .getElementById("myBtn"); 
btn.onclick = function(){ 


alert ("Clicked"); 
window.event .cancelBubble = true; 















































了 


document .body.onclick = function()t{ 
alert ("Body clicked"); 
}; 
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通过 在 onclick 事件 处 理 程序 中 将 cancelBubble 设置 为 true， 就 可 阻止 事件 通过 冒 泡 而 触发 
document .bogdy 中 注册 的 事件 处 理 程序 。 结 果 ， 在 单 击 按钮 之 后 ， 只 会 显示 一 个 警告 框 。 


13.3.3 ” 跨 浏 览 器 的 事件 对 象 


虽然 DOM 和 正中 的 event 对 象 不 同 , 但 基于 它们 之 间 的 相似 性 依旧 可 以 拿 出 跨 浏览 器 的 方案 来 。 
IE 中 event 对 象 的 全 部 信息 和 方法 DOM 对 象 中 都 有 ， 只 不 过 实现 方式 不 一 样 。 不 过 ， 这 种 对 应 关系 
让 实现 两 种 事件 模型 之 间 的 映射 非常 容易 。 可 以 对 前 面 介 绍 的 EventUtil 对 象 加 以 增强 ， 添 加 如 下 方 


CY Var EventUtil = { 


addHandler: function(element, type, handler)t{ 
/ /省略 的 代码 
















































































}, 


getEvent: function(event)t{ 
return event ? event : window.event; 
Fs 


getTarget: function(event)t{ 
return event.target || event.srcElement; 
}y 


preventDefault: function(event)t{ 
if (event .preventDefault)t{ 
event .preventDefault (); 
} else { 
event .returnValue = false; 
} 
hi 


removeHandler: function(element, type, handler)t{ 
// 省 略 的 代码 
Py 


stopPropagation: function(event)t{ 
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if (event.stopPropagation)t{ 
event .stopPropagation(); 
} else { 


event .cancelBubble = true; 


} 


EventUtil.js 





以 上 代码 显示 ， 我 们 为 BventUtil 添加 了 4 个 新 方法 。 第 一 个 是 getEvent () ， 它 返回 对 event 
对 象 的 引用 。 考 虑 到 IE 中 事件 对 象 的 位 置 不 同 ， 可 以 使 用 这 个 方法 来 取得 event 对 象 ， 而 不 必 担 心 指 
定 事件 处 理 程序 的 方式 。 在 使 用 这 个 方法 时 ,必须 假设 有 一 个 事件 对 象 传人 到 事件 处 理 程序 中 ， 而 且 要 
把 该 变量 传 给 这 个 方法 ， 如 下 所 示 。 


btn.onclick = function(event)t 
event = EventUtil.getEvent (event); 
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在 兼容 DOM 的 浏览 器 中 ，event 变量 只 是 简单 地 传人 和 返回 。 而 在 正中 ，event 参数 是 未 定义 

的 (undefined )， 因 此 就 会 返回 window.event。 将 这 一 行 代码 添加 到 事件 处 理 程序 的 开头 ， 就 可 以 确 

保 随时 都 能 使 用 event 对 象 ， 而 不 必 担 心 用 户 使 用 的 是 什么 浏览 

第 二 个 方法 是 getTarget (), 它 返回 事件 的 目标 。 在 这 个 方法 内 部 , 会 检测 event 对 象 的 target 

属性 ， 如 果 存 在 则 返回 该 属性 的 值 ; 否则 ， 返 回 srcElement 属性 的 值 。 可 以 像 下 面 这 样 使 用 这 个 方法 。 
btn.onclick = function(event){ 


event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 
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第 三 个 方法 是 preventDefault () ， 用 于 取消 事件 的 默认 行为 。 在 传人 event 对 象 后 ， 这 个 方法 
会 检查 是 否 存在 preventDefault () 方 法 ， 如 果 存 在 则 调用 该 方法 。 如 果 preventDefault () 方 法 不 
存在 ， 则 将 returnvalue 设置 为 false。 下 面 是 使 用 这 个 方法 的 例子 。 


























var link = qocument .getElementById("myLink"); 
link.onclick = function(event)t{ 
event = EventUtil.getEvent (event); 


EventUtil.preventDefault (event ); 
}; 


CrossBrowserEventObjectExample02.htm 
以 上 代码 可 以 确保 在 所 有 浏览 器 中 单 击 该 链接 都 不 会 打开 另 一 个 页 面 。 首 先 ， 使 用 EventUtil . 
getEvent () 取 得 event 对 象 ， 然 后 将 其 传人 到 EventUtil.preventDefault () 以 取消 默认 行为 。 


第 四 个 方法 是 stopPropagation () ， 其 实现 方式 类 似 。 首 先 尝试 使 用 DOM 方法 阻止 事件 流 ， 否 
则 就 使 用 cancelBubble 属性 。 下 面 看 一 个 例子 。 
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Var btn = document .getElementById("myBtn"); 
btn.onclick = function(event)t 
alert ("Clicked"); 
event = EventUtil.getEvent (event); 
EventUtil.stopPropagation(event); 


3 


document .body.onclick = function(event)t{ 
alert ("Body clicked"); 
}; 
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在 此 ， 首 先 使 用 EventUtil.getEvent () 取 得 了 event 对 象 ， 然 后 又 将 其 传人 到 EventUtil. 
stopPropagation()。 别 忘 了 由 于 正 不 支持 事件 捕获 ， 因 此 这 个 方法 在 跨 浏览 器 的 情况 下 ,也 只 能 用 
来 阻止 事件 冒 泡 。 


13.4 ”事件 类 型 


Web 浏览 器 中 可 能 发 生 的 事件 有 很 多 类 型 。 如 前 所 述 , 不 同 的 事件 类 型 具有 不 同 的 信息 , 而 “DOM3 
级 事件 ”规定 了 以 下 几 类 事件 。 
口 UI (User Interface， 用 户 界面 ) 事件 ， 当 用 户 与 页 面 上 的 元 素 交 互 时 触发 ; 
口 焦点 事件 ， 当 元 素 获得 或 失去 焦点 时 触发 ; 
口 鼠标 事件 ， 当 用 户 通 过 鼠标 在 页 面 上 执行 操作 时 触发 ; 
口 滚轮 事件 ， 当 使 用 鼠标 滚轮 (或 类 似 设备 ) 时 触发 ; 
口 文本 事件 ， 当 在 文档 中 输入 文本 时 触发 ; 
口 键盘 事件 ， 当 用 户 通过 键盘 在 页 面 上 执行 操作 时 触发 ; 
口 合成 事件 ， 当 为 IME (Input Method Editor， 输 入 法 编辑 器 ) 输入 字符 时 触发 ; 
口 变动 (mnutation ) 事件 ， 当 底层 DOM 结构 发 生变 化 时 触发 。 
口 变动 名 称 事件 ， 当 元 素 或 属性 名 变动 时 和 触发。 此 类 事件 已 经 被 废弃 ,没有 任何 浏览 器 实现 它们 ， 

此 本 章 不 做 介绍 。 

除了 这 几 类 事件 之 外 , HTML5 也 定义 了 一 组 事件 , 而 有 些 浏览 右 还 会 在 DOM 和 BOM 中 实现 其 他 
专 有 事件 。 这些 专 有 的 事件 一 般 都 是 根据 开发 人 员 需 求 定制 的 , 没有 什么 规范 ， 因 此 不 同 浏览 器 的 实现 
有 可 能 不 一 致 。 

DOM3 级 事件 模块 在 DOM2 级 事件 模块 基础 上 重新 定义 了 这 些 事件 ， 也 添加 了 一 些 新 事件 。 包 括 
IE9 在 内 的 所 有 主流 浏览 器 都 支持 DOM2 级 事件 。IE9 也 支持 DOM3 级 事件 。 


13.4.1 Ul 事件 


UI 事件 指 的 是 那些 不 一 定 与 用 户 操作 有 关 的 事件 。 这 些 事 件 在 DOM 规范 出 现 之 前 , 都 是 以 这 种 或 
那 种 形式 存在 的 ， 而 在 DOM 规范 中 保留 是 为 了 向 后 兼容 。 现 有 的 UI 事件 如 下 。 

口 DoMActivate: 表示 元 素 已 经 被 用 户 操作 (通过 鼠标 或 键盘 ) 激活 。 这 个 事件 在 DOM3 级 事 

件 中 被 废弃 , 但 Firefox 2+ 和 Chrome 支持 它 。 考 虑 到 不 同 浏览 器 实现 的 差异 ,不 建议 使 用 这 个 

事件 。 
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口 1oad: 当 页 面 完 全 加 载 后 在 window 上 面 触 发 ， 当 所 有 框架 都 加 载 完毕 时 在 框架 集 上 面 触发 ， 
当 图 像 加 载 完 毕 时 在 <img> 元 素 上 面 触 发 , 或 者 当 敬 入 的 内 容 加 载 完 毕 时 在 <object> 元 素 上 面 
触发 。 

口 unload: 当 页 面 完全 仓 载 后 在 windqow 上 面 触发 ， 当 所 有 框架 都 抒 载 后 在 框架 集 上 面 触发 ， 或 

者 当 对 入 的 内 容 伸 载 完 毕 后 在 <object> 元 素 上 面 触 发 。 

口 abort: 在 用 户 停止 下 载 过 程 时 ， 如 果 般 入 的 内 容 没 有 加 载 完 ， 则 在 <object> 元 素 上 面 触发 。 

口 error: 当 发 生 JavaScript 错误 时 在 window 上 面 触 发 ， 当 无 法 加 载 图 像 时 在 <img> 元 素 上 面 触 
发 ， 当 无 法 加 载 嵌 入 内 容 时 在 <object> 元 素 上 面 触发 ， 或 者 当 有 一 或 多 个 框架 无 法 加 载 时 在 
架 集 上 面 触发 。 第 17 章 将 继续 讨论 这 个 事件 。 

口 select: 当 用 户 选 择 文本 框 ( <input> 或 <texterea> ) 中 的 一 或 多 个 字符 时 触发 。 第 14 章 将 

继续 讨论 这 个 事件 。 

D resize: 当 窗口 或 框架 的 大 小 变化 时 在 window 或 框架 上 面 触 发 。 

口 scrol1: 当 用 户 滚动 带 滚动 条 的 元 素 中 的 内 容 时 , 在 该 元 素 上 面 触 发 。<body> 元 素 中 包含 所 加 
载 页 面 的 滚动 条 。 

多 数 这 些 事件 都 与 window 对 象 或 表单 控件 相关 。 
除了 poMactivate 之 外 ,其 他 事件 在 DOM2 级 事件 中 都 归 为 HTML 事件 DoMActivate 在 DOM2 
级 中 仍然 属于 UI 事件 )。 要 确定 浏览 器 是 否 支 持 DOM2 级 事件 规定 的 HTML 事件 , 可 以 使 用 如 下 代码 : 
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Var isSupported = document.implementation.hasFeature("HTMLEvVents", "2.0"); 

注意 ， 只 有 根据 “DOM2 级 事件 ”实现 这 些 事 件 的 浏览 器 才 会 返回 true。 而 以 非 标准 方式 支持 这 
些 事件 的 浏览 器 则 会 返回 false。 要 确定 浏览 器 是 否 支 持 “DOM3 级 事件 ”定义 的 事件 ,可 以 使 用 如 下 
代码 : 

Var isSupported = document.implementation.hasFeature("UIEvent", "3.0"); 

1. load 事件 

JavaScript 中 最 常用 的 一 个 事件 就 是 1oada。 当 页 面 完 全 加 载 后 ( 包括 所 有 图 像 、JavaScript 文件 、 
CSS 文件 等 外 部 资源 ), 就 会 触发 window 上 面 的 1oad 事件 .有 两 种 定义 onload 事件 处 理 程序 的 方式 。 
第 一 种 方式 是 使 用 如 下 所 示 的 JavaScript 代码 : 
EventUtil.addHandler (window, "load", function(event)t{ 


alert ("Loaded!"); 
> 
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这 是 通过 JavaScript 来 指定 事件 处 理 程序 的 方式 ,使 用 了 本 章 前 面 定义 的 跨 浏览 器 的 EventUtil 
对 象 。 与 添加 其 他 事件 一 样 ， 这 里 也 给 事件 处 理 程序 传人 了 一 个 event 对 象 。 这 个 event 对 象 中 不 包 
含有 关 这 个 事件 的 任何 附加 信息 ， 但 在 兼容 DOM 的 浏览 器 中 ，event .target 属性 的 值 会 被 设置 为 
document ， 而 下 并 不 会 为 这 个 事件 设置 srcElement 属性 。 

第 二 种 指定 onload 事件 处 理 程序 的 方式 是 为 <pody> 元 素 添 加 一 个 onload 特性 ， 如 下 面 的 例子 
所 示 : 


<!DOCTYPE html> 
<html> 
<head> 
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<title>Load Event Example</title> 
</head> 
<body onload="alert('Loaded!')"> 


</body> 
</html> 


LoadEventExample02.htm 
一 般 来 说 ， 在 window 上 面 发 生 的 任何 事件 都 可 以 在 <body> 元 素 中 通过 相应 的 特性 来 指定 ， 因 为 
在 HTML 中 无 法 访问 window 元 素 。 实际 上 , 这 只 是 为 了 保证 向 后 兼容 的 一 种 权宜 之 计 , 但 所 有 浏览 
都 能 很 好 地 支持 这 种 方式 。 我 们 建议 读者 尽 可 能 使 用 JavaScript 方 式 。 





根据 “DOM2 级 事件 ”规范 ， 应 该 在 document 而 非 window 上 面 触发 load 事 


件 。 但是， 所 有 浏览 器 都 在 window 上 面 实现 了 该 事件 ， 以 确保 向 后 兼容 。 











图 像 上 面 也 可 以 触发 1oaa 事件 ， 无 论 是 在 DOM 中 的 图 像 元 素 还 是 HTML 中 的 图 像 元 素 。 因 此 ， 
可 以 在 HTML 中 为 任何 图 像 指定 onload 事件 处 理 程序 ， 例 如 : 


<img src="smile.gif" onload="alert('Image loaded.')"> 
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这 样 ， 当 例子 中 的 图 像 加 载 完毕 后 就 会 显示 一 个 警告 框 。 同样 的 功能 也 可 以 使 用 JavaScript 来 实现 ， 
例如 : 


Var image = document .getElementById("myImage"); 
EventUtil.addHandler (image, "load", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (EventUtil.getTarget (event) .src); 
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这 里 ,使 用 JavaScript 指定 了 onload 事件 处 理 程 序 。 同 时 也 传人 了 event 对 象 ， 尽 管 它 也 不 包含 
什么 有 用 的 信息 。 不 过 ， 事件 的 目标 是 <img> 元 素 ， 因 此 可 以 通过 src 属性 访问 并 显示 该 信息 。 
在 创建 新 的 <img> 元 素 时 , 可 以 为 其 指定 一 个 事件 处 理 程序 , 以 便 图 像 加 载 完毕 后 给 出 提示 。 此 时 ， 
最 重要 的 是 要 在 指定 src 属性 之 前 先 指定 事件 ， 如 下 面 的 例子 所 示 。 
EventUtil.addHandler (window, "load", function(){ 
Var image = document.createElement ("img"); 
EventUtil.addHandler (image, "load", function(event)t{ 


event = EventUtil.getEvent (event); 
alert (EventUtil.getTarget (event) .src); 


















































} 
document .body.appendChild (image); 
image.src = "smile.gif"; 


}); 
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在 这 个 例子 中 ， 首 先 为 window 指定 了 onload 事件 处 理 程序 。 原 因 在 于 ， 我 们 是 想 向 DOM 中 添 
加 一 个 新 元 素 , 所 以 必须 确定 页 面 已 经 加 载 完毕 一 一 如 果 在 页 面 加 载 前 操作 aocument .body 会 导致 错 
误 。 然 后 ,创建 了 一 个 新 的 图 像 元素 ， 并 设置 了 其 onload 事件 处 理 程序 。 最 后 又 将 这 个 图 像 添加 到 页 
面 中 , 还 设置 了 它 的 src 属性 。 这 里 有 一 点 需要 格外 注意 : 新 图 像 元 素 不 一 定 要 从 添加 到 文档 后 才 开 始 
下 载 ， 只 要 设置 了 src 属性 就 会 开始 下 载 。 

同样 的 功能 也 可 以 通过 使 用 DOMO0 级 的 Image 对 象 实现 。 在 DOM 出 现 之 前 ， 开 发 人 员 经 常 使 用 
Image 对 象 在 客户 端 预先 加 载 图 像 。 可 以 像 使 用 <img> 元 素 一 样 使 用 Image 对 象 ， 只 不 过 无 法 将 其 添 
加 到 DOM 树 中 。 下 面 来 看 一 个 例子 。 
EventUtil.addHandler (window, "load", function(){ 
var image = new Image(); 
EventUtil.addHandler (image, "load", function(event)t{ 

alert("Image loaded!"); 
})3 


image.src = "smile.gif"; 
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在 此 ， 我 们 使 用 Image 构造 函数 创建 了 一 个 新 图 像 的 实例 ， 然 后 又 为 它 指定 了 事件 处 理 程序 。 有 
的 浏览 器 将 Image 对 象 实现 为 <img> 元 素 ， 但 并 非 所 有 浏览 器 都 如 此 ， 所 以 最 好 将 它们 区 别 对 待 。 








在 不 属于 DOM 文档 的 图 像 ( 包括 未 添加 到 文档 的 <img> 元 素 和 Image 对 象 ) 上 


触发 loaqd 事件 时 ，IE8 及 之 前 版 本 不 会 生成 event 对 象 。IE9 修 复 了 这 个 问题 。 





还 有 一 些 元 素 也 以 非 标 准 的 方式 支持 1o0ad 事件 。 在 IE9+、Firefox、Opera、Chrome 和 Safari 3+ 及 
更 高 版 本 中 ，<script> 元 素 也 会 触发 load 事件 ， 以 便 开 发 人 员 确 定 动态 加 载 的 JavaScript 文件 是 否 加 
载 完毕 。 与 图 像 不 同 ， 只 有 在 设置 了 <script> 元 素 的 src 属性 并 将 该 元 素 添加 到 文档 后 ， 才 会 开始 下 
载 JavaScript 文件 。 换 名 话说， 对 于 <script> 元 素 而 言 ， 指 定 src 属性 和 指定 事件 处 理 程序 的 先后 顺 
序 就 不 重要 了 。 以 下 代码 展示 了 怎样 为 <script> 元 素 指定 事件 处 理 程序 。 


EventUtil.addHandler (window, "load", function(){ 

Var Script = document.createElement ("script"); 

EventUtil.addHandler (script, "load", function(event)t{ 
alert ("Loaded"); 

}); 

script.src = "example.js"; 

document .body .appendChild(script); 
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这 个 例子 使 用 了 跨 浏 览 器 的 EventuUtil 对 象 为 新 创建 的 <script> 元 素 指定 了 onload 事 件 处 理 程 
序 。 此 时 ， 大 多 数 浏 览 器 中 event 对 象 的 target 属性 引用 的 都 是 <script> 节 点 ,而 在 Firefox 3 之 前 
的 版 本 中 ， 引 用 的 则 是 aocument。IE8 及 更 早 版 本 不 支持 <script> 元 素 上 的 10ad 事件 。 

IE 和 Opera 还 支持 <1ink> 元 素 上 的 load 事件 ， 以 便 开发 人 员 确 定 样式 表 是 否 加 载 完 毕 。 例 如 : 
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EventUtil.addHandler (window, "load", function()t{ 

Var link = document .createElement ("link"); 

link.type = "text/css"; 

link.rel= "stylesheet"; 

EventUtil.addHandler (link, "load", function(event){ 
alert("css loaded"); 

}); 

link.href = "example.css"; 

document .getElementsByTagName ("head") [0] .appendChild(link); 
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与 <script> 节 点 类 似 ， 在 未 指定 href 属性 并 将 <1ink> 元 素 添加 到 文档 之 前 也 不 会 开始 下 载 样式 表 。 

2. unload 事件 

与 10ad 事件 对 应 的 是 unload 事件 ， 这 个 事件 在 文档 被 完全 种 载 后 触发 。 只 要 用 户 从 一 个 页 面 切 
换 到 另 一 个 页 面 ， 就 会 发 生 unload 事件 。 而 利用 这 个 事件 最 多 的 情况 是 清除 引用 ， 以 避免 内 存 泄漏 。 
与 1oad 事件 类 似 ， 也 有 两 种 指定 onunload 事件 处 理 程序 的 方式 。 第 一 种 方式 是 使 用 JavaScript， 如 
下 所 示 : 


EventUtil.addHandler (window, "unload", functionl(event)t{ 
alert ("Unloaded"); 
3 


此 时 生成 的 event 对 象 在 兼容 DOM 的 浏览 器 中 只 包含 target 属性 ( 值 为 aocument )。IE8 及 之 
前 版 本 则 为 这 个 事件 对 象 提供 了 srcElement 属性 。 

指定 事件 处 理 程序 的 第 二 种 方式 ， 也 是 为 <pody> 元 素 添加 一 个 特性 (与 1oad 事件 相似 )， 如 下 面 
的 例子 所 示 : 


<1DOCTYPE html> 

<html> 

<head> 

<title>Unload Event Example</title> 
</head> 

<body onunload="alert('Unloaded!')"> 







































































</body> 
</html> 
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无 论 使 用 哪 种 方式 ,都 要 小 心 编写 onun1oad 事件 处 理 程序 中 的 代码 。 既 然 unload 事件 是 在 一 切 
都 被 和 载 之 后 才 触 发 ， 那 么 在 页 面 加 载 后 存在 的 那些 对 象 ， 此 时 就 不 一 定 存在 了 。 此 时 ， 操 作 DOM 节 
点 或 者 元 素 的 样式 就 会 导致 错误 。 





根据 “DOM2 级 事件 ”， 应 该 在 <body> 元 素 而 非 window 对 象 上 面 触发 unload 





事件 。 不过， 所 有 浏览 器 都 在 window 上 实现 了 unload 事件 ， 以 确保 向 后 兼容 。 


3. resize 事件 
当 浏 览 器 窗口 被 调整 到 一 个 新 的 高 度 或 宽度 时 ， 就 会 触发 resize 事件 。 这 个 事件 在 window ( 窗 
口 ) 上 面 触 发 ， 因 此 可 以 通过 JavaScript 或 者 <boqy> 元 素 中 的 onresize 特性 来 指定 事件 处 理 程序 。 如 
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前 所 述 ， 我 们 还 是 推荐 使 用 如 下 所 示 的 JavaScript 方 式 : 


EventUtil.addHandler (window, "resize", function(event)t{ 
alert ("Resized"); 


3 


与 其 他 发 生 在 window 上 的 事件 类 似 , 在 兼容 DOM 的 浏览 右 中 , 传人 事件 处 理 程序 中 的 event 对 
象 有 一 个 target 属性 ， 值 为 aocument; 而 IE8 及 之 前 版 本 则 未 提供 任何 属性 。 

关于 何 时 会 触发 resize 事件 ,不 同 浏览 器 有 不 同 的 机 制 。IE、Safari、Chrome 和 Opera 会 在 浏览 
器 窗口 变化 了 1 像素 时 就 触发 resize 事件 , 然后 随 着 变化 不 断 重复 触发 。Firefox 则 只 会 在 用 户 停 止 调 
整 窗口 大 小 时 才 会 触发 resize 事件 。 由 于 存在 这 个 差别 ， 应 该 注意 不 要 在 这 个 事件 的 处 理 程序 中 加 入 
大 计算 量 的 代码 ， 因 为 这 些 代码 有 可 能 被 频繁 执行 ， 从 而 导致 浏览 器 反应 明显 变 慢 。 









































浏览 器 窗口 最 小 化 或 最 大 化 时 也 会 触发 resize 事件 。 


4. scroll 事件 

虽然 scrol1 事件 是 在 window 对 象 上 发 生 的 , 但 它 实 际 表 示 的 则 是 页 面 中 相应 元 素 的 变化 。 在 混 
林 模 式 下 ， 可 以 通过 <body> 元 素 的 scrollLeft 和 scrollTop 来 监控 到 这 一 变化 ; 而 在 标准 模式 下 ， 
除 Safari 之 外 的 所 有 浏览 器 都 会 通过 <html> 元 素来 反映 这 一 变化 ( Safari 仍然 基于 <bodqy> 跟 踪 滚 动 位 
置 )， 如 下 面 的 例子 所 示 : 


EventUtil.addHandler (window, "scrol1"，function(event){ 





























IE (document.compatMode == "CSSlCompat")f{ 
alert (document .documentElement.scrollTop); 
} else { 


alert (document .body.scrollTop); 
} 
}) 


ScrollEventExample01.htm 


以 上 代码 指定 的 事件 处 理 程序 会 输出 页 面 的 垂直 深 动 位 置 一 一 根据 呈现 模 式 不 同 使 用 了 不 同 的 元 
素 。 由 于 Safari 3.1 之 前 的 版 本 不 支持 document .compatMode， 因 此 旧版 本 的 浏览 器 就 会 满足 第 二 个 
条 件 。 

与 resize 事件 类 似 ，scrol1l 事件 也 会 在 文档 被 滚动 期 间 重复 被 触发 ， 所 以 有 必要 尽量 保持 事件 
处 理 程 序 的 代码 简单 。 


13.4.2 ”焦点 事件 


焦点 事件 会 在 页 面 元 素 获 得 或 失去 焦点 时 触发 。 利用 这 些 事件 并 与 document .hasFocus () 方 法 及 
document .activeEBlement 属性 配合 ， 可 以 知晓 用 户 在 页 面 上 的 行踪 。 有 以 下 6 个 焦点 事件 。 







































































口 DOMFocusIn:; 在 元 素 获得 焦点 时 触发 。 这 个 事件 与 HTML 事件 focus 等 价 , 但 它 冒 泡 。 只 有 
Opera 支持 这 个 事件 。DOM3 级 事件 废弃 了 DoMFocusIn， 选 择 了 focusin。 

口 DoMFocusout : 在 元 素 失去 焦点 时 触发 。 这 个 事件 是 HTML 事件 blur 的 通用 版 本 。 只 有 Opera 
支持 这 个 事件 。DOM3 级 事件 废弃 了 DOMFocusOut， 选择 了 focusout。 
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口 focus: 在 元 素 获得 焦点 时 触发 。 这 个 事件 不 会 冒 泡 ; 所 有 浏览 器 都 支持 它 。 

口 focusin: 在 元 素 获得 焦点 时 触发 。 这 个 事件 与 HTML 事件 focus 等 价 , 但 它 冒 泡 。 支 持 这 个 

事件 的 浏览 器 有 IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome。 

口 focusout: 在 元 素 失去 焦点 时 触发 。 这 个 事件 是 HTML 事件 blur 的 通用 版 本 。 支 持 这 个 事件 
的 浏览 器 有 IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome。 

这 一 类 事件 中 最 主要 的 两 个 是 focus 和 blur， 它们 都 是 JavaScript 早期 就 得 到 所 有 浏览 融 支 持 的 
事件 。 这 些 事 件 的 最 大 问题 是 它们 不 冒 泡 。 因此 ,IE 的 focusin 和 focusout 与 Opera 的 DOMFocusIn 
和 DOMFocusOut 才 会 发 生 重合 。IE 的 方式 最 后 被 DOM3 级 事件 采纳 为 标准 方式 。 

当 焦点 从 页 面 中 的 一 个 元 素 移动 到 另 一 个 元 素 ， 会 依次 触发 下 列 事件 : 

(1) focusout 在 失去 焦点 的 元 素 上 触发 ; 

(2) focusin 在 获得 焦点 的 元 素 上 触发 ; 

(3) blur 在 失去 焦点 的 元 素 上 触发 ; 

(4) DoMFocusout 在 失去 焦点 的 元 素 上 触发 ; 

(5) focus 在 获得 焦点 的 元 素 上 触发 ; 

(6) DoMFocusIn 在 获得 焦点 的 元 素 上 触发 。 

其 中 , plur、DOMFocusOut 和 focusout 的 事件 目标 是 失去 焦点 的 元 素 ; 而 focus 、DOMFocusIn 
和 focusin 的 事件 目标 是 获得 焦点 的 元 素 。 
要 确定 浏览 需 是 否 支 持 这 些 事件 ， 可 以 使 用 如 下 代码 : 


Var isSupported = document.implementation.hasFeature("FocusEvent", "3.0"); 






























































即使 focus 和 blur 不 冒 泡 ， 也 可 以 在 捕获 阶段 侦 听 到 它们 。Peter-Paul Koch 就 此 


写 过 一 篇 非常 棒 的 文章 : www.quirksmode.org/blog/archives/2008/04/delegating the.html。 





13.4.3 ”鼠标 与 滚轮 事件 


鼠标 事件 是 Web 开发 中 最 常用 的 一 类 事件 ， 上 毕竟 鼠标 还 是 最 主要 的 定位 设备 。DOM3 级 事件 中 定 

义 了 9 个 鼠标 事件 ， 简 介 如 下 。 

口 click: 在 用 户 单 击 主 鼠 标 按钮 (一 般 是 左边 的 按钮 ) 或 者 按 下 回 车 键 时 触发 。 这 一 点 对 确保 

易 访问 性 很 重要 ， 意 味 着 onclick 事件 处 理 程序 既 可 以 通过 键盘 也 可 以 通过 鼠标 执行 。 

口 gblclick: 在 用 户 双 击 主 鼠 标 按钮 (一 般 是 左边 的 按钮 ) 时 触发 。 从 技术 上 说 ， 这 个 事件 并 不 

是 DOM2 级 事件 规范 中 规定 的 , 但 鉴于 它 得 到 了 广泛 支持 ,所 以 DOM3 级 事件 将 其 纳 和 人 了 标准 。 

口 mousedown: 在 用 户 按 下 了 任意 鼠标 按钮 时 触发 。 不 能 通过 键盘 触发 这 个 事件 。 

口 mouseenter: 在 鼠标 光标 从 元 素 外 部 首次 移动 到 元 素 范 围 之 内 时 触发 。 这 个 事件 不 冒 泡 ,而且 
在 光标 移动 到 后 代 元 素 上 不 会 触发 。DOM2 级 事件 并 没有 定义 这 个 事件 , 但 DOM3 级 事件 将 它 
纳入 了 规范 。]IE 、Firefox 9+ 和 Opera 支持 这 个 事件 。 

口 mouseleave: 在 位 于 元 素 上 方 的 鼠标 光标 移动 到 元 素 范围 之 外 时 触发 。 这 个 事件 不 冒 泡 , 而 且 
在 光标 移动 到 后 代 元 素 上 不 会 触发 。DOM2 级 事件 并 没有 定义 这 个 事件 ,但 DOM3 级 事件 将 它 
纳入 了 规范 。 卫 、Firefox 9+ 和 Opera 支持 这 个 事件 。 

口 mousemove: 当 鼠 标 指 针 在 元 素 内 部 移动 时 重复 地 触发 。 不 能 通过 键盘 触发 这 个 事件 。 
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口 mouseout: 在 鼠标 指针 位 于 一 个 元 素 上 方 ， 然 后 用 户 将 其 移 人 另 一 个 元 素 时 触发 。 又 移 人 的 另 
一 个 元 素 可 能 位 于 前 一 个 元 素 的 外 部 , 也 可 能 是 这 个 元 素 的 子 元 素 。 不 能 通过 键盘 触发 这 个 事件 。 
口 mouseover: 在 鼠标 指针 位 于 一 个 元 素 外 部 ， 然 后 用 户 将 其 首次 移 人 另 一 个 元 素 边 界 之 内 时 触 
发 。 不 能 通过 键盘 触发 这 个 事件 。 

口 mouseup: 在 用 户 释放 鼠标 按钮 时 触发 。 不 能 通过 键盘 触发 这 个 事件 。 

页 面 上 的 所 有 元 素 都 支持 鼠标 事件 。 除 了 mouseenter 和 mouseleave， 所 有 鼠标 事件 都 会 骨 泡 ， 
也 可 以 被 取消 , 而 取消 鼠标 事件 将 会 影响 浏览 器 的 默认 行为 。 取 消 鼠 标 事件 的 默认 行为 还 会 影响 其 他 事 
件 ， 因 为 鼠标 事件 与 其 他 事件 是 密 不 可 分 的 关系 。 

只 有 在 同一 个 元 素 上 相继 触发 mousedown 和 mouseup 事件 ， 才 会 触发 click 事件 ; 如 果 
mousedown 或 mouseup 中 的 一 个 被 取消 ， 就 不 会 触发 click 事件 。 类 似 地 ， 只 有 触发 两 次 click 事 
件 , 才 会 触发 一 次 aplclick 事件 .如 果 有 代码 阻止 了 连续 两 次 触发 click 事件 ( 可 能 是 直接 取消 click 
事件 ， 也 可 能 通过 取消 mousedown 或 mouseup 间接 实现 )， 那 么 就 不 会 触发 gblclick 事件 了 。 这 4 
个 事件 触发 的 顺序 始终 如 下 : 


(1) mousedown 



























































(2) mouseup 
(3) click 
(4) mousedown 
($5) mouseup 
(6) click 
(7) ablclick 
显然 ，click 和 dpblclick 事件 都 会 依赖 于 其 他 先行 事件 的 触发 而 mousedown 和 mouseup 则 
不 受 其 他 事件 的 影响 。 
IE8 及 之 前 版 本 中 的 实现 有 一 个 小 bug， 因 此 在 双击 事件 中 ,会 跳 过 第 二 个 mousedown 和 click 
事件 ， 其 顺序 如 下 : 


(1) mousedown 




















(2) mouseup 

(3) click 

(4) mouseup 

(5) ablclick 

IE9 修复 了 这 个 bug， 之 后 顺序 就 正确 了 。 

使 用 以 下 代码 可 以 检测 浏览 器 是 否 支持 以 上 DOM2 级 事件 ( 除 dbclick、mouseenter 和 


mouseleave 之 外 ); 











Var isSupported = document.implementation.hasFeature("MouseEvents", "2.0"); 


要 检测 浏览 器 是 否 支 持 上 面 的 所 有 事件 ， 可 以 使 用 以 下 代码 : 





var isSupported = document.implementation.hasFeature("MouseEvent", "3.0") 


注意 ，DOM3 级 事件 的 feature 名 是 "MouseEvent"， 而 非 "MouseEvents"。 
鼠标 事件 中 还 有 一 类 滚轮 事件 。 而 说 是 一 类 事件 ,其 实 就 是 一 个 mousewheel 事件 。 这 个 事件 跟踪 
鼠标 滚轮 ， 类 似 于 Mac 的 触 控 板 。 
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1. 客户 区 坐标 位 置 

鼠标 事件 都 是 在 浏览 器 视 口 中 的 特定 位 置 上 发 生 的 。 这 个 位 置信 息 保 存在 事件 对 象 的 clientx 和 
clientY 属性 中 。 所 有 浏览 器 都 支持 这 两 个 属性 ， 它 们 的 值 表示 事件 发 生 时 鼠标 指针 在 视 口中 的 水 平 
和 垂直 坐标 。 图 13-4 展示 了 视 口 中 客户 区 坐标 位 置 的 含义 。 
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可 以 使 用 类 似 下 列 代码 取得 鼠标 事件 的 客户 端 坐标 信息 : 


var div = dqocument .getElementByIQ("myDiv" ) ; 
EventUtil.addHandler (div, "click", function(event)t{ 

event = EventUtil.getEvent (event); 

alert ("Client coordinates: " + event.clientX + "," + event.clientYy); 
过 





ClientCoordinatesExample01.htm 


这 里 为 一 个 <aiv> 元 素 指 定 了 onclick 事件 处 理 程序 。 当 用 户 单 击 这 个 元 素 时 ， 就 会 看 到 事件 的 
客户 端 坐标 信息 。 注意 , 这 些 值 中 不 包括 页 面 滚动 的 距离 , 因此 这 个 位 置 并 不 表示 鼠标 在 页 面 上 的 位 置 。 

2. 页 面 坐标 位 置 

通过 客户 区 坐标 能 够 知道 鼠标 是 在 视 口中 什么 位 置 发 生 的 ， 而 页 面 坐标 通过 事件 对 象 的 pagex 和 
pageY 属性 ,能 告诉 你 事件 是 在 页 面 中 的 什么 位 置 发 生 的 。 换 名 话说 , 这 两 个 属性 表示 鼠标 光标 在 页 面 
中 的 位 置 ， 因 此 坐标 是 从 页 面 本 身 而 非 视 口 的 左边 和 顶 边 计算 的 。 

以 下 代码 可 以 取得 鼠标 事件 在 页 面 中 的 坐标 : 

var div = dqocument .getElementById("myDiVZ" ) ; 

EventUtil.addHandler (div, "click", function(event)t{ 

event = EventUtil.getEvent (event); 


alert ("Page coordinates: " + event.pageX + "," + event.pageY); 
3 
























































PageCoordinatesExample01.htm 
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在 页 面 没 有 滚动 的 情况 下 ，pagex 和 pageY 的 值 与 clientx 和 clientY 的 值 相等 。 

IE8 及 更 早 版 本 不 支持 事件 对 象 上 的 页 面 坐标 ， 不 过 使 用 客户 区 坐标 和 滚动 信息 可 以 计算 出 来 。 这 
时 候 需 要 用 到 document .pbody (混杂 模式 ) 或 aocument .qdqocumentElement (标准 模式 ) 中 的 
scrollLeft 和 scrollTop 属性 。 计 算 过 程 如 下 所 示 : 











var div = document.getElementById("myDiv"); 
EventUtil.addHandler (div, "click", function(event)t 
event = EventUtil.getEvent (event); 
Var pageX = event .PageX， 
DageY event .pageY; 











1 


if (pageX === undefined)t{ 
pageX = event.clientX + (document.body.scrollLeft || 
document .documentElement.scrollLeft); 








} 
if (pageY === undefined)f{ 
pageY = event.clientY + (document.body.scrollTop || 
document .documentElement .scrollTop); 
} 
alert ("Page coordinates: " + pageX + "," + pageY); 


PageCoordinatesExample01.htm 


3. 屏幕 坐标 位 置 
鼠标 事件 发 生 时 ,不 仅 会 有 相对 于 浏览 器 窗口 的 位 置 , 还 有 一 个 相对 于 整个 电脑 屏幕 的 位 置 。 而 通 
过 screenX 和 screeny 属性 就 可 以 确定 鼠标 事件 发 生 时 鼠标 指针 相对 于 整个 屏幕 的 坐标 信息 。 图 13-5 
展示 了 浏览 器 中 屏幕 坐标 的 含义 。 
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可 以 使 用 类 似 下 面 的 代码 取得 鼠标 事件 的 屏幕 坐标 : 


var div = dqocument .getElementByIQ("myDiv" ) ; 
本 EventUtil.addHandler (div, "click", function(event)t{ 
event = EventUtil.getEvent (event); 
alert ("Screen coordinates: " + event.screenX + "," + event .screenY) 


} 








ScreenCoordinatesExample01.htm 


与 前 一 个 例子 类 似 ， 这 里 也 是 为 <aiv> 元 素 指定 了 一 个 onclick 事件 处 理 程序 。 当 这 个 元 素 被 单 
击 时 ， 就 会 显示 出 事件 的 屏幕 坐标 信息 了 。 

4. 修改 键 

虽然 鼠标 事件 主要 是 使 用 鼠标 来 触发 的 , 但 在 按 下 鼠标 时 键盘 上 的 某 些 键 的 状态 也 可 以 影响 到 所 要 
采取 的 操作 。 这 些 修 改 键 就 是 Shift 、Ctl 、Alt 和 Meta ( 在 Windows 键盘 中 是 Windows 键 ， 在 苹果 机 中 
是 Cmd 键 )， 它 们 经 常 被 用 来 修改 鼠标 事件 的 行为 。DOM 为 此 规定 了 4 个 属性 ， 表 示 这 些 修 改 键 的 状 
态 : shiftKey、ctrlKey、altKey 和 metaKey。 这 些 属性 中 包含 的 都 是 布尔 值 ， 如 果 相应 的 键 被 按 
下 了 ， 则 值 为 true， 否 则 值 为 false。 当 某 个 鼠标 事件 发 生 时 ， 通 过 检测 这 几 个 属性 就 可 以 确定 用 户 
是 否 同时 按 下 了 其 中 的 键 。 来 看 下 面 的 例子 。 

var div = document.getElementById("myDiv"); 

EventUtil.addHandler (div, "click", function(event){ 


event = EventUtil.getEvent (event); 
Var keys = new Array(); 












































if (event.shiftKey)t{ 
keys.push ("shift"); 
} 


if (event.ctrlKey)t{ 
keys .push ("ctrl1"); 


if (event.altKey)t{ 
keys.push("alt"); 





if (event.metaKey)t{ 
keys.push("meta"); 


} 


alert ("Reyss ™ 4 keys.Join(™, yy) 


ModifierKeysExample01.htm 

在 这 个 例子 中 ,我们 通过 一 个 onclick 事件 处 理 程序 检测 了 不 同 修改 键 的 状态 。 数 组 keys 中 包 

含 着 被 按 下 的 修改 键 的 名 称 。 换 句 话说 ,如 果 有 属性 值 为 true， 就 会 将 对 应 修改 键 的 名 称 添 加 到 keys 
数组 中 。 在 事件 处 理 程序 的 最 后 ， 有 一 个 警告 框 将 检测 到 的 键 的 信息 显示 给 用 户 。 
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四 IE9、Firefox、Safari、Chrome 和 Opera 都 支持 这 4 个 键 。IE8 及 之 前 版 本 不 支持 
metaKey 属性 。 


5. 相关 元 素 
在 发 生 mouseover 和 mouserout 事件 时 ， 还 会 涉及 更 多 的 元 素 。 这 两 个 事件 都 会 涉及 把 鼠标 指 
针 从 一 个 元 素 的 边界 之 内 移动 到 男 一 个 元 素 的 边界 之 内 。 对 mouseover 事件 而 言 ， 事 件 的 主 目标 是 获 





得 光标 的 元 素 ， 而 相关 元 素 就 是 那个 失去 光标 的 元 素 。 类 似 地 ,对 mouseout 事件 而 言 , 事件 的 主 目标 
是 失去 光标 的 元 素 ， 而 相关 元 素 则 是 获得 光标 的 元 素 。 来 看 下 面 的 例子 。 


<!DOCTYPE html> 
C9 <html> 


<head> 
<title>Related Elements Example</title> 
</head> 
<body> 
<div id="myDiv" style="background-color:red;height:100px;width:100px;"></div> 
</body> 
</html> 

















RelatedElementsExample01.htm 


这 个 例子 会 在 页 面 上 显示 一 个 <aiv> 元 素 。 如 果 上 鼠标 指针 一 开始 位 于 这 个 <aiv> 元 素 上 ， 然 后 移出 
了 这 个 元 素 ， 那 么 就 会 在 <div> 元 素 上 触发 mouseout 事件 ， 相 关 元 素 就 是 <body> 元 素 。 与 此 同时 ， 
<body> 元 素 上 面 会 触发 mouseover 事件 ， 而 相关 元 素 变 成 了 <div>。 

DOM 通过 event 对 象 的 relatedTarget 属性 提供 了 相关 元 素 的 信息 。 这 个 属性 只 对 于 mouseover 
和 mouseout 事件 才 包 含 值 ;对 于 其 他 事件 ,这 个 属性 的 值 是 nul1。IE8 及 之 前 版 本 不 支持 relatedTarget 
属性 ， 但 提供 了 保存 着 同样 信息 的 不 同属 性 。 在 mouseover 事件 触发 时 ， 正 的 fromElement 属性 中 保 
存 了 相关 元 素 ; 在 mouseout 事件 触发 时 , 下 的 toglement 属性 中 保存 着 相关 元 素 。( IE9 支持 所 有 这 些 
属性 。) 可 以 把 下 面 这 个 跨 浏览 器 取得 相关 元 素 的 方法 添加 到 EventUtil 对 象 中 。 


中 Var EventUtil = { 


/ /省 略 了 其 他 代码 


getRelatedTarget: function(event)t{ 

if (event .relatedTarget){ 
return event.relatedTarget; 

} else if (event.toElement)t{ 
return event .toElement; 

} else if (event.fromElement)t{ 
return event.fromElement; 

} else { 
return null; 









































} 
}v 
// 省 略 了 其 他 代码 


] 
EventUtiljs 区 本 
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与 以 前 添加 的 跨 浏览 器 方 法 一 样 ， 这 个 方法 也 使 用 了 特性 检测 来 确定 返回 哪个 值 。 可 以 像 下 面 这 样 
使 用 EventUtil.getRelatedTarget () 方 法 : 

















var div = document .getElementById("myDiv"); 
EventUtil.addHandler (div, "mouseout", functionl(event)t{ 
event = EventUtil.getEvent (event); 
var target = EventUtil.getTarget (event); 
var relatedTarget = EventUtil.getRelatedTarget (event); 
alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName); 





RelatedElementsExample01.htm 


这 个 例子 为 <aiv> 元 素 的 mouseout 事件 注册 了 一 个 事件 处 理 程序 。 当 事件 触发 时 , 会 有 一 个 警告 
框 显示 鼠标 移出 和 移入 的 元 素 信息 。 

6. 鼠标 按钮 

只 有 在 主 鼠 标 按钮 被 单 击 ( 或 键盘 回 车 键 被 按 下 ) 时 才 会 触发 click 事件 ， 因 此 检测 按钮 的 信息 
并 不 是 必要 的 。 但 对 于 mousedown 和 mouseup 事件 来 说 , 则 在 其 event 对 象 存在 一 个 button 属性 ， 
表示 按 下 或 释放 的 按钮 。 DOM 的 button 属性 可 能 有 如 下 3 个 值 : 0 表示 主 鼠 标 按钮 ,1 表示 中 间 的 鼠 
标 按钮 ( 鼠标 滚轮 按钮 )，2 表示 次 鼠标 按钮 。 在 常规 的 设置 中 ， 主 鼠标 按钮 就 是 鼠标 左 键 ， 而 次 鼠标 
按钮 就 是 鼠标 右键 。 

IE8 及 之 前 版 本 也 提供 了 button 属性 ， 但 这 个 属性 的 值 与 DOM 的 button 属性 有 很 大 差异 。 

口 0: 表示 没有 按 下 按钮 。 

口 1: 表示 按 下 了 主 鼠 标 按钮 。 

口 2: 表示 按 下 了 次 鼠标 按钮 。 

口 3: 表示 同时 按 下 了 主 、 次 鼠标 按钮 。 

口 4: 表示 按 下 了 中 间 的 鼠标 按钮 。 

口 5: 表示 同时 按 下 了 主 鼠 标 按钮 和 中 间 的 鼠标 按钮 。 
口 6: 表示 同时 按 下 了 次 鼠标 按钮 和 中 间 的 鼠标 按钮 。 
口 7: 表示 同时 按 下 了 三 个 鼠标 按钮 。 

不 难 想见 ，DOM 模型 下 的 button 属性 比 IE 模 型 下 的 button 属性 更 简单 也 更 为 实用 ， 因 为 同时 
按 下 多 个 鼠标 按钮 的 情形 十 分 罕见 。 最 常见 的 做 法 就 是 将 下 模型 规范 化 为 DOM 方式 , 毕竟 除 IE8 及 更 
早 版 本 之 外 的 其 他 浏览 器 都 原生 支持 DOM 模型 。 而 对 主 、 中 、 次 按钮 的 映射 并 不 困难 ， 只 要 将 正 的 其 
他 选项 分 别 转换 成 如 同 按 下 这 三 个 按键 中 的 一 个 即 可 (〈 同时 将 主 按钮 作为 优先 选取 的 对 象 )。 换 句 话说 ， 
IE 中 返回 的 5 和 7 会 被 转换 成 DOM 模型 中 的 0。 

由 于 单独 使 用 能 力 检测 无 法 确定 差异 ( 两 种 模型 有 同名 的 button 属性 )， 因 此 必须 另辟蹊径 。 我 
们 知道 ， 支 持 DOM 版 鼠标 事件 的 浏览 器 可 以 通过 hasFearture() 方 法 来 检测 ， 所 以 可 以 再 为 
EventUtil 对 象 添加 如 下 getButton () 方 法 。 


















































































































































Var EventUtil = { 
// 省 略 了 其 他 代码 
getButton: function(event)t{ 


if (document .implementation.hasFeature("MouseEvents", "2.0")){ 
return event .button; 
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} else { 
Switch(event .button)t{ 

case 0: 

case 1: 

case 3: 

case 5: 

case 7: 
return 0; 

case 2: 

case 6: 
return 2; 

case 4: 
return 1; 


}, 


// 省 略 了 其 他 代码 


EventUItil.js 


通过 检测 "MouseEvents" 这 个 特性 ， 就 可 以 确定 event 对 象 中 存在 的 putton 属性 中 是 否 包 含 正 
的 值 。 如 果 测 试 失败 ， 说 明 是 契 ， 就 必须 对 相应 的 值 进行 规范 化 。 以 下 是 使 用 该 方法 的 示例 。 


var div = document.getElementById("myDiv"); 
EventUtil.addHandler (div, "mousedown", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (EventUtil.getButton(event)); 
}); 























ed 

















ButtonExample01.htm 


在 这 个 例子 中 ， 我 们 为 一 个 <aiv> 元 素 添 加 了 一 个 onmousedown 事件 处 理 程序 。 当 在 这 个 元 素 上 
按 下 鼠标 按钮 和 时， 会 有 警告 框 显示 按钮 的 代码 。 















在 使 用 onmouseup 事件 处 理 程序 时 ，button 的 值 表示 释放 的 是 哪个 按钮 。 此 
外 ， 如 果 不 是 按 下 或 释放 了 主 和 鼠标 按钮 ，Opera 不 会 触发 mouseup 或 mousedown 
事件 。 






7. 更 多 的 事件 信息 

“DOM2 级 事件 ”规范 在 event 对 象 中 还 提供 了 aetail 属性 ， 用 于 给 出 有 关 事 件 的 更 多 信息 。 对 
于 鼠标 事件 来 说 ，daetail 中 包含 了 一 个 数值 ， 表 示 在 给 定位 置 上 发 生 了 多 少 次 单 击 。 在 同一 个 元 素 上 
相继 地 发 生 一 次 mousedown 和 一 次 mouseup 事件 算 作 一 次 单 击 。detail 属性 从 1 开始 计数 ， 每 次 单 
击发 生 后 都 会 递增 。 如 果 鼠 标 在 mousedown 和 mouseup 之 间 移 动 了 位 置 ， 则 aetail 会 被 重 置 为 0。 

IE 也 通过 下 列 属性 为 鼠标 事件 提供 了 更 多 信息 。 
口 altLeft: 布 尔 值 , 表示 是 否 按 下 了 Alt 键 ,如 果 altLeft 的 值 为 true, 则 altKey 的 值 也 为 true。 
口 ctrlLeft: 布尔 值 ， 表示 是 否 按 下 了 Ctrl 键 。 如 果 ctrlLeft 的 值 为 true， 则 ctrlKey 的 值 

也 为 true。 
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口 offsetX: 光标 相对 于 目标 元 素 边界 的 x 坐标 。 
口 offsetY: 光标 相对 于 目标 元 素 边界 的 y 坐标 。 
口 shiftLeft: 布尔 值 ， 表 示 是 否 按 下 了 Shift 键 。 如 果 shiftLeft 的 值 为 true, 则 shiftKey 
的 值 也 为 trueo 

这 些 属性 的 用 处 并 不 大 ， 原 因 一 方面 是 只 有 IE 支持 它们 ， 另 一 方 是 它们 提供 的 信息 要 么 没有 什么 
价值 ， 要么 可 以 通过 其 他 方式 计算 得 来 。 

8. 鼠标 滚轮 事件 

下 6.0 首先 实现 了 mousewheel 事件 。 此 后 ，Opera、Chrome 和 Safari 也 都 实现 了 这 个 事件 。 当 用 
户 通过 鼠标 滚轮 与 页 面 交 互 、 在 垂直 方向 上 滚动 页 面 时 (无论 向 上 还 是 向 下 )， 就 会 触发 mousewheel 
事件 。 这 个 事件 可 以 在 任何 元 素 上 面 触发 ,最终 会 冒 泡 到 aocument (IE8 ) 或 window (IE9、Opera、 
Chrome 及 Safari ) 对 象 。 与 mousewheel 事件 对 应 的 event 对 象 除 包含 鼠标 事件 的 所 有 标准 信息 外 ， 
还 包含 一 个 特殊 的 wheelDelta 属性 。 当 用 户 向 前 滚动 鼠标 滚轮 时 ,wheelpelta 是 120 的 倍数 ; 当 用 
户 向 后 滚动 鼠标 滚轮 时 ，wheelDelta 是 -120 的 倍数 。 图 13-6 展示 了 这 个 属性 。 

































































图 13-6 


将 mousewheel 事件 处 理 程序 指定 给 页 面 中 的 任何 元 素 或 aocument 对 象 ， 即 可 处 理 鼠 标 滚轮 的 
交互 操作 。 来 看 下 面 的 例子 。 


EventUtil.addHandler (document, "mousewheel", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (event .wheelDelta); 
有 
这 个 例子 会 在 发 生 mousewheel 事件 时 显示 wheelDelta 的 值 。 多 数 情况 下 ， 只 要 知道 鼠标 滚轮 
滚动 的 方向 就 够 了 ， 而 这 通过 检测 wheelDelta 的 正 负 号 就 可 以 确定 。 
有 一 点 要 注意 : 在 Opera 9.5 之 前 的 版 本 中 ，wheelDelta 值 的 正 负 号 是 颠倒 的 。 如 果 你 打算 支持 
早期 的 Opera 版 本 ， 就 需要 使 用 浏览 器 检测 技术 来 确定 实际 的 值 ， 如 下 面 的 例子 所 示 。 
EventUtil.addHandler (document, "mousewheel", function(event)t{ 
event = EventUtil.getEvent (event); 
var delta = (client.engine.opera && client.engine.opera < 9.5 ? 
-event .wheelDelta : event .wheelDelta); 


alert (delta); 
} 3 






































MouseWheelEventExample01.htm 
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以 上 代码 使 用 第 9 章 创 建 的 client 对 象 检测 了 浏览 器 是 不 是 早期 版 本 的 Opera。 


由 于 mousewheel 事件 非常 流行 , 而且 所 有 浏览 器 都 支持 它 , 所 以 HTML 5 也 加 


入 了 该 事件 。 





Firefox 支持 一 个 名 为 DOMMouseScroll 的 类 似 事件 ,也 是 在 鼠标 滚轮 滚动 时 触发 。 与 mousewheel 
事件 一 样 ,， DoMMouseScroll 也 被 视 为 鼠标 事件 ,因而 包含 与 鼠标 事件 有 关 的 所 有 属性 。 而 有 关 鼠 标 滚 


轮 的 信息 则 保存 在 aetail 属性 中 ， 当 向 前 滚动 鼠标 滚轮 时 ， 这 个 属性 的 值 是 -3 的 倍数 ， 当 向 后 深 动 
鼠标 滚轮 时 ， 这 个 属性 的 值 是 3 的 倍数 。 图 13-7 展示 了 这 个 属性 


+3 和 
























































可 以 将 poMMousescroll 事件 添加 到 页 面 中 的 任何 元 素 ， 而 且 该 事件 会 骨 泡 到 window 对 象 。 
此 ， 可 以 像 下 面 这 样 针 对 这 个 事件 来 添加 事件 处 理 程 序 。 




















EventUtil.addHandler (window, "DOMMouseScroll", 
event = EventUtil.getEvent (event); 
alert (event .detail); 


了 


function(event)t 








DOMMouseScrollEventExample01.htm 
这 个 简单 的 事件 处 理 程序 会 在 鼠标 滚轮 滚动 时 显示 aetail 属性 的 值 。 


若 要 给 出 跨 浏 览 器 环境 下 的 解决 方案 ， 第 一 步 就 是 创建 一 个 能 够 取得 鼠标 滚轮 增 量 值 (delta ) 的 方 
下 面 是 我 们 添加 到 EventUtil 对 象 中 的 这 个 方法 。 

















Var EventUtil = { 
/ /省略 了 其 他 代码 


getWheelDelta: function(event)t{ 
if (event .wheelDelta)t{ 
return (client .engine.opera && client.engine.opera < 9.5 ? 


-event .wheelDelta : event .wheelDelta); 
} else { 


return -event.detail * 40; 


} 
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}s 


// 省 略 了 其 他 代码 


EventUtil.js 











这 里 ，getwheelDelta() 方 法 首先 检测 了 事件 对 象 是 否 包 仿 wheelDelta 属性 ， 如 果 是 则 通过 浏 
览 器 检测 代码 确定 正确 的 值 。 如 果 wheelDelta 不 存在 , 则 假设 相应 的 值 保存 在 aetail 属性 中 。 由 于 
Firefox 的 值 有 所 不 同 ， 因 此 首先 要 将 这 个 值 的 符号 反 向 ， 然 后 再 乘 以 40， 就 可 以 保证 与 其 他 浏览 器 的 
值 相同 了 。 有 了 这 个 方法 之 后 ， 就 可 以 将 相同 的 事件 处 理 程序 指定 给 mousewheel 和 DoMMouse- 
Scroll 事件 了 ,例如 : 


时 (function(){ 


function handleMouseWheel (event){ 
event = EventUtil.getEvent (event); 
var delta = EventUtil.getWwheelDelta (event); 
alert (delta); 












































} 


EventUtil.addHandler (document, "mousewheel", handleMouseWheel); 
EventUtil.addHandler (document, "DOMMouseScroll", handleMouseWheel); 


}) (); 


CrossBrowserMouseWheelExample01.htm 


我 们 将 相关 代码 放 在 了 一 个 私有 作用 域 中 , 从 而 不 会 让 新 定义 的 函数 干扰 全 局 作用 域 。 这 里 定义 的 
handleMouseWheel () 函数 可 以 用 作 两 个 事件 的 处 理 程 序 ( 如 果 指 定 的 事件 不 存在 , 则 为 该 事件 指定 处 
理 程序 的 代码 就 会 静默 地 失败 )。 由 于 使 用 了 EventUtil.getwheelDelta() 方 法 , 我们 定义 的 这 个 事 
件 处 理 程序 函数 可 以 适用 于 任何 一 种 情况 。 

9. 触摸 设备 

iOS 和 Android 设备 的 实现 非常 特别 ， 因 为 这 些 设备 没有 鼠标 。 在 面向 让 hone 和 iPod 中 的 Safari 
开发 时 ， 要 记 住 以 下 几 点 。 

口 不 支持 ablclick 事件 。 双 击 浏览 器 窗口 会 放大 画面 ， 而 且 没 有 办 法 改变 该 行为 。 

口 轻 击 可 单 击 元 素 会 触发 mousemove 事件 。 如果 此 操作 会 导致 内 容 变化 , 将 不 再 有 其 他 事件 发 生 ; 
如 果 屏 幕 没 有 因此 变化 ,那么 会 依次 发 生 mousedown 、mouseup 和 click 事件 。 轻 击 不 可 单 
击 的 元 素 不 会 触发 任何 事件 。 可 单 击 的 元 素 是 指 那些 单 击 可 产生 默认 操作 的 元 素 ( 如 链接 ), 或 
者 那些 已 经 被 指定 了 onclick 事件 处 理 程序 的 元 素 。 

口 mousemove 事件 也 会 触发 mouseover 和 mouseout 事件 。 

口 两 个 手指 放 在 屏幕 上 且 页 面 随手 指 移 动 而 深 动 时 会 触发 mousewheel 和 scrol1 事件 。 

10. 无 障碍 性 问题 

如 果 你 的 Web 应 用 程序 或 网 站 要 确保 残疾 人 特别 是 那些 使 用 屏幕 阅读 器 的 人 都 能 访问 ， 那 么 在 使 

鼠标 事件 时 就 要 格外 小 心 。 前 面 提 到 过 ， 可 以 通过 键盘 上 的 回 车 键 来 触发 click 事件 ,但 其 他 鼠标 

件 却 无 法 通过 键盘 来 触发 。 为 此 ， 我 们 不 建议 使 用 click 之 外 的 其 他 鼠标 事件 来 展示 功能 或 引发 代 
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码 执行 。 因 为 这 样 会 给 育 人 或 视 障 用 户 造成 极 大 不 便 。 以 下 是 在 使 用 鼠标 事件 时 应 当 注 意 的 几 个 易 访问 
性 问题 。 
口 使 用 click 事件 执行 代码 。 有 人 指出 通过 onmousedown 执行 代码 会 让 人 觉得 速度 更 快 ， 对 视 
力 正 常 的 人 来 说 这 是 没 错 的 。 但 是 ,在 屏幕 阅读 器 中 , 由 于 无 法 触发 mousedovwn 事件 ,结果 就 
会 造成 代码 无 法 执行 。 
口 不 要 使 用 onmouseover 向 用 户 显示 新 的 选项 。 原 因 同 上 , 屏幕 阅读 器 无 法 触发 这 个 事件 。 如 果 
确实 非 要 通过 这 种 方式 来 显示 新 选项 ， 可 以 考虑 添加 显示 相同 信息 的 键盘 快捷 方式 。 
口 不 要 使 用 ablclick 执行 重要 的 操作 。 键 盘 无 法 触发 这 个 事件 。 
遵照 以 上 提示 可 以 极 大 地 提升 残疾 人 在 访问 你 的 Web 应 用 程序 或 网 站 时 的 易 访 问 性 
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要 了 解 如 何在 网 页 中 实现 无 障碍 访问 的 内 容 ， 请 访问 www.webaim.org 和 


http://yaccessibilityblog.com/。 





13.4.4 键盘 与 文本 事件 


用 户 在 使 用 键盘 时 会 触发 键盘 事件 。 “DOM2 级 事件 ”最 初 规定 了 键盘 事件 ， 但 在 最 终 定稿 之 前 又 
删除 了 相应 的 内 容 。 结 果 ， 对 键盘 事件 的 支持 主要 遵循 的 是 DOM0 级 。 

“DOM3 级 事件 ”为 键盘 事件 制定 了 规范 , IE9 率先 完全 实现 了 该 规范 。 其 他 浏览 絮 也 在 着 手 实现 这 
一 标准 ， 但 仍然 有 很 多 遗留 的 问题 。 

有 3 个 键盘 事件 ， 简 述 如 下 。 

口 keydown: 当 用 户 按 下 键盘 上 的 任意 键 时 和 触发， 而且 如 果 按 住 不 放 的 话 ， 会 重复 触发 此 事件 。 

口 keypress: 当 用 户 按 下 键盘 上 的 字符 键 时 触发 ， 而 且 如 果 按 住 不 放 的 话 ， 会 重复 触发 此 事件 。 
按 下 Esc 键 也 会 触发 这 个 事件 。Safari 3.1 之 前 的 版 本 也 会 在 用 户 按 下 非 字符 键 时 触发 keypress 
事件 。 

口 keyup: 当 用 户 释 放 键 盘 上 的 键 时 触发 。 

虽然 所 有 元 素 都 支持 以 上 3 个 事件 ， 但 只 有 在 用 户 通过 文本 框 输入 文本 时 才 最 常用 到 。 

只 有 一 个 文本 事件 : textInput。 这 个 事件 是 对 keypress 的 补充 , 用 意 是 在 将 文本 显示 给 用 户 之 
前 更 容易 拦截 文本 。 在 文本 搬入 文本 框 之 前 会 触发 textInput 事件 。 

在 用 户 按 了 一 下 键盘 上 的 字符 键 时 ， 首 先 会 触发 keydown 事件 ， 然 后 紧 跟着 是 keypress 事件 ， 
最 后 会 触发 keyup 事件 。 其 中 , keydown 和 keypress 都 是 在 文本 框 发 生变 化 之 前 被 触发 的 ; 而 keyup 
事件 则 是 在 文本 框 已 经 发 生变 化 之 后 被 触发 的 。 如 果 用 户 按 下 了 一 个 字符 键 不 放 ， 就 会 重复 触发 
keydown 和 keypress 事件 ， 直 到 用 户 松 开 该 键 为 止 。 

如 果 用 户 按 下 的 是 一 个 非 字符 键 ,那么 首先 会 触发 keydown 事件 ， 然 后 就 是 keyup 事件 。 如 果 按 
住 这 个 非 字 符 键 不 放 , 那么 就 会 一 直 重 复 触发 keydown 事件 , 直到 用 户 松 开 这 个 键 , 此 时 会 触发 keyup 
事件 。 
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键盘 事件 与 鼠标 事件 一 样 ， 都 支持 相同 的 修改 键 。 而 有 全， 键盘 事件 的 事件 对 象 中 


也 有 shiftKey、ctrlKey、altKey 和 metaKey 属性 。IE 不 支持 metaKey。 
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1. 键 码 

在 发 生 keydown 和 keyup 事件 时 ，event 对 象 的 keycode 属性 中 会 包含 一 个 代码 ， 与 键盘 上 一 
个 特定 的 键 对 应 。 对 数字 字母 字符 键 ，keycoae 属性 的 值 与 ASCII 码 中 对 应 小 写字 母 或 数字 的 编码 相 
同 。 因 此 ， 数 字 键 7 的 keycoqde 值 为 55 ， 而 字母 A 键 的 keycode 值 为 65 一 一 与 Shift 键 的 状态 无 关 。 
DOM 和 正 的 sevent 对 象 都 支持 keycode 属性 。 请 看 下 面 这 个 例子 : 

Var textbox = document .getElementById ("myText"); 

时 EventUtil.addHandler (textbox, "keyup", function(event)t{ 
event = EventUtil.getEvent (event); 


alert (event .keyCode); 


这 





























KeyUpEventExample01.htm 


在 这 个 例子 中 , 用户 每 次 在 文本 框 中 按键 触发 keyup 事件 时 ， 都 会 显示 keycode 的 值 。 下 表 列 出 
了 所 有 非 字符 键 的 键 码 。 
































键 键 码 键 键 码 

退 格 (Backspace ) 8 数字 小 键盘 1 97 
制 表 (Tab ) 9 数字 小 键盘 2 98 
回 车 (Enter ) 13 数字 小 键盘 3 99 
上 档 〈Shift ) 16 数字 小 键盘 4 100 
控制 ( Ctrl ) 17 数字 小 键盘 5 101 
Alt 18 数字 小 键盘 6 102 
和 暂停/ 中断 (Pause/Break ) 19 数字 小 键盘 7 103 
大 写 锁定 ( Caps Lock ) 20 数字 小 键盘 8 104 
退出 (Esc) 27 数字 小 键盘 9 105 
上 翻 页 (Page Up ) 33 数字 小 键盘 + 107 
下 翻 页 (Page Down ) 34 数字 小 键盘 及 大 键盘 上 的 - 109 
结尾 (End ) 35 数字 小 键盘 . 110 
开头 (Home ) 36 数字 小 键盘 / 111 
左 箭头 ( Left Arrow ) 37 Fl 112 
上 箭头 (Up Arrow ) 38 F2 113 
右 箭头 (Right Arrow ) 39 F3 114 
下 箭头 (Down Arrow ) 40 F4 115 
插入 (Is ) 45 F5 116 

I 除 ( Del ) 46 F6 117 
左 Windows 键 91 F7 118 
右 Windows 键 92 F8 119 
上 下 文 菜单 键 93 F9 120 
数字 小 键盘 0 96 F10 121 
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( 续 ) 
键 键 码 键 键 码 

Fl11 122 正 斜 杠 191 

F12 123 沉 音 符 () 192 
数字 锁 ( Num Lock ) 144 等 于 61 

滚动 锁 ( Scroll Lock ) 145 左 方 括号 219 

分 号 ( IE/Safari/Chrome 中 ) 186 反 斜 杠 (\) 220 

分 号 ( Opera/FF 中 ) 59 右 方 括号 221 

小 于 188 单 引 号 222 

大 于 190 














无 论 keydown 或 keyup 事件 都 会 存在 的 一 些 特殊 情况 ,在 Firefox 和 
值 为 59， 也 就 是 ASCII 中 分 号 的 编码 ; 但 正和 Safari 返回 186， 即 键盘 
2. 字符 编码 








Opera 中 , 按 分 号 键 时 keyCcode 
! 按 键 的 键 码 。 














发 生 keypress 事件 意味 着 按 下 的 键 会 影响 到 屏幕 中 文本 的 显示 。 在 所 有 浏览 器 中 , 按 下 能 够 插入 
或 删除 字符 的 键 都 会 触发 keypress 事件 ; 按 下 其 他 键 能 否 触发 此 事件 因 浏 览 右 而 异 。 由 于 截止 到 2008 
年 ， 尚 无 浏览 器 实现 “DOM3 级 事件 ”规范 ， 所 以 浏览 器 之 间 的 键盘 事件 并 没有 多 大 的 差异 。 

IE9、Firefox 、Chrome 和 Safari 的 event 对 象 都 支持 一 个 cnarcode 属性 ， 这 个 属性 只 有 在 发 生 














keypress 事件 时 才 包 含 值 ， 而 且 这 个 值 是 按 下 的 那个 键 所 代表 字符 的 






































ASCII 编码 。 此 时 的 keycode 








通常 等 于 0 或 者 也 可 能 等 于 所 按键 的 键 码 -IE8 及 之 前 版 本 和 Opera 则 是 在 keycode 中 保存 字符 的 ASCII 











编码 。 要 想 以 跨 浏览 器 的 方式 取得 字符 编码 ,必须 首先 检测 cnarcode 属性 是 否 可 用 ,如 果 不 可 用 则 使 

















用 keycode， 如 下 面 的 例子 所 示 。 


Var EventUtil = { 





/ /省略 的 代码 


getCharCode: function(event)t{ 


if (typeof event.charCode == "number"){ 
return event.charCode; 
} else { 
return event .keyCode; 
} 
}v 
/ /省略 的 代码 


这 个 方法 首先 检测 cnarcoge 属性 是 否 包含 数值 ( 在 不 支持 这 个 属 怕 








EventUItil.js 











FE 的 浏览 器 中 , 值 为 undefined )， 


如 果 是 ， 则 返回 该 值 。 否 则 ， 就 返回 keycode 属性 值 。 下 面 是 使 用 这 个 方法 的 示例 。 





Var textbox = document .getElementById ("myText" ) ; 
EventUtil.addHandler (textbox, "keypress", function(event)t 
event = EventUtil.getEvent (event); 
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alert (EventUtil.getCharCode (event)); 
人 和 


KeyPressEventExample01.htm 

在 取得 了 字符 编码 之 后 ， 就 可 以 使 用 string .fromcharcode() 将 其 转换 成 实际 的 字符 。 

3. DOM3 级 变化 

尽管 所 有 浏览 器 都 实现 了 某 种 形式 的 键盘 事件 ，DOM3 级 事件 还 是 做 出 了 一 些 改变 。 比 如 ，DOM3 
级 事件 中 的 键盘 事件 ， 不 再 包含 charcode 属性 ， 而 是 包含 两 个 新 属性 : key 和 char。 
其 中 , key 属性 是 为 了 取代 keycode 而 新 增 的 , 它 的 值 是 一 个 字符 串 。 在 按 下 某 个 字符 刍 时 ，key 
的 值 就 是 相应 的 文本 字符 ( 如“k” 或 “M”); 在 按 下 非 字 符 键 时 ，key 的 值 是 相应 键 的 名 (如 “Shift” 
或 “Down”)。 而 char 属性 在 按 下 字符 键 时 的 行为 与 key 相同 ,但 在 按 下 非 字 符 键 时 值 为 nu11。 

IE9 支持 key 属性 ， 但 不 支持 char 属性 。Safari 5 和 Chrome 支持 名 为 keyIdentifier 的 属性 ， 
在 按 下 非 字 符 键 (例如 Shift ) 的 情况 下 与 key 的 值 相同 。 对 于 字符 键 ，keyIdentifier 返回 一 个 格式 
类 似 “U+0000” 的 字符 串 ， 表 示 Unicode 值 。 









































Var textbox = document .getElementById ("myText" ) ; 
CY) EventUtil.addHandler (textbox, "keypress", function(event)t{ 
event = EventUtil.getEvent (event); 
var identifier = event.key || event.keyIdentifier; 
if (identifier)t{ 
alert (identifi er); 





} 
本 


DOMLevel3KeyPropertyExample01.htm 


由 于 存在 跨 浏 览 器 问题 ， 因 此 本 书 不 推荐 使 用 key、keyIdentifier 或 char。 

DOM3 级 事件 还 添加 了 一 个 名 为 location 的 属性 ， 这 是 一 个 数值 ， 表 示 按 下 了 什么 位 置 上 的 键 : 
0 表示 默认 键盘 ，1 表示 左 侧 位 置 (例如 左 位 的 Alt 键 )，2 表示 右 侧 位 置 (例如 右 侧 的 Shift 键 )，3 表示 
数字 小 键盘 ，4 表示 移动 设备 键盘 ( 也 就 是 虚拟 键盘 )，5 表示 手柄 ( 如 任天堂 Wii 控制 右 )。IE9 支持 这 
个 属性 。Safari 和 Chrome 支持 名 为 keyLocation 的 等 价 属性 ,但 即 有 bug 一 一 值 始 终 是 0， 除 非 按 下 
了 数字 键盘 (此 时 , 值 为 3); 否则 ,不 会 是 1、2、4、5。 






































Var textbox = document .getElementById ("myText"); 
EventUtil.addHandler (textbox, "keypress", function(event)t{ 
event = EventUtil.getEvent (event); 
var loc = event.location | | event .keyLocation; 
if (loc){ 
alert (loc); 





} 
3 


DOMLevel3LocationPropertyExample01.htm 
与 key 属性 一 样 ， 支 持 location 的 浏览 器 也 不 多 ， 所 以 在 跨 浏 览 器 开发 中 不 推荐 使 用 。 
最 后 是 给 event 对 象 添加 了 getModifierstate() 方 法 ,这 个 方法 接收 一 个 参数 , 即 等 于 shift、 


Control、 AltGraph 或 Meta 的 字符 串 ， 表示 要 检测 的 修改 键 。 如 果 指 定 的 修改 键 是 活动 的 (也 就 是 
处 于 被 按 下 的 状态 )， 这 个 方法 返回 true， 否 则 返回 false。 
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Var textbox = document .getElementById ("myText" ) ; 
EventUtil.addHandler (textbox, "keypress", function(event)t 
event = EventUtil.getEvent (event); 
if (event .getModifierSstate)t{ 
alert (event .getModifierState("Shift")); 











} 
}33 


DOMLevel3LocationGetModifierStateExample01.htm 


实际 上 ， 通 过 event 对 象 的 shiftKey、altKey、ctrlKey 和 metaKey 属性 已 经 可 以 取得 类 似 
的 属性 了 。IE9 是 唯一 支持 getModifierstate() 方 法 的 浏览 器 。 

4. textInput 事件 

“DOM3 级 事件 ”规范 中 引入 了 一 个 新 事件 ， 名 叫 textInput。 根 据 规范 ， 当 用 户 在 可 编辑 区 域 中 
输入 字符 时 ， 就 会 触发 这 个 事件 。 这 个 用 于 替代 keypress 的 textInput 事件 的 行为 稍 有 不 同 。 区 别 
之 一 就 是 任何 可 以 获得 焦点 的 元 素 都 可 以 触发 keypress 事件 ,但 只 有 可 编辑 区 域 才 能 触发 rextInput 
事件 。 区 别 之 二 是 textInput 事件 只 会 在 用 户 按 下 能 够 输入 实际 字符 的 键 时 才 会 被 触发 , 而 keypress 
事件 则 在 按 下 那些 能 够 影响 文本 显示 的 键 时 也 会 触发 〈 例 如 退 格 键 )。 
1 于 textInput 事件 主要 考虑 的 是 字符 ， 因 此 它 的 event 对 象 中 还 包含 一 个 data 属性 ， 这 个 属 
性 的 值 就 是 用 户 输入 的 字符 ( 而 非 字 符 编 码 )。 换 句 话 说， 用户 在 没有 按 上 档 键 的 情况 下 按 下 了 S 键 ， 
data 的 值 就 是 "s" ， 而 如 果 在 按 住 上 档 键 时 按 下 该 键 ，data 的 值 就 是 "s"。 

以 下 是 一 个 使 用 textInput 事件 的 例子 : 

Var textbox = Qqocument .getElementById("myText" ) ; 

EventUtil.addHandler (textbox, "textInput", function(event)t{ 

event = EventUtil.getEvent (event); 


alert (event .data); 
}); 































































































TextInputEventExample01.htm 


在 这 个 例子 中 ,插入 到 文本 框 中 的 字符 会 通过 一 个 警告 框 显示 出 来 。 

另外 ，event 对 象 上 还 有 一 个 属性 ， 叫 inputMethod， 表 示 把 文本 输入 到 文本 框 中 的 方式 。 
口 0， 表 示 浏 览 右 不 确定 是 怎么 输入 的 。 

口 1， 表 示 是 使 用 键盘 输入 的 。 

口 2， 表 示 文 本 是 粘贴 进来 的 。 

口 3， 表 示 文 本 是 拖 放 进来 的 。 

口 4， 表 示 文 本 是 使 用 IME 输入 的 。 

口 5， 表 示 文 本 是 通过 在 表单 中 选择 某 一 项 输入 的 。 

口 6， 表 示 文 本 是 通过 手写 输入 的 〈 比如 使 用 手写 笔 )。 

口 7， 表 示 文 本 是 通过 语音 输入 的 。 

口 8， 表 示 文 本 是 通过 几 种 方法 组 合 输入 的 。 

口 9， 表 示 文 本 是 通过 脚本 输入 的 。 

使 用 这 个 属性 可 以 确定 文本 是 如 何 输入 到 控件 中 的 ， 从 而 可 以 验证 其 有 效 性 。 支 持 textInput 属 
性 的 浏览 器 有 IE9+、Safari 和 Chrome。 只 有 下 支持 inputMethod 属性 。 
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5. 设备 中 的 键盘 事件 

任天堂 Wii 会 在 用 户 按 下 Wii 遥控 器 上 的 按键 时 触发 键盘 事件 。 尽 管 没 有 办 法 访问 Wii 遥控 器 中 的 
所 有 按键 ， 但 还 是 有 一 些 键 可 以 触发 键盘 事件 。 图 13-6 展示 了 一 些 键 的 键 码 ， 通 过 这 些 键 码 可 以 知道 
用 户 按 下 了 哪个 键 。 




















(无 法 访问 ) 


1 
178 










(无 法 访问 ) 176 


170 174 
(无 法 访问 ) 


172 


173 


图 13-8 
当 用 户 按 下 十 字 键 盘 ( 键 码 为 175 ~ 178 )、 减 号 ( 170 )、 加 号 (174 )、1 (172 ) 或 2 (173 ) 键 时 就 

















会 触发 键盘 事件 。 但 没有 办 法 得 知 用 户 是 否 按 下 了 电源 开关 、A 、B 或 主页 键 。 
iOS 版 Safari 和 Android 版 WebKit 在 使 用 屏幕 键盘 时 会 触发 键盘 事件 。 


13.4.5 ”复合 事件 


复合 事件 ( composition event ) 是 DOM3 级 事件 中 新 添加 的 一 类 事件 ， 用 于 处 理 IME 的 输入 序列 。 
IME (Input Method Editor， 输 入 法 编辑 器 ) 可 以 让 用 户 输入 在 物理 键盘 上 找 不 到 的 字符 。 例 如 ， 使 用 拉 
丁 文 键盘 的 用 户 通过 IME 照样 能 输入 日 文字 符 。IME 通常 需要 同时 按 住 多 个 键 ， 但 最 终 只 输入 一 个 字 
符 。 复 合 事件 就 是 针对 检测 和 处 理 这 种 输入 而 设计 的 。 有 以 下 三 种 复合 事件 。 

口 compositionstart: 在 IME 的 文本 复合 系统 打开 时 和 触发， 表示 要 开始 输入 了 。 
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口 compositionupdate: 在 向 输入 字段 中 插 人 新 字符 时 触发 。 
口 compositionend: 在 IME 的 文本 复合 系统 关闭 时 触发 ， 表 示 返 回 正常 键盘 输入 状态 。 

复合 事件 与 文本 事件 在 很 多 方面 都 很 相似 。 在 触发 复合 事件 时 ， 目 标 是 接收 文本 的 输入 字段 。 但 它 
比 文本 事件 的 事件 对 象 多 一 个 属性 aata， 其 中 包含 以 下 几 个 值 中 的 一 个 : 
口 如 果 在 compositionstart 事件 发 生 时 访问 , 包含 正在 编辑 的 文本 (例如, 已 经 选中 的 需要 马 
上 替换 的 文本 ); 
口 如 果 在 compositionupdate 事件 发 生 时 访问 ， 包 含 正 插入 的 新 字符 ; 
口 如 果 在 compositionend 事件 发 生 时 访问 ， 包 含 此 次 输入 会 话 中 插入 的 所 有 字符 。 
与 文本 事件 一 样 ， 必 要 时 可 以 利用 复合 事件 来 筛选 输入 。 可 以 像 下 面 这 样 使 用 它们 : 








































































































Var textbox = document .getElementById("myText"); 
EventUtil.addHandler (textbox, "compositionstart", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (event .data); 
}); 


EventUtil.addHandler (textbox, "compositionupdate", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (event .data); 

}); 


EventUtil.addHandler (textbox, "compositionend", function(event)t{ 
event = EventUtil.getEvent (event); 
alert (event .data); 

}); 


CompositionEventsExample01.htm 


IE9+ 是 到 2011 年 唯一 支持 复合 事件 的 浏览 器 。 由 于 缺少 支持 ， 对 于 需要 开发 跨 浏览 器 应 用 的 开发 
人 员 ， 它 的 用 处 不 大 。 要 确定 浏览 需 是 否 文 持 复 合 事件 ， 可 以 使 用 以 下 代码 : 


Var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0"); 


13.4.6 ”变动 事件 


DOM2 级 的 变动 ( mutation ) 事 件 能 在 DOM 中 的 某 一 部 分 发 生变 化 时 给 出 提示 。 变动 事件 是 为 XML 
或 HTML DOM 设计 的 ， 并 不 特定 于 某 种 语言 。DOM2 级 定义 了 如 下 变动 事件 。 
口 DoMSubtreeModified: 在 DOM 结构 中 发 生 任何 变化 时 触发 。 这 个 事件 在 其 他 任何 事件 触发 
后 都 会 触发 。 
口 DOMNodeInserted: 在 一 个 节点 作为 子 节点 被 插入 到 另 一 个 节点 中 时 触发 。 
口 DOMNodeRemoved: 在 节点 从 其 父 节 点 中 被 移 除 时 触发 。 
口 DoMNodeInsertedIntoDocument: 在 一 个 节点 被 直接 插入 文档 或 通过 子 树 间接 插入 文档 之 后 
触发 。 这 个 事件 在 DOMNodeInserted 之 后 触发 。 
口 DOMNodeRemovedFromDocument :在 一 个 节点 被 直接 从 文档 中 移 除 或 通过 子 树 间接 从 文档 中 移 
除 之 前 触发 。 这 个 事件 在 DOMNodeRemoved 之 后 触发 。 
口 DOMAttrModified: 在 特性 被 修改 之 后 触发 。 
口 DoMCharacterDataModified: 在 文本 节点 的 值 发 生变 化 时 触发 。 
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使 用 下 列 代 码 可 以 检测 出 浏览 器 是 否 支 持 变动 事件 : 
Var isSupported = document.implementation.hasFeature("MutationEvents", "2.0"); 


IE8 及 更 早 版 本 不 支持 任何 变动 事件 。 下 表 列 出 了 不 同 浏览 器 对 不 同 变动 事件 的 支持 情况 。 








事 件 Opera 9+ Firefox 3+ Safari 3+ 及 Chrome IE9+ 
DOMSubtreeModified = 支持 支持 支持 
DOMNodeInserted 支持 支持 支持 支持 
DOMNodeRemoved 支持 支持 支持 支持 








由 于 DOM3 级 事件 模块 作废 了 很 多 变动 事件 ， 所 以 本 节 只 介绍 那些 将 来 仍然 会 得 到 支持 的 事件 。 

1. 删除 节 

在 使 用 removechild() 或 replacechild() 从 DOM 中 删除 节点 时 ,首先 会 触发 DOMNodeRemoved 
有 件 。 这 个 事件 的 目标 ( event .target ) 是 被 删除 的 节点 ， 而 event .relatedNode 属性 中 包含 着 对 
目标 节点 父 节 点 的 引用 。 在 这 个 事件 触发 时 ,节点 尚未 从 其 父 节 点 删除 , 因此 其 parentNode 属性 仍然 
指向 父 节 点 (与 event .relatedNode 相同 )。 这 个 事件 会 冒 泡 ， 因 而 可 以 在 DOM 的 任何 层次 上 面 处 
理 它 。 

如 果 被 移 除 的 节点 包含 子 节 点 ， 那 么 在 其 所 有 子 节 点 以 及 这 个 被 移 除 的 节点 上 会 相继 触发 
DOMNodeRemovedFromDocument 事件 。 但 这 个 事件 不 会 冒 泡 , 所 以 只 有 直接 指定 给 其 中 一 个 子 节点 的 
事件 处 理 程序 才 会 被 调用 。 这 个 事件 的 目标 是 相应 的 子 节点 或 者 那个 被 移 除 的 节点 ， 除 此 之 外 event 
对 象 中 不 包含 其 他 信息 。 

紧 随 其 后 触发 的 是 DoMSupbtreeModified 事件 。 这 个 事件 的 目标 是 被 移 除 节点 的 父 节 点 ; 此 时 的 
event 对 象 也 不 会 提供 与 事件 相关 的 其 他 信息 。 

为 了 理解 上 述 事件 的 触发 过 程 ， 下 面 我 们 就 以 一 个 简单 的 HTML 页 面 为 例 。 

<! DOCTYPE html> 

<html> 

<head> 

<title>Node Removal Events Example</title> 
</head> 

<body> 

<ul id="myList"> 
<l1i>Item 1</1i> 
<li>Item 2</1i> 
<l1i>Item 3</1i> 
</ul> 

</body> 

</html> 

在 这 个 例子 中 ， 我 们 假设 要 移 除 <ul> 元 素 。 此 时 ， 就 会 依次 触发 以 下 事件 。 

(1) 在 <ul> 元 素 上 触发 DOMNodeRemoved 事件 。relatedNode 属性 等 于 document .body。 

(2) 在 <ul> 元 素 上 触发 DOMNodeRemovedFromDocument 事件 。 


(3) 在 身 为 <ul> 元 素 子 节点 的 每 个 <1i> 元 素 及 文本 节点 上 触发 DOMNodeRemovedFromDocument 











山中 


















































































































































(4) 在 aocument .body 上 触发 DoMsubtreeModified 事件 ， 因 为 <ul> 元 素 是 document .body 
的 直接 子 元 素 。 
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运行 下 列 代码 可 以 验证 以 上 事件 发 生 的 顺序 。 


EventUtil.addHandler (window, "load", function(event)t 
var list = document.getElementById("myList"); 











EventUtil.addHandler (document, "DOMSubtreeModified", function(event)t 
alert (event .type); 

alert (event.target); 

了 
EventUtil.addHandler (document, "DOMNodeRemoved", function(event)t{ 





alert (event .type); 
alert (event .target); 
alert (event .relatedNode); 


}) 3 
EventUtil.addHandler (list.firstChild, "DOMNodeRemovedFromDocument", function(event)t{ 
alert (event .type); 
alert (event .target); 


})s 

















list.parentNode.removeChild(list); 
}); 


以 上 代码 为 aocument 添加 了 针对 DoMSubtreeModified 和 DOMNodeRemoved 事件 的 处 理 程序 ， 
以 便 在 页 面 上 处 理 这 些 事 件 。 由 于 DOMNodeRemovedFromDocument 不 会 冒 泡 ， 所 以 我 们 将 针对 它 的 
事件 处 理 程序 直接 添加 给 了 <ul> 元 素 的 第 一 个 子 节 点 (在 兼容 DOM 的 浏览 器 中 是 一 个 文本 节点 )。 在 
设置 了 以 上 事件 处 理 程序 后 ， 代 码 从 文档 中 移 除 了 <ul> 元 素 。 

2. 插入 节点 

在 使 用 appendchild() 、replaceChild() 或 insertBefore() 向 DOM 中 插入 节点 时 ， 首 先 会 
触发 DoMNodeInserted 事件 。 这 个 事件 的 目标 是 被 插入 的 节点 , 而 event .relatedNode 属性 中 包含 
一 个 对 父 节点 的 引用 。 在 这 个 事件 触发 时 ， 节 点 已 经 被 插入 到 了 新 的 父 节 点 中 。 这 个 事件 是 骨 泡 的 ， 因 
此 可 以 在 DOM 的 各 个 层次 上 处 理 它 。 

紧 接 着 ， 会 在 新 插入 的 节点 上 面 触发 DOMNodeInsertedIntoDocument 事件 。 这 个 事件 不 冒 泡 ， 
因此 必须 在 插入 节点 之 前 为 它 添加 这 个 事件 处 理 程序 。 这 个 事件 的 目标 是 被 插入 的 节点 ， 除 此 之 外 
event 对 象 中 不 包含 其 他 信息 。 

最 后 一 个 触发 的 事件 是 DoMsubtreeModified， 触 发 于 新 插入 节点 的 父 节 点 。 

我 们 仍 以 前 面 的 HIML 文档 为 例 ， 可 以 通过 下 列 JavaScript 代码 来 验证 上 述 事件 的 触发 顺序 。 
EventUtil.addHandler (window, "load", function(event)t{ 

var list = document .getElementById("myList"); 


Var item = document.createElement ("1i"); 
item.appendChild(document .createTextNode("Item 4")); 































































































EventUtil.addHandler (document, "DOMSubtreeModified", function(event)t 
alert (event .type); 
alert (event.target); 


} 7 





EventUtil.addHandler (document, "DOMNodeInserted", function(event)t{ 
alert (event .type); 
alert (event .target); 
alert (event .relatedNode); 


局 下 
EventUtil.addHandler (item, "DOMNodeInsertedIintoDocument", function(event)t{ 
alert (event .type); 
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alert (event .target); 


全。 


list.appendChild(item); 
Ps 


以 上 代码 首先 创建 了 一 个 包含 文本 "Item 4" 的 新 <1i> 元 素 。 由 于 DOMSubtreeModified 和 
DOMNodeInserted 事件 是 冒 泡 的 ， 所 以 把 它们 的 事件 处 理 程序 添加 到 了 文档 中 。 在 将 列表 项 插入 到 其 
父 节点 之 前 ， 先 将 DoMNodeInsertedIntoDocument 事件 的 事件 处 理 程序 添加 给 它 。 最 后 一 步 就 是 使 
用 appenachild() 来 添加 这 个 列表 项 ; 此 时 ,事件 开始 依次 被 触发 。 首 先是 在 新 <1i> 元 素 项 上 触发 
DOMNodeInserted 事件 ,， 其 relatedNode 是 <ul> 元 素 。 然 后 是 触发 新 <1i> 元 素 上 的 DoOMNode- 
InsertedIntoDocument 事件 ， 最 后 触发 的 是 <ul> 元 素 上 的 DOMSubtreeModified 事件 。 












































13.4.7 HTMLS5 事件 


DOM 规范 没有 涵盖 所 有 浏览 器 支持 的 所 有 事件 。 很 多 浏览 器 出 于 不 同 的 目的 一 一 满足 用 户 需 求 或 
解决 特殊 问题 ， 还 实现 了 一 些 自 定义 的 事件 。HTMLS5 详尽 列 出 了 浏览 器 应 该 支持 的 所 有 事件 。 本 节 只 
讨论 其 中 得 到 浏览 器 完善 支持 的 事件 ， 但 并 非 全 部 事件 。( 其 他 事件 会 在 本 书 其 他 章节 讨论 。) 

1. contextmenu 事件 

Windows 95 在 PC 中 引入 了 上 下 文 菜单 的 概念 ， 即 通过 单 击 鼠 标 右键 可 以 调 出 上 下 文 菜单 。 不 久 ， 
这 个 概念 也 被 引入 了 Web 领域。 为 了 实现 上 下 文 菜单 ， 开 发 人 员 面 临 的 主要 问题 是 如 何 确定 应 该 显示 
上 下 文 菜 单 (在 Windows 中 ， 是 右键 单 击 ; 在 Mac 中 ， 是 Ctrl+ 单 击 )， 以 及 如 何 屏蔽 与 该 操作 关联 的 
默认 上 下 文 菜单 。 为 解决 这 个 问题 ， 就 出 现 了 contextmenu 这 个 事件 ， 用 以 表示 何 时 应 该 显示 上 下 文 
菜单 ， 以 便 开 发 人 员 取 消 默认 的 上 下 文 菜单 而 提供 自 定义 的 菜单 。 

由 于 contextmenu 事件 是 崩 泡 的 ， 因 此 可 以 为 aocument 指定 一 个 事件 处 理 程序 ， 用 以 处 理 页 面 
中 发 生 的 所 有 此 类 事件 。 这 个 事件 的 目标 是 发 生 用 户 操 作 的 元 素 。 在 所 有 浏览 器 中 都 可 以 取消 这 个 事件 : 
在 兼容 DOM 的 浏览 器 中 , 使 用 event .preventDefalut (); 在 耻 中 , 将 event.returnValue 的 值 
设置 为 false。 因 为 contextmenu 事件 属于 鼠标 事件 ， 所 以 其 事件 对 象 中 包含 与 光标 位 置 有 关 的 所 有 
属性 。 通 常 使 用 contextmenu 事件 来 显示 自 定义 的 上 下 文 菜单 ， 而 使 用 onclick 事件 处 理 程序 来 隐 
藏 该 菜单 。 以 下 面 的 HTML 页 面 为 例 。 


<!IDOCTYPE html> 
<html> 
<head> 
<title>ContextMenu Event Example</title> 
</head> 
<body> 
<div id="myDiv">Right click or Ctrl+click me to get a custom context menu. 
Click anywhere else to get the default context menu.</div> 
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color: 
silver"> 
<li><a href="http://ww.nczonline.net">Nicholas’” site</a></1i> 
<l1i><a href="http://www.wrox.com">Wrox site</a></1i> 
<li><a href="http://www.yahoo.com">Yahoo!</a></1i> 
</ul> 
</body> 
</html> 


















































































































































ContextMenuEventExample01.htm 
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这 里 的 <aiv> 元 素 包含 一 个 自 定义 的 上 下 文 菜单 。 其 中 ，<u1> 元 素 作为 自 定义 上 下 文 菜单 , 并且 在 
初始 时 是 隐藏 的 。 实 现 这 个 例子 的 JavaScript 代码 如 下 所 示 。 


CD EventUtil.addHandler (window, "load", function(event)t 
var div = document.getElementById("myDiv"); 














EventUtil.addHandler (div, "contextmenu", function(event)t{ 
event = EventUtil.getEvent (event); 
EventUtil.preventDefault (event); 














Var menu = document .getElementById("myMenu"); 
menu.style.left = event.clientX + "px"; 
menu.style.top = event.clientY + "px"; 
menu.style.visibility = "visible"; 


3 上) 





EventUtil.addHandler (document, "click", function(event)t{ 
document .getElementById("myMenu") .style.visibility = "hidden"; 





}) 3 


ContextMenuEventExample01.htm 


在 这 个 例子 中 ， 我们 为 <aiv> 元 素 添加 了 oncontextmenu 事件 的 处 理 程序 。 这 个 事件 处 理 程序 首 
先 会 取消 默认 行为 ， 以 保证 不 显示 浏览 器 默认 的 上 下 文 菜单 。 然 后 ， 再 根据 event 对 象 clientx 和 
clientY 属性 的 值 ， 来 确定 放置 <ul> 元 素 的 位 置 。 最 后 一 步 就 是 通过 将 visibility 属性 设置 为 
"visible" 来 显示 自 定义 上 下 文 菜单 。 男 外 ， 还 为 document 添加 了 一 个 onclick 事件 处 理 程 序 ， 以 
便 用 户 能 够 通过 鼠标 单 击 来 隐藏 菜单 〈 单 击 也 是 隐藏 系统 上 下 文 菜单 的 默认 操作 )。 
虽然 这 个 例子 很 简单 ， 但 它 却 展 示 了 Web 上 所 有 自 定义 上 下 文 菜单 的 基本 结构 。 只 需 为 这 个 例子 
中 的 上 下 文 菜单 添加 一 些 CSS 样式 ， 就 可 以 得 到 非常 棒 的 效果 。 

支持 contextmenu 事件 的 浏览 器 有 IE、Firefox 、Safari 、Chrome 和 Opera 11+。 

2. beforeunload 事件 

之 所 以 有 发 生 在 window 对 象 上 的 beforeunload 事件 ， 是 为 了 让 开发 人 员 有 可 能 在 页 面 印 载 前 
阻止 这 一 操作 。 这 个 事件 会 在 浏览 器 钊 载 页 面 之 前 触发 ， 可 以 通过 它 来 取消 印 载 并 继续 使 用 原 有 页 面 。 
但 是 ,不 能 彻底 取消 这 个 事件 ， 因 为 那 就 相当 于 让 用 户 无 法 离开 当前 页 面 了 。 为 此 ， 这 个 事件 的 意图 是 
将 控制 权 交 给 用 户 。 显 示 的 消息 会 告知 用 户 页 面 行将 被 和 印 载 ( 正 因为 如 此 才 会 显示 这 个 消息 )， 询 问 用 
户 是 否 真 的 要 关闭 页 面 ， 还 是 希望 继续 留 下 来 ( 见 图 13-9 )。 








































































































Confirm 


9) Are you sure you want to navigate away from this page? 
4 


I'm really going to miss you if you go, 


Press OK to continue, or Cancel to stay on the current page， 


| Cancel 








图 13-9 














为 了 显示 这 个 弹出 对 话 框 ， 必 须 将 event .returnvalue 的 值 设 置 为 要 显示 给 用 户 的 字符 串 (对 
IE 及 Fiefox 而 言 )， 同 时 作为 函数 的 值 返回 (对 Safari 和 Chrome 而 言 )， 如 下 面 的 例子 所 示 。 
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EventUtil.addHandler (window, "beforeunload", function(event)t{ 
event = EventUtil.getEvent (event); 
Var message = "I'm really going to miss you if you go."; 
event .returnValue = message; 
return message; 





Before UnloadEventExample01.htm 








正和 Firefox、Safari 和 Chrome 都 支持 beforeunload 事件 , 也 都 会 弹出 这 个 对 话 框 询问 用 户 是 否 
真 想 离开 。Opera 11 及 之 前 的 版 本 不 支持 beforeunload 事件 。 

3. DOMContentLoaded 事件 

如 前 所 述 ，winqovw 的 1oad 事件 会 在 页 面 中 的 一 切 都 加 载 完毕 时 触发 ， 但 这 个 过 程 可 能 会 因为 要 
加 载 的 外 部 资源 过 多 而 颇 费 周折 。 而 DoMContentLoaded 事件 则 在 形成 完整 的 DOM 树 之 后 就 会 触发 ， 
不 理会 图 像 、JavaScript 文件 、CSS 文件 或 其 他 资源 是 否 已 经 下 载 完毕 。 与 load 事件 不 同 ， 
DOMContentLoaded 支持 在 页 面 下 载 的 早期 添加 事件 处 理 程序 ， 这 也 就 意味 着 用 户 能 够 尽早 地 与 页 面 
进行 交互 。 

要 处 理 DoMContentLoaded 事件 ， 可 以 为 document 或 windqovw 添加 相应 的 事件 处 理 程序 ( 尽管 
这 个 事件 会 胃 泡 到 window， 但 它 的 目标 实际 上 是 document )。 来 看 下 面 的 例子 。 



































EventUtil.addHandler (document, "DOMContentLoaded", function(event)t 
alert ("Content loaded"); 
jo 


DOMContentLoadedEventExample01.htm 


DOMContentLoaded 事件 对 象 不 会 提供 任何 额外 的 信息 (其 target 属性 是 document )。 

IE9+、Firefox、Chrome 、Safari 3.1+ 和 Opera 9+ 都 支持 DOMContentLoaded 事件 ， 通 常 这 个 事件 
既 可 以 添加 事件 处 理 程序 ， 也 可 以 执行 其 他 DOM 操作 。 这 个 事件 始终 都 会 在 10ad 事件 之 前 触发 。 

对 于 不 支持 DOMContentLoaded 的 浏览 器 ， 我 们 建议 在 页 面 加 载 期 间 设 置 一 个 时 间 为 0 毫秒 的 超 
时 调用 ， 如 下 面 的 例子 所 示 。 















































setTimeout (function(){ 
// 在 此 添加 事件 处 理 程序 
}y, 0) 








这 段 代码 的 实际 意思 就 是 :“ 在 当前 JavaScript 处 理 完成 后 立即 运行 这 个 函数 。” 在 页 面 下 载 和 构建 
期 间 ， 只 有 一 个 JavaScript 处 理 过 程 ， 因 此 超时 调用 会 在 该 过 程 结束 时 立即 触发 。 至 于 这 个 时 间 与 
DOMContentLoaded 被 触发 的 时 间 能 否 同步 ,主要 还 是 取决 于 用 户 使 用 的 浏览 器 和 页 面 中 的 其 他 代码 。 
为 了 确保 这 个 方法 有 效 ， 必须 将 其 作为 页 面 中 的 第 一 个 超时 调用 ; 即便 如 此 ， 也 还 是 无 法 保证 在 所 有 环 
境 中 该 超时 调用 一 定 会 早 于 1oad 事件 被 触发 。 

4. readystatechange 事件 

正 为 DOM 文档 中 的 某 些 部 分 提供 了 readystatechange 事件 。 这 个 事件 的 目的 是 提供 与 文档 或 
元 素 的 加 载 状态 有 关 的 信息 ， 但 这 个 事件 的 行为 有 时 候 也 很 难 预料 。 支 持 readystatechange 事件 的 
每 个 对 象 都 有 一 个 readystate 属性 ， 可 能 包含 下 列 5 个 值 中 的 一 个 。 

口 uninitialized (未 初始 化 ): 对 象 存 在 但 尚未 初始 化 。 
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口 loading (正在 加 载 )， 对象 正在 加 载 数据 。 
口 1oadqed (加 载 完毕 ): 对 象 加 载 数据 完成 。 
口 interactive (交互 ): 可 以 操作 对 象 了 ， 但 还 没有 完全 加 载 。 
口 complete (完成 ): 对 象 已 经 加 载 完毕 。 

这 些 状态 看 起 来 很 直观 , 但 并 非 所 有 对 象 都 会 经 历 readystate 的 这 几 个 阶段 。 换 句 话 说， 如 果 某 
个 阶段 不 适用 某 个 对 象 ， 则 该 对 象 完 全 可 能 跳 过 该 阶段 ， 并 没有 规定 哪个 阶段 适用 于 哪个 对 象 。 显 然 ， 
这 意味 着 readystatechange 事件 经 常会 少 于 4 次 ， 而 readystate 属性 的 值 也 不 总 是 连续 的 。 

对 于 document 而 言 ， 值 为 "interactive" 的 readysState 会 在 与 DOMContentLoaded 大 致 相 
同 的 时 刻 触 发 readystatechange 事件 。 此 时 ，DOM 树 已 经 加 载 完 毕 ， 可 以 安全 地 操作 它 了 ,因此 就 
会 进入 交互 ( interactive ) 阶段 。 但 与 此 同时 ， 图 像 及 其 他 外 部 文件 不 一 定 可 用 。 下 面 来 看 一 段 处 理 
readystatechange 事件 的 代码 。 





















































EventUtil.addHandler (document, "readystatechange", function(event)t{ 
if (document.readyState == "interactive")t 
alert ("Content loaded"); 








} 
})3 


这 个 事件 的 event 对 象 不 会 提供 任何 信息 ， 也 没有 目标 对 象 。 

在 与 10ad 事件 一 起 使 用 时 ， 无 法 预测 两 个 事件 触发 的 先后 顺序 。 在 包含 较 多 或 较 大 的 外 部 资源 的 
页 面 中 ,会 在 10ag 事件 触发 之 前 先进 入 交互 阶段 ; 而 在 包含 较 少 或 较 小 的 外 部 资源 的 页 面 中 ， 则 很 难 
说 readystatechange 事件 会 发 生 在 1oad 事件 前 面 。 

让 问题 变 得 更 复杂 的 是 ,交互 阶段 可 能 会 早 于 也 可 能 会 晚 于 完成 阶段 出 现 ,无 法 确保 顺序 。 在 包含 
较 多 外 部 资源 的 页 面 中 , 交互 阶段 更 有 可 能 早 于 完成 阶段 出 现 ; 而 在 页 面 中 包含 较 少 外 部 资源 的 情况 下 ， 
完成 阶段 先 于 交互 阶段 出 现 的 可 能 性 更 大 。 因 此 , 为 了 尽 可 能 抢 到 先 机 ， 有 必要 同时 检测 交互 和 完成 阶 
段 ， 如 下 面 的 例子 所 示 。 


EventUtil.addHandler (document, "readystatechange", functionl(event)t{ 

if (document.readyState == "interactive" || document.readyState == "complete")t{ 
EventUtil.removeHandler (document, "readystatechange", arguments.callee); 
alert ("Content loaded"); 




















了 
对 于 上 面 的 代码 来 说 , 当 readystatechange 事件 触发 时 , 会 检测 aocument .readyState 的 值 ， 


看 当前 是 否 已 经 进入 交互 阶段 或 完成 阶段 。 如 果 是 , 则 移 除 相 应 的 事件 处 理 程序 以 免 在 其 他 阶段 再 执行 。 
注意 ， 由 于 事件 处 理 程序 使 用 的 是 匿名 函数 ， 因此 这 里 使 用 了 arguments.callee 来 引用 该 函数 。 然 


























后 ， 会 显示 一 个 警告 框 ， 说 明 内 容 已 经 加 载 完毕 。 这 样 编写 代码 可 以 达到 与 使 用 DoMContentLoaded 
十 分 相近 的 效果 。 
支持 readystatechange 事件 的 浏览 器 有 了 、Firfox 4+ 和 Opera。 









虽然 使 用 readystatechange 可 以 十 分 近似 地 模拟 DOMContentLoaded 事件 ， 
但 它们 本 质 上 还 是 不 同 的 。 在 不 同 页 面 中 , 1oad 事件 与 readystatechange 事件 并 
不 能 保证 以 相同 的 顺序 触发 。 
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另外 ， <script> (在 IE 和 Opera 中 ) 和 <1link> ( 仅 正 中) 元素 也 会 触发 readystatechange 
和 人 件 ， 可 以 用 来 确定 外 部 的 JavaScript 和 CSS 文件 是 否 已 经 加 载 完 成 。 与 在 其 他 浏览 器 中 一 样 ， 除 非 把 
动态 创建 的 元 素 添 加 到 页 面 中 ， 否则 浏览 器 不 会 开始 下 载 外 部 资源 。 基 于 元 素 触 发 的 
readystatechange 事件 也 存在 同样 的 问题 ， 即 readystate 属性 无 论 等 于 "loaded" 还 是 
"complete" 都 可 以 表示 资源 已 经 可 用 ,有 时 候 ,readystate 会 停 在 "loaded" 阶 段 而 永远 不 会 “完成 ”; 
有 了 时候， 又 会 跳 过 "loagdea" 阶 段 而 直接 “完成 ”。 于 是 ,还 需要 像 对 待 document 一 样 采取 相同 的 编码 
方式 。 例 如 ， 下 面 展 示 了 一 段 加 载 外 部 JavaScript 文件 的 代码 。 


EventUtil.addHandler (window, "load", function()t{ 
Var Script = document.createElement ("script"); 




















山中 



































ll 

















EventUtil.addHandler (script, "readystatechange", function(event)t{ 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 


if (target.readyState == "loaded" [| target .readyState == "complete")t{ 
EventUtil.removeHandler (target, "readystatechange", arguments. callee); 
alert ("Script Loaded"); 
} 
}); 
script.src = "example.js"; 
document .body.appendChild(script); 


ReadyStateChangeEventExample01.htm 


这 个 例子 为 新 创建 的 <script> 节 点 指定 了 一 个 事件 处 理 程序 。 事 件 的 目标 是 该 节点 本 身 ， 因 此 当 
触发 readystatechange 事件 时 ， 要 检测 目标 的 readystate 属性 是 不 是 等 于 "loaded" 或 
"complete"。 如 果 进 入 了 其 中 任何 一 个 阶段 ， 则 移 除 事件 处 理 程序 ( 以 防止 被 执行 两 次 ), 并 显示 一 个 
和 警告 框 。 与 此 同时 ， 就 可 以 执行 已 经 加 载 完 毕 的 外 部 文件 中 的 函数 了 。 

同样 的 编码 方式 也 适用 于 通过 <1ink> 元 素 加 载 CSS 文件 的 情况 ， 如 下 面 的 例子 所 示 。 


EventUtil.addHandler (window, "load", function()t{ 
Var link = document.createElement ("link"); 
link.type = "text/css"; 
link.rel= "stylesheet"; 





















































EventUtil.addHandler (script, "readystatechange", function(event)t{ 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 
if (target.readyState == "loaded" [| target .readyState == "complete")t{ 
EventUtil.removeHandler (target, "readystatechange", arguments. callee); 
alert ("CSS Loaded"); 
}); 


link.href = "example.css"; 
document .getElementsByTagName ("head") [0] .appendChild(link); 


ReadyStateChangeEventExample02.htm 
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同样 ,最 重要 的 是 要 一 并 检 闹 

5. pageshow 和 pagehide 

Firefox 和 Opera 有 一 个 特性 ， 名 叫 “ 往 
用 浏览 锅 的 “后 退 ” 和 “前 进 ” 


按钮 时 加 快 
了 DOM 和 JavaScript 的 状态 ; 实际 上 是 类 


事件 





返 线 
页 1 














丰田 











页 面 都 保存 在 了 内 存 里 。 














爱 存 ”( back-forward cache， 
的 转换 速度 。 这 个 缓存 中 不 仅 保 存 着 页 玫 





| readystate 的 两 个 状态 ,并 在 调用 了 一 次 事件 处 理 程 序 后 就 将 其 移 除 。 


或 bfcache )， 可 以 在 用 户 使 
数据， 还 保存 


位 于 bfcache 中 ,那么 











如 果 页 面 

















再 次 打开 该 页 面 时 就 不 会 触发 1oad 事件 
也 不 应 该 会 导致 什么 问题 ,但 为 了 更 BB 象 地 说 明 

一 个 事件 就 是 pageshow， 这 个 事件 在 页 函 
载 的 页 面 中 ,pageshovw 会 在 1oad 事件 触发 后 创 
态 完 全 恢复 的 那 一 刻 触 发 。 另 外 要 注意 的 是 ， 虽 然 这 个 事件 的 
程序 添加 到 window。 来 看 下 面 的 例子 。 


(function()t 
Var showCount 


和 仿 
已 





























FI 
下 




















03 


EventUtil.addHandler (window, 
alert ("Load fired"); 


"load", function(){ 


了 





EventUtil.addHandler (window, 
showCount++; 
alert ("Show has been fired " 
}) 3 

让 


这 个 例子 使 用 了 私有 作用 域 ， 以 防止 变量 showcount 进入 全 局 作 月 


"pageshow"，fEunction(){ 


+ ShowCount + " 





showCount 的 值 为 0。 此 后 ， 每 当 触发 pageshovw 事件 ，showcount 的 值 就 会 递增 并 通过 警 
j 之 后 ,又 单 击 “后 退 ” 按 钮 返回 该 页 面 ， 
， 都 被 保存 在 了 内 存 中 ， 当 你 返回 这 个 页 
fF 了 浏览 器 的 “刷新 ” 按钮 ， 那 么 showcount 的 值 就 会 被 重 





出 来 。 如 果 你 在 离开 包含 以 上 代码 的 页 
每 次 递增 的 值 。 这 是 因为 该 变量 的 状态 ， 乃 至 整个 页 1 
面 时 ， 它 们 的 状态 得 到 了 恢复 。 如 果 你 单 
置 为 0， 因 为 页 面 已 经 完全 重新 加 载 了 。 

除了 通常 的 属性 之 外 ，pageshow 事件 的 event 对 象 还 包含 
如 果 页 面 被 保存 在 了 bfcache 中 ， 则 这 个 属性 的 值 为 true; 否则 ,这 
这 样 在 事件 处 理 程序 中 检测 这 个 属性 。 


(function()t 
Var showCount 














面 的 状态 


















































县 


0 


EventUtil.addHandler (window, "load", function(){ 
alert ("Load fired"); 

> 

EventUtil.addHandler (window, "pageshow", function()f{ 





showCount++; 
alert ("Show has been fired " + showCount + 


" times. Persisted? " + event.persisted); 
}) 
}) 
图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 


由 于 内 存 中 保存 了 整个 页 面 的 状态 ， 
bfcache 的 行为 ，Firefox 还 是 提供 了 一 些 新 
j 显 示 时 触发 ,无论 该 页 驮 
发 ; 而 对 于 bfeache 中 的 页 面 ，pageshow 
目标 是 socument ， 但 必须 将 其 


times. 





不 触发 1oaq 事件 
事件 。 

是否 来 自 bfcache。 在 重新 加 
会 在 页 面 状 
有 件 处 理 









































二 


日 域 。 当 页 面 首次 加 载 完 成 时 ， 
告 框 显示 
就 会 看 到 showCount 








日 





一 个 名 为 persisted 的 布尔 值 属性 。 
个 属性 的 值 为 falseo 可 以 像 下 面 








PageShowEventExample01.htm CE 
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通过 检测 persisted 属性 ,就 可 以 根据 页 面 在 bfeache 中 的 状态 来 确定 是 否 需要 采取 其 他 操作 。 

与 pageshow 事件 对 应 的 是 pagehide 事件 ， 该 事件 会 在 浏览 右 件 载 页 面 的 时 候 触发 ， 而 且 是 在 
unload 事件 之 前 触发 。 与 pageshow 事件 一 样 ，pagehiade 在 document 上 面 触发 ,但 其 事件 处 理 程 
序 必 须要 添加 到 window 对 象 这 个 事件 的 event 对 象 也 包含 persisted 属性 , 不 过 其 用 途 稍 有 不 同 。 
来 看 下 面 的 例子 。 

EventUtil.addHandler (window, "pagehide", function(event)t{ 


CY) alert ("Hiding. Persisted? " + event.persisted); 
人 


























PageShowEventExample01.htm 


有 时 候 , 可 能 需要 在 pagehiae 事件 触发 时 根据 persistea 的 值 采取 不 同 的 操作 。 对 于 pageshow 
事件 ， 如 果 页 面 是 从 bfcache 中 加 载 的 ， 那么 persisted 的 值 就 是 true; 对 于 pagehiae 事件 ， 如 果 
页 面 在 印 载 之 后 会 被 保存 在 bfcache 中 ,那么 persisted 的 值 也 会 被 设置 为 true。 因 此 ， 当 第 一 次 触 
发 pageshow 时 , persisted 的 值 一 定 是 false, 而 在 第 一 次 触发 pagehide 时 ,persisted 就 会 变 
成 true( 除非 页 面 不 会 被 保存 在 bfcache 中 )。 

支持 pageshow 和 pagenide 事件 的 浏览 涡 有 Firefox、Safari5+、Chrome 和 Opera。IE9 及 之 前 版 
本 不 支持 这 两 个 事件 。 












































指定 了 onunload 事件 处 理 程序 的 页 面 会 被 自动 排除 在 bfcache 之 外 ， 即 使 事件 
处 理 程序 是 空 的 。 原 因 在 于 ，onunload 最 常用 于 撤销 在 onload 中 所 执行 的 操作 ， 
而 跳 过 onload 后 再 次 显示 页 面 很 可 能 就 会 导致 页 面 不 正常 。 







6. hashchange 事件 

HTML5 新 增 了 hashchange 事件 , 以 便 在 URL 的 参数 列表 ( 及 URL 中 “#” 号 后 面 的 所 有 字符 串 ) 
发 生变 化 时 通知 开发 人 员 。 之 所 以 新 增 这 个 事件 ， 是 因为 在 Ajax 应 用 中 ， 开 发 人 员 经 常 要 利用 URL 参 
数列 表 来 保存 状态 或 导航 信息 。 

必须 要 把 hashchange 事件 处 理 程序 添加 给 window 对 象 ， 然 后 URL 参数 列表 只 要 变化 就 会 调用 
它 。 此 时 的 event 对 象 应 该 额外 包含 两 个 属性 : olaURL 和 newURL。 这 两 个 属性 分 别 保 存 着 参数 列表 
变化 前 后 的 完整 URL。 例如: 





























EventUtil.addHandler (window, "hashchange", function(event)t{ 
alert ("Old URL: " + event.oldURL + "\nNew URL: " + event .newURL ) ; 
过 


HashChangeEventExample01.htm 


支持 hashchange 事件 的 浏览 器 有 IE8+、Firefox 3.6+、Safari 5+、Chrome 和 Opera 10.6+。 在 这 些 
浏览 器 中 , 只 有 Firefox 6+、Chrome 和 Opera 支持 olaURL 和 newURL 属性 ,为 此 ,最 好 是 使 用 location 
对 象 来 确定 当前 的 参数 列表 。 

EventUtil.addHandler (window, "hashchange", function(event)t{ 


alert ("Current hash: " + location.hash); 


有 
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使 用 以 下 代码 可 以 检测 浏览 右 是 否 支 持 hashchange 事件 : 


var isSupported = ("onhashchange" in window); // 这 里 有 bug 


如 果 IE8 是 在 IE7 文档 模式 下 运行 ， 即 使 功能 无 效 它 也 会 返回 true。 为 解决 这 个 问题 ， 可 以 使 用 
以 下 这 个 更 稳妥 的 检测 方式 : 











var isSupported = ("onhashchange" in window) && (document.documentMode === 
undefined | | document .documentMode > 7); 
13.4.8 设备 事件 


智 色 


E 手 机 和 平板 电脑 的 普及 , 为 用 户 与 浏览 器 交互 引入 了 一 种 新 的 方式 , 而 一 类 新 事件 也 应 运 而 生 。 























设备 事件 ( device event ) 可 以 让 开发 人 员 确 定 用 户 在 怎样 使 用 设备 。W3C 从 2011 年 开始 着 手 制定 一 份 
关于 设备 事件 的 新 草案 ( http://dev.w3.org/geo/api/spec-source-orientation.html )， 以 涵盖 不 断 增 长 的 设备 
类 型 并 为 它们 定义 相关 的 事件 。 本 节 会 同时 讨论 这 份 草案 中 涉及 的 API 和 特定 于 浏览 器 开发 商 的 事件 。 


1. orientationchange 事件 








蕴 

















公司 为 移动 Safari 中 添加 了 orientationchange 事件 , 以 便 开发 人 员 能 够 确定 用 户 何 时 将 设 





备 由 横向 查看 模式 切换 为 纵向 查看 模式 。 移动 Safari 的 window.orientation 属性 中 可 能 包含 3 个 值 : 
0 表示 肖像 模式 ，90 表示 向 左旋 转 的 横向 模式 (“主屏 幕 ”按钮 在 右 侧 )，-90 表示 向 右 旋转 的 横向 模 


式 (“ 主 

















屏幕 ”按钮 在 左 侧 )。 相 关 文 档 中 还 提 到 一 个 值 ， 即 180 表示 iPhone 头 朝 下 ; 但 这 种 模式 至 今 





尚未 得 到 支持 。 图 13-10 展示 了 window .orientation 的 每 个 值 的 含义 。 











只 要 用 户 改 变 了 设备 的 查看 模式 ， 就 会 触发 orientationchange 事件 。 此 时 的 event 对 象 不 包 
含 任何 有 价值 的 信息 ， 因 为 唯一 相关 的 信息 可 以 通过 window.orientation 访问 到 。 下 面 是 使 用 这 个 


事件 的 典型 示例 。 


EventUtil.addHandler (window, "load", function(event)t 





























var div = document.getElementById("myDiv"); 
div.innerHTML = "Current orientation is " + window.orientation; 
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EventUtil.addHandler (window, "orientationchange", function(event)t{ 
div.innerHTML = "Current orientation is " + window.orientation; 
} 
下 


OrientationChangeEventExample01.htm 
在 这 个 例子 中 , 当 触发 1oad 事件 时 会 显示 最 初 的 方向 信息 。 然后 , 添加 了 处 理 orientationchange 


事件 的 处 理 程序 。 只 要 发 生 这 个 事件 ， 就 会 有 表示 新 方向 的 信息 更 新 页 面 中 的 消息 。 
所 有 iOS 设备 都 支持 orientationchange 事件 和 window.orientation 属性 。 


















































由 于 可 以 将 orientationchange 看 成 window 事件 ， 所 以 也 可 以 通过 指定 


<body> 元 素 的 onorientationchange 特性 来 指定 事件 处 理 程序 。 





2. Mozorientation 事件 

Firefox 3.6 为 检测 设备 的 方向 引入 了 一 个 名 为 Mozorientation 的 新 事件 。( 前 级 Moz 表示 这 是 特 
定 于 浏览 器 开发 商 的 事件 ， 不 是 标准 事件 。) 当 设 备 的 加 速 计 检测 到 设备 方向 改变 时 ， 就 会 触发 这 个 事 
件 。 但 这 个 事件 与 iOS 中 的 orientationchange 事件 不 同 , 该 事件 只 能 提供 一 个 平面 的 方向 变化 。 由 
于 Mozorientation 事件 是 在 wingow 对 象 上 触发 的 ， 所 以 可 以 使 用 以 下 代码 来 处 理 。 
































EventUtil.addHandler (window, "MozOrientation", functionl(event)t{ 
// 响 应 事件 

东沙 有 

此 时 的 event 对 象 包含 三 个 属性 : x、y 和 z。 这 几 个 属性 的 值 都 介 于 1 到 -1 之 间 ， 表 示 不 同 坐标 
轴 上 的 方向 。 在 静止 状态 下 , x 值 为 0, y 值 为 0,z 值 为 1 (表示 设备 处 于 竖 直 状态 )。 如 果 设 备 向 右倾 
斜 ，x 值 会 减 小 ; 反之 ， 向 左倾 斜 ，x 值 会 增 大 。 类 似 地 ， 如 果 设 备 向 远离 用 户 的 方向 倾斜 ，y 值 会 减 
小 ， 向 接近 用 户 的 方向 倾斜 ，y 值 会 增 大 。z 轴 检 测 垂直 加 速度 度 ，! 表示 静止 不 动 ， 在 设备 移动 时 值 
会 减 小 。( 失重 状态 下 值 为 0。) 以 下 是 输出 这 三 个 值 的 一 个 简单 的 例子 。 


























EventUtil.addHandler (window, "MozOrientation", functionl(event)t{ 
Var output = document .getElementById("output"); 
output.innerHTML = "X=" + event.x + ", Y=" + event.y + ", 2Z=" + event.z +"<br>"; 


Fs 





MozOrientationEventExample01.htm 





只 有 带 加 速 计 的 设备 才 支 持 Mozorientation 事件 ， 包括 Macbook、Lenovo Thinkpad、Windows 
Mobile 和 Android 设备 。 请 大 家 注意 ， 这 是 一 个 实验 性 API， 将 来 可 能 会 变 ( 可 能 会 被 其 他 事件 取代 )。 

3. deviceorientation 事件 

本 质 上 , DeviceOrientation Event 规范 定义 的 deviceorientation 事件 与 Mozorientation 事件 类 
似 。 它 也 是 在 加 速 计 检 测 到 设备 方向 变化 时 在 window 对 象 上 触发 ,而 且 具 有 与 Mozorientation 事件 
相同 的 支持 限制 。 不 过 ，qeviceorientation 事件 的 意图 是 告诉 开发 人 员 设 备 在 空间 中 朝向 哪儿 ， 而 
不 是 如 何 移动 。 
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看 上 时 ， 这 三 个 值 都 是 0。x 














设备 在 三 维 空间 中 是 靠 x、y 和 z 轴 来 定位 的 。 当 设备 静止 放 在 水 平 表 i 
轴 方 向 是 从 左 往 右 ,y 轴 方向 是 从 下 往 上 ，z 轴 方向 是 从 后 往 前 ( 参见 图 13-11 )。 
y 








图 13-11 
触发 seviceorientation 事件 时 ,事件 对 象 中 包含 着 每 个 轴 相 对 于 设备 静止 状态 下 发 9 


息 。 事 件 对 象 包含 以 下 5 个 属性 。 


变化 的 信 











口 alpha: 在 围绕 z 轴 旋转 时 ( 即 左 右 旋转 时 ), y 轴 的 度数 差 ; 是 一 个 介 于 0 到 360 之 间 的 浮 点 数 。 
口 beta: 在 围绕 x 轴 旋 转 时 ( 即 前 后 旋转 时 ), z 轴 的 度数 差 ; 是 一 个 介 于 -180 到 180 之 间 的 浮 点 数 。 
口 gamma: 在 围绕 y 轴 旋转 时 ( 即 扭转 设备 时 ), z 轴 的 度数 差 ; 是 一 个 介 于 -90 到 90 之 间 的 浮 点 数 。 
口 absolute: 布尔 值 ， 表 示 设 备 是 否 返 回 一 个 绝对 值 。 


口 compassCalibrated: 布尔 值 ， 表 示 设 备 的 指南 针 是 否 校 准 过 。 
图 13-12 是 alpha、beta 和 gamma 值 含义 的 示意 图 。 
下 面 是 一 个 输出 alpha、beta 和 gamma 值 的 例子 。 


"deviceorientation", 


ElementById("output"); 
", Beta=" + event.beta + 


























function(event)t 





EventUtil.addHandler (window, 
9 Var output = document .get] 
output.innerHTML = "Alpha=" + event.alpha + 

+ event.gamma + "<br>"; 





", Gamma=" 


}); 
DeviceOrientationEventExample01.htm 








通过 这 些 信息 ， 可 以 响应 设备 的 方向 ， 重 新 排列 或 修改 屏幕 上 的 元 素 。 要 响应 设备 方向 的 改变 而 旋 





转 元 素 ， 可 以 参考 如 下 代码 。 


"deviceorientation", function(event)t{ 


ElementById("arrow"); 
站 "deg) 有 党 


EventUtil.addHandler (window, 
"rotate(" + Math.round(event.alpha) 


Var arrow = document .get] 
arrow.style.webkitTransform = 


了 








DeviceOrientationEventExample01.htm 
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alpha 
yy A 
新 y 初始 y 
初始 z 
初始 x 
beta 新 z 
gamma 
新 z 
新 x 
初始 x 
图 13-12 











这 个 例子 只 能 在 移动 WebKit 浏览 器 中 运行 , 因为 它 使 用 了 专 有 的 webkitTransform 属 性 ( 即 CSS 
标准 属性 transform 的 临时 版 )。 元 素 “arrow” 会 随 着 event .alpha 值 的 变化 而 旋转 ， 给 人 一 种 指南 
针 的 感觉 。 为 了 保证 旋转 平滑 ， 这 里 的 CSS3 变换 使 用 了 舍 人 之 后 的 值 。 

到 2011 年 ， 支持 deviceorientation 事件 的 浏览 器 有 iOS 4.2+ 中 的 Safari 、Chrome 和 Android 版 
WebKit。 

4. devicemotion 事件 

DeviceOrientation Event 规范 还 定义 了 一 个 devicemotion 事件 。 这 个 事件 是 要 告诉 开发 人 员 设 备 
什么 时 候 移动 ， 而 不 仅仅 是 设备 方向 如 何 改变 。 例 如 , 通过 devicemotion 能 够 检测 到 设备 是 不 是 正在 
往 下 掉 ， 或 者 是 不 是 被 走 着 的 人 拿 在 手 里 。 
触发 sevicemotion 事件 时 ， 事 件 对 象 包含 以 下 属性 。 

口 acceleration: 一 个 包含 x、y 和 z 属性 的 对 象 ， 在 不 考虑 重力 的 情况 下 ， 告 诉 你 在 每 个 方向 

上 的 加 速度 。 

口 accelerationIncludingGravity: 一 个 包含 x、y 和 z 属性 的 对 象 ， 在 考虑 z 轴 自 然 重力 加 

速度 的 情况 下 ， 告 诉 你 在 每 个 方向 上 的 加 速度 。 

口 interval: 以 毫秒 表示 的 时 间 值 ， 必 须 在 男 一 个 aevicemotion 事件 触发 前 传人 。 这 个 值 在 每 
个 事件 中 应 该 是 一 个 常量 。 












































上 由 
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口 rotationRate: 一 个 包含 表示 方向 的 alpha、beta 和 gamma 属性 的 对 象 。 
如 果 读 取 不 到 acceleration、accelerationIncludingGravity 和 rotationRate 值 ， 则 它们 
的 值 为 null1。 因 此 ， 在 使 用 这 三 个 属性 之 前 ， 应 该 先 检测 确定 它们 的 值 不 是 nu11。 例 如 : 




















EventUtil.addHandler (window, "devicemotion", function(event)t 
Var output = document .getElementById("output"); 





if (event.rotationRate !== null)t{ 
output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" + 
event .rotationRate.beta + ", Gamma=" + 


event .rotationRate.gamma; 


DeviceMotionEventExample01.htm 





与 deviceorientation 事件 类 似 ， 只 有 iOS 4.2+ 中 的 Safari 、Chrome 和 Android 版 WebKit 实现 了 
devicemotion 事件 。 


13.4.9 触摸 与 手势 事件 


iOS 版 Safari 为 了 向 开发 人 员 传达 一 些 特殊 信息 ， 新 增 了 一 些 专 有 事件 。 因 为 iOS 设备 既 没有 鼠标 
也 没有 键盘 , 所 以 在 为 移动 Safari 开发 交互 性 网 页 时 , 常规 的 鼠标 和 键盘 事件 根本 不 够 用 。 随 着 Android 
中 的 WebKit 的 加 入 ,很 多 这 样 的 专 有 事件 变 成 了 事实 标准 ， 导 致 W3C 开始 制定 Touch Events 规范 ( 参 
见 https://dves.w3.org/hg/webevents/raw-file/tip/touchevents.html )。 以 下 介绍 的 事件 只 针对 触摸 设备 。 

1. 触摸 事件 

包含 iOS 2.0 软件 的 iPhone 3G 发 布 时 ， 也 包含 了 一 个 新 版 本 的 Safari 浏览 器 。 这 款 新 的 移动 Safari 
提供 了 一 些 与 触摸 (touch ) 操作 相关 的 新 事件 。 后 来 ，Android 上 的 浏览 器 也 实现 了 相同 的 事件 。 触 摸 
事件 会 在 用 户 手 指 放 在 屏幕 上 面 时 、 在 屏幕 上 滑动 时 或 从 屏幕 上 移 开 时 触发 。 具 体 来 说 ， 有 以 下 几 个 触 
摸 事 件 。 
口 touchstart: 当 手 指 触摸 屏幕 时 触发 ， 即 使 已 经 有 一 个 手指 放 在 了 屏幕 上 也 会 触发 。 
口 touchmove: 当 手 指 在 屏幕 上 滑动 时 连续 地 和 触发。 在 这 个 事件 发 生 期 间 ,调用 preventDefault () 
可 以 阻止 深 动 。 
口 touchend: 当 手 指 从 屏幕 上 移 开 时 触发 。 
口 touchcancel: 当 系 统 停止 跟踪 触摸 时 触发 。 关 于 此 事件 的 确切 触发 时 间 , 文档 中 没有 明确 说 明 。 
上 面 这 几 个 事件 都 会 冒 泡 ， 也 都 可 以 取消 。 虽 然 这 些 触 摸 事件 没有 在 DOM 规范 中 定义 ,但 它们 却 
是 以 兼容 DOM 的 方式 实现 的 。 因 此 ， 每 个 触摸 事件 的 event 对 象 都 提供 了 在 鼠标 事件 中 常见 的 属性 : 


bubbles cancelable、 view\、clLlientX、cl1ientY、 ScreenX、 screeny detail\altKey.\shiftKey.、 











































































































ctrlKey 和 metaKey。 
除了 常见 的 DOM 属性 外 ， 触 摸 事 件 还 包含 下 列 三 个 用 于 跟踪 触摸 的 属性 。 
口 touches: 表示 当前 跟踪 的 触摸 操作 的 Touch 对 象 的 数组 。 
口 targetTouchs: 特定 于 事件 目标 的 Touch 对 象 的 数组 。 
口 changeTouches: 表示 自 上 次 触摸 以 来 发 生 了 什么 改变 的 rouch 对 象 的 数组 。 
每 个 rouch 对 象 包含 下 列 属性 。 
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口 clientx: 触摸 目标 在 视 
口 clientY: 触摸 目标 在 视 
口 idqentifier: 标识 触摸 的 唯一 ID。 

口 pagex: 触摸 目标 在 页 面 中 的 x 坐标 。 

口 pageY: 触摸 目标 在 页 面 中 的 坐标 。 

口 screenx: 触摸 目标 在 屏幕 中 的 x 坐标。 
口 screenY: 触摸 目标 在 屏幕 中 的 y 坐标 。 
口 target: 触摸 的 DOM 节点 目标 。 











口中 的 x 坐标 。 
口中 的 了 坐标。 





使 用 这 些 属 性 可 以 跟踪 用 户 对 








function handleTouchEvent (event){ 


// 只 跟踪 一 次 触摸 
if (event.touc 


var output 


hes .length 


Switch (event .type){ 


Case 
ou 


"touchstart'" 
tput .innerHT 


break; 


Case 
OU 


"touchend": 





tput.innerHTML += 


break; 


Case 


ou 


"touchmove": 
event .preventDefault(); 





tput.innerHTML += 


break; 


} 


EventUtil.addHandler (document, 
EventUtil.addHandler (document, 
EventUtil.addHandler (document, 


这 些 事件 会 在 文档 的 所 有 元 素 上 面 触发 ,因而 可 以 分 别 操作 页 巴 
时 ,这 些 事件 ( 包括 鼠标 事件 ) 发 生 的 顺序 如 下 : 





出 信息 。 当 touchstart 事件 发 生 时 ,会 将 触摸 的 


= document .get 


){ 





ML = "Touch started 





event .changed!] 





event .changed!] 


// 阻 止 滚 动 


event .changed!] 





event.changedTouches[0]. 











(" 


" + event .touches [0] .clientyY + ")"; 


"<br>Touch ended 


"<br>Touch moved 


屏幕 的 触摸 操作 。 来 看 下 面 的 例子 。 


ElementById("output"); 


+ event.touches[0] .clientXx + 


人 十 
rouches [0] .clientX + 
rouches [0] .clientY + ") 

Co 事 
rouches [0] .clientX + 








"touchstart", handleTouchEvent); 
"touchend", handleTouchEvent); 
"touchmove", handleTouchEvent); 





clientyY + ")" 


TouchEventsExample01.htm 
以 上 代码 会 跟踪 屏幕 上 发 生 的 一 次 触摸 操作 。 为 简单 起 见 ， 只 会 在 有 一 次 活动 触摸 操作 的 情况 下 输 














j 的 不 同 部 分 。 在 触摸 





位 置信 息 输 出 到 <aiv> 元 素 中 。 当 touchmove 事件 
发 生 时 ， 会 取消 其 默认 行为 ， 阻 止 滚动 〈 触摸 移动 的 默认 行为 是 滚动 页 面 )， 然 后 输出 触摸 操作 的 变化 
信息 。 而 touchend 事件 则 会 输出 有 关 触 摸 操作 的 最 终 信 息 。 注 意 , 在 touchend 事件 发 生 时 , touc 
集合 中 就 没有 任何 Touch 对 象 了 , 因为 不 存在 活动 的 触摸 操作 ; 此 时 , 就 必须 转 而 使 用 changeTouchs 





Nes 





屏幕 上 的 元 素 
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(1) touchstart 

(2) mouseover 

(3) mousemove (一 次 ) 

(4) mousedown 

(5) mouseup 

(6) click 

(7) touchend 

支持 触摸 事件 的 浏览 器 包括 iOS 版 Safari、Android 版 WebKit bada 版 Dolfin、OS6+ 中 的 BlackBerry 
WebKit、Opera Mobile 10.1+ 和 LG 专 有 OS 中 的 Phantom 浏览 器 。 目前 只 有 iOS 版 Safari 支持 多 点 触摸 。 
桌面 版 Firefox 6+ 和 Chrome 也 支持 触摸 事件 。 

2. 手势 事件 

iOS 2.0 中 的 Safari 还 引入 了 一 组 手势 事件 。 当 两 个 手指 触摸 屏幕 时 就 会 产生 手势 , 手势 通常 会 改变 
显示 项 的 大 小 ， 或 者 旋转 显示 项 。 有 三 个 手势 事件 ， 分 别 介绍 如 下 。 

口 gesturestart: 当 一 个 手指 已 经 按 在 屏幕 上 而 另 一 个 手指 又 触摸 屏幕 时 触发 。 
口 gesturechange: 当 触摸 屏幕 的 任何 一 个 手指 的 位 置 发 生变 化 时 触发 。 
口 gestureend: 当 任 何 一 个 手指 从 屏幕 上 面 移 开 时 触发 。 

只 有 两 个 手指 都 触摸 到 事件 的 接收 容器 时 才 会 触发 这 些 事件 。 在 一 个 元 素 上 设置 事件 处 理 程序 ， 意 
味 着 两 个 手指 必须 同时 位 于 该 元 素 的 范围 之 内 ， 才 能 触发 手势 事件 〈 这 个 元 素 就 是 目标 )。 由 于 这 些 事 
件 冒 泡 ， 所 以 将 事件 处 理 程序 放 在 文档 上 也 可 以 处 理 所 有 手势 事件 。 此 时 , 事件 的 目标 就 是 两 个 手指 都 
位 于 其 范围 内 的 那个 元 素 。 

触摸 事件 和 手势 事件 之 间 存 在 某 种 关系 。 当 一 个 手指 放 在 屏幕 上 时 , 会 触发 touchstart 事件 。 如 
果 另 一 个 手指 又 放 在 了 屏幕 上 , 则 会 先 触发 gesturestart 事件 , 随后 触发 基于 该 手指 的 touchstart 
事件 。 如 果 一 个 或 两 个 手指 在 屏幕 上 滑动 ， 将 会 触发 gesturechange 事件 。 但 只 要 有 一 个 手指 移 开 ， 
就 会 触发 gestureend 事件 ， 紧 接着 又 会 触发 基于 该 手指 的 touchend 事件 。 

与 触摸 事件 一 样 ， 每 个 手势 事件 的 event 对 象 都 包含 着 标准 的 鼠标 事件 属性 : bubbles 、 
cancelable、 view、 clientX、 clientY、 screenX、 screenY、 detail, altKey、 shiftKey.、 
ctrlKey 和 metaKey。 此 外 ,还 包含 两 个 额外 的 属性 : rotation 和 scale。 其 中 ,rotation 属性 表 
示 手 指 变化 引起 的 旋转 角度 ， 负 值 表 示 逆 时 针 旋转 ， 正 值 表 示 顺 时 针 旋转 〈 该 值 从 0 开始 )。 而 scale 
属性 表示 两 个 手指 间距 离 的 变化 情况 〈 例如 向 内 收缩 会 缩短 距离 )， 这 个 值 从 1 开始 ， 并 随 距 离 拉 大 而 
增长 ， 随 距离 缩短 而 减 小 。 

下 面 是 使 用 手势 事件 的 一 个 示例 。 

function handleGestureEvent (event){ 

Var output = document .getElementById("output"); 
switch(event.type)t 
case "gesturestart": 


output.innerHTML = "Gesture started (rotation=" + event.rotation + 
",Scale=" + event.scale + ")"; 





























芋 























































































































break; 
case "gestureend": 

output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation + 
"Scale=" + event.scale + ")"; 





break; 
case "gesturechange": 
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output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation + 
",scale=" + event.scale + ")"; 
break; 


} 
document .addEventListener("gesturestart", handleGestureEvent, false); 


document .addEventListener ("gestureend", handleGestureEvent, false); 
document .addEventListener ("gesturechange", handleGestureEvent, false); 














GestureEventsExample01.htm 


与 前 面 演 示 触 摸 事件 的 例子 一 样 ， 这 里 的 代码 只 是 将 每 个 事件 都 关联 到 同一 个 函数 中 , 然后 通过 该 
函数 输出 每 个 事件 的 相关 信息 。 














触摸 事件 也 会 返回 rotation 和 scale 属性 ， 但 这 两 个 属性 只 会 在 两 个 手指 与 
屏幕 保持 接触 时 才 会 发 生变 化 。 一 般 来 说 ， 使 用 基于 两 个 手指 的 手势 事件 ， 要 比 管理 
触摸 事件 中 的 所 有 交互 要 容易 得 多 。 


13.5 “内存 和 性 能 


由 于 事件 处 理 程序 可 以 为 现代 Web 应 用 程序 提供 交互 能 力 ， 因 此 许多 开发 人 员 会 不 分 青红皂白 地 
向 页 面 中 添加 大 量 的 处 理 程序 。 在 创建 GUI 的 语言 (如 C# ) 中 , 为 GUI 中 的 每 个 按钮 添加 一 个 onclick 
事件 处 理 程序 是 司空 见 惯 的 事 ， 而 且 这 样 做 也 不 会 导致 什么 问题 。 可 是 在 JavaScript 中 ， 添 加 到 页 面 上 
的 事件 处 理 程序 数量 将 直接 关系 到 页 面 的 整体 运行 性 能 。 导 致 这 一 问题 的 原因 是 多 方面 的 。 首 先 ， 每 个 
函数 都 是 对 象 ， 都 会 占用 内 存 ; 内 存 中 的 对 象 越 多 ,性 能 就 越 差 。 其次， 必须 事先 指定 所 有 事件 处 理 程 
序 而 导致 的 DOM 访问 次 数 ， 会 延迟 整个 页 面 的 交互 就 绪 时 间 。 事 实 上 ， 从 如 何 利 用 好 事件 处 理 程 序 的 
角度 出 发 ， 还 是 有 一 些 方法 能 够 提升 性 能 的 。 


13.5.1 事件 委托 


对 “事件 处 理 程序 过 多 ”问题 的 解决 方案 就 是 事件 委托 。 事 件 委托 利用 了 事件 冒 泡 ， 只 指定 一 个 寻 
件 处 理 程序 ， 就 可 以 管理 某 一 类 型 的 所 有 事件 。 例 如 ，click 事件 会 一 直 冒 泡 到 document 层次 。 也 就 
是 说 ， 我 们 可 以 为 整个 页 面 指定 一 个 onclick 事件 处 理 程序 ， 而 不 必 给 每 个 可 单 击 的 元 素 分 别 添加 事 
件 处 理 程序 。 以 下 面 的 HTML 代码 为 例 。 





















































HH 


























<ul id="myLinks"> 
C9 <li id="goSomewhere">Go somewhere</1i> 
<11 id="doSomething">Do something</1i> 
<li id="sayHi">Say hi</1i> 
</ul> 


EventDelegationExample01.htm 


其 中 包含 3 个 被 单 击 后 会 执行 操作 的 列表 项 。 按 照 传统 的 做 法 ， 需 要 像 下 面 这 样 为 它们 添加 3 个 事 
件 处 理 程序 。 
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Var iteml 
Var item2 
var item3 


document .getElementBylId("goSomewhere"); 
document .getElementById("doSomething"); 
document .getElementById("sayHi"); 








EventUtil.addHandler (iteml, "click", function(event)t 
location.href = "http://www.wrox.com"; 


}); 





EventUtil.addHandler (item2, "click", function(event)t 
document.title = "I changed the document's title"; 


})3 








EventUtil.addHandler (item3, "click", function(event)t 

alert ("hi"); 

})3 

如 果 在 一 个 复杂 的 Web 应 用 程序 中 ， 对 所 有 可 单 击 的 元 素 都 采用 这 种 方式 ， 那 么 结果 就 会 有 数 不 
清 的 代码 用 于 添加 事件 处 理 程序 。 此 时 ， 可 以 利用 事件 委托 技术 解决 这 个 问题 。 使 用 事件 委托 ， 只 需 在 
DOM 树 中 尽量 最 高 的 层次 上 添加 一 个 事件 处 理 程序 ， 如 下 面 的 例子 所 示 。 


人 var list = dqocument .getElementById("myLinks" ) ; 


























EventUtil.addHandler (list, "click", function(event)t 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 











switch(target.id)t 
case "doSomething": 
document.title = "I changed the document's title"; 
break; 


Case "goSomewhere": 
location.href = "http://www.wrox.com"; 
break; 


case "sayHi": 
alert ("hi"):; 
break; 


EventDelegationExample01.htm 


在 这 段 代 码 里 ,我 们 使 用 事件 委托 只 为 <u1> 元 素 添加 了 一 个 onclick 事件 处 理 程序 。 由 于 所 有 列 
表 项 都 是 这 个 元 素 的 子 节点 , 而 且 它 们 的 事件 会 冒 泡 , 所 以 单 击 事件 最 终 会 被 这 个 函数 处 理 。 我 们 知道 ， 
事件 目标 是 被 单 击 的 列表 项 ， 故 而 可 以 通过 检测 id 属性 来 决定 采取 适当 的 操作 。 与 前 面 未 使 用 事件 委 
托 的 代码 比 一 比 ， 会 发 现 这 段 代码 的 事前 消耗 更 低 ， 因 为 只 取得 了 一 个 DOM 元 素 ， 只 添加 了 一 个 事件 
处 理 程序 。 虽然 对 用 户 来 说 最 终 的 结果 相同 , 但 这 种 技术 需要 占用 的 内 存 更 少 。 所 有 用 到 按钮 的 事件 (多 
数 鼠 标 事件 和 键盘 事件 ) 都 适合 采用 事件 委托 技术 。 
如 果 可 行 的 话 , 也 可 以 考虑 为 document 对 象 添 加 一 个 事件 处 理 程序 , 用 以 处 理 页 面 上 发 生 的 某 种 13 





























特定 类 型 的 事件 。 这 样 做 与 采取 传统 的 做 法 相 比 具 有 如 下 优点 。 
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口 document 对 象 很 快 就 可 以 访问 ,而 且 可 以 在 页 面 生 命 周 期 的 任何 时 点 上 为 它 添加 事件 处 理 程序 
(无 需 等 待 DoMContentLoaded 或 10ad 事件 )。 换 名 话说 ， 只 要 可 单 击 的 元 素 呈 现在 页 面 上 ， 

就 可 以 立即 具备 适当 的 功能 。 
口 在 页 面 中 设置 事件 处 理 程序 所 需 的 时 间 更 少 。 只 添加 一 个 事件 处 理 程序 所 需 的 DOM 引用 更 少 ， 
所 花 的 时 间 也 更 少 。 
口 整个 页 面 占用 的 内 存 空间 更 少 ， 能 够 提升 整体 性 能 。 

最 适合 采用 事件 委托 技术 的 事件 包括 click、mousedown .mouseup kevdown .keyup 和 keypress。 
虽然 mouseover 和 mouseout 事件 也 冒 泡 , 但 要 适当 处 理 它们 并 不 容易 ,而 且 经 常 需要 计算 元 素 的 位 置 。 
(因为 当 鼠 标 从 一 个 元 素 移 到 其 子 节点 时 ， 或 者 当 鼠 标 移 出 该 元 素 时 ， 都 会 触发 mouseout 事件 。) 


13.5.2 ” 移 除 事件 处 理 程 序 


每 当 将 事件 处 理 程序 指定 给 元 素 时 ， 运 行 中 的 浏览 器 代码 与 支持 页 面 交 互 的 JavaScript 代码 之 间 就 
会 建立 一 个 连接 。 这 种 连接 越 多 ， 页 面 执行 起 来 就 越 慢 。 如 前 所 述 ， 可 以 采用 事件 委托 技术 ， 限 制 建立 
的 连接 数量 。 另 外 ,在 不 需要 的 时 候 移 除 事件 处 理 程 序 ， 也 是 解决 这 个 问题 的 一 种 方案 。 内 存 中 留 有 那 
些 过 时 不 用 的 “ 空 事 件 处 理 程序 ”( dangling event handler )， 也 是 造成 Web 应 用 程序 内 存 与 性 能 问题 的 

在 两 种 情况 下 ， 可 能 会 造成 上 述 问题 。 第 一 种 情况 就 是 从 文档 中 移 除 带 有 事件 处 理 程序 的 元 素 时 。 
这 可 能 是 通过 纯粹 的 DOM 操作 ， 例 如 使 用 removechild() 和 replacechild() 方 法 , 但 更 多 地 是 发 
生 在 使 用 innerHTML 替换 页 面 中 某 一 部 分 的 时 候 。 如 果 带 有 事件 处 理 程序 的 元 素 被 innerHTML 删除 
了 ， 那 么 原来 添加 到 元 素 中 的 事件 处 理 程序 极 有 可 能 无 法 被 当 作 垃圾 回收 。 来 看 下 面 的 例子 。 

<div id="myDiv"> 

<input type="button" value="Click Me" id="myBtn"> 
</div> 
<script type="text/javascript"> 


Var btn = document .getElementById("myBtn"); 
btn.onclick = function(){ 


















































































































































// 先 执行 某 些 操作 


document .getElementById("myDiv") .innerHTML = "Processing..."; // 麻 烦 了 | 
}; 
</SCriBt> 
这 里 ， 有 一 个 按钮 被 包含 在 <daiv> 元 素 中 。 为 避免 双击 ， 单 击 这 个 按钮 时 就 将 按钮 移 除 并 替换 成 一 
条 消息 ; 这 是 网 站 设计 中 非常 流行 的 一 种 做 法 。 但 问题 在 于 ， 当 按钮 被 从 页 面 中 移 除 时 ， 它 还 带 着 一 个 
事件 处 理 程序 呢 。 在 <aiv> 元 素 上 设置 innerHTML 可 以 把 按钮 移 走 ， 但 事件 处 理 程序 仍然 与 按钮 保持 
着 引用 关系 。 有 的 浏览 器 (尤其 是 正 ) 在 这 种 情况 下 不 会 作出 恰当 地 处 理 , 它们 很 有 可 能 会 将 对 元 素 和 
对 事件 处 理 程序 的 引用 都 保存 在 内 存 中 。 如 果 你 知道 某 个 元 素 即 将 被 移 除 , 那么 最 好 手工 移 除 事件 处 理 
程序 ， 如 下 面 的 例子 所 示 。 
<div id="myDiv"> 
<input type="button" value="Click Me" id="myBtn"> 
</div> 


<script type="text/javascript"> 
Var btn = document .getElementByIid ("myBtn"); 
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btn.onclick = function(){ 
// 先 执行 某 些 操作 


btn.onclick = null; // 移 除 事件 处 理 程序 





document .getElementById("myDiv").innerHTML = "Processing..."; 
上 
</script> 
在 此 ， 我 们 在 设置 <aiv> 的 innerHTML 属性 之 前 ， 先 移 除了 按钮 的 事件 处 理 程序 。 这 样 就 确保 了 
内 存 可 以 被 再 次 利用 ， 而 从 DOM 中 移 除 按钮 也 做 到 了 干净 利索 。 

















注意 ， 在 事件 处 理 程序 中 删除 按钮 也 能 阻止 事件 置 泡 。 目 标 元 素 在 文档 中 是 事件 冒 泡 的 前 提 。 








采用 事件 委托 也 有 助 于 解决 这 个 问题 ,如 果 事 先知 道 将 来 有 可 能 使 用 innerHTML 
替换 掉 页 面 中 的 某 一 部 分 ， 那 么 就 可 以 不 直接 把 事件 处 理 程序 添加 到 该 部 分 的 元 素 
中 。 而 通过 把 事件 处 理 程序 指定 给 较 高 层次 的 元 素 ， 同 样 能 够 处 理 该 区 域 中 的 事件 。 







导致 “ 空 事件 处 理 程序 ”的 男 一 种 情况 ， 就 是 缉 载 页 面 的 时 候 。 毫 不 奇怪 ，IE8 及 更 早 版 本 在 这 种 
情况 下 依然 是 问题 最 多 的 浏览 器 ,尽管 其 他 浏览 器 或 多 或 少 也 有 类 似 的 问题 。 如 果 在 页 面 被 逢 载 之 前 没 
有 清理 干净 事件 处 理 程 序 , 那 它们 就 会 滞留 在 内 存 中 。 每 次 加 载 完 页 面 再 伙 载 页 面 时 (可 能 是 在 两 个 页 
面 间 来 回 切换 ， 也 可 以 是 单 击 了 “刷新 ”按钮 )， 内 存 中 滞留 的 对 象 数目 就 会 增加 ， 因 为 事件 处 理 程序 
占用 的 内 存 并 没有 被 释放 。 

一 般 来 说 , 最 好 的 做 法 是 在 页 面 全 载 之 前 , 先 通 过 onunload 事件 处 理 程 序 移 除 所 有 事件 处 理 程序 。 
在 此 ， 事 件 委托 技术 再 次 表现 出 它 的 优势 一 一 需要 跟踪 的 事件 处 理 程序 越 少 ， 移 除 它 们 就 越 容易 。 对 这 
种 类 似 撤销 的 操作 ,我 们 可 以 把 它 想象 成 : 只 要 是 通过 onload 事件 处 理 程序 添加 的 东西 ， 最 后 都 要 通 
过 onunload 事件 处 理 程序 将 它们 移 除 。 





















































不 要 忘 了 ， 使 用 onunload 事件 处 理 程序 意味 着 页 面 不 会 被 缓存 在 bfcache 中 。 


如 果 你 在 意 这 个 问题 ， 那 么 就 只 能 在 下 中 通过 onunload 来 移 除 事 件 处 理 程序 了 。 





13.6 ”模拟 事件 


和 件 ， 就 是 网 页 中 某 个 特别 值得 关注 的 瞬间 。 事 件 经 常 由 用 户 操 作 或 通过 其 他 浏览 器 功能 来 触发 。 

但 很 少 有 人 知道 ， 也 可 以 使 用 JavaScript 在 任意 时 刻 来 触发 特定 的 事件 ， 而 此 时 的 事件 就 如 同 浏 览 器 创 
建 的 事件 一 样 。 也 就 是 说 ,这 些 事 件 该 冒 泡 还 会 冒 泡 ， 而且 照样 能 够 导致 浏览 器 执行 已 经 指定 的 处 理 它 
们 的 事件 处 理 程序 。 在 测试 Web 应 用 程序 ， 模 拟 触发 事件 是 一 种 极其 有 用 的 技术 。DOM2 级 规范 为 此 
规定 了 模拟 特定 事件 的 方式 , IE9、Opera、Firefox、Chrome 和 Safari 都 支持 这 种 方式 。IE 有 它 自己 模拟 
事件 的 方式 。 


13.6.1 DOM 中 的 事件 模拟 


可 以 在 aocument 对 象 上 使 用 createEvent () 方 法 创建 event 对 象 。 这 个 方法 接收 一 个 参数 , 即 
表示 要 创建 的 事件 类 型 的 字符 串 。 在 DOM2 级 中 ， 所 有 这 些 字符 串 都 使 用 英文 复数 形式 ， 而 在 DOM3 
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级 中 都 变 成 了 单数 。 这 个 字符 串 可 以 是 下 列 几 字 符 串 之 一 。 

口 UIEvents: 一 般 化 的 UI 事件 ,鼠标 事件 和 键盘 事件 都 继承 自 UI 事件 -DOM3 级 中 是 UIEvent。 

口 MouseEvents: 一 般 化 的 鼠标 事件 。DOM3 级 中 是 MouseEvent。 

口 MutationEvents: 一 般 化 的 DOM 变动 事件 。DOM3 级 中 是 MutationEvent。 

口 HTMLEvents: 一 般 化 的 HTML 事件 。 没 有 对 应 的 DOM3 级 事件 (HTML 事件 被 分 散 到 其 他 类 
别 中 )。 

要 注意 的 是 ,“DOM2 级 事件 ”并 没有 专门 规定 键盘 事件 ， 后 来 的 “DOM3 级 事件 ”中 才 正 式 将 其 
作为 一 种 事件 给 出 规定 。IE9 是 目前 唯一 支持 DOM3 级 键盘 事件 的 浏览 器 。 不 过 ,在 其 他 浏览 占 中 , 在 
现 有 方法 的 基础 上 ， 可 以 通过 几 种 方式 来 模拟 键盘 事件 。 

在 创建 了 event 对 象 之 后 ， 还 需要 使 用 与 事件 有 关 的 信息 对 其 进行 初始 化 。 每 种 类 型 的 event 对 
象 都 有 一 个 特殊 的 方法 ， 为 它 传人 适当 的 数据 就 可 以 初始 化 该 event 对 象 。 不 同类 型 的 这 个 方法 的 名 
字 也 不 相同 ， 具 体 要 取决 于 createEvent () 中 使 用 的 参数 。 

模拟 事件 的 最 后 一 步 就 是 触发 事件 。 这 一 步 需 要 使 用 dispatchEvent() 方 法 ， 所 有 支持 事件 的 
DOM 节点 都 支持 这 个 方法 。 调 用 aispatchEvent () 方 法 时 ， 需 要 传人 一 个 参数 ， 即 表示 要 触发 事件 
的 event 对 象 。 触 发 事件 之 后 ， 该 事件 就 跻身 “官方 事件 ”之 列 了 ， 因 而 能 够 照样 冒 泡 并 引发 相应 事 
件 处 理 程序 的 执行 。 

1. 模拟 鼠标 事件 

创建 新 的 鼠标 事件 对 象 并 为 其 指定 必要 的 信息 ,就 可 以 模拟 鼠标 事件 。 创建 鼠标 事件 对 象 的 方法 是 
为 createEvent () 传人 字符 串 "MouseEvents"。 返 回 的 对 象 有 一 个 名 为 initMouseEvent () 方 法 ， 
用 于 指定 与 该 鼠标 事件 有 关 的 信息 。 这 个 方法 接收 15 个 参数 ， 分 别 与 鼠标 事件 中 每 个 典型 的 属性 一 一 
对 应 ; 这 些 参 数 的 含义 如 下 。 

口 type (字符 串 ): 表示 要 触发 的 事件 类 型 ， 例 如 "click"。 
口 pubbles ( 布尔 值 ): 表示 事件 是 否 应 该 冒 泡 。 为 精确 地 模拟 鼠标 事件 ， 应 该 把 这 个 参数 设置 为 


















































































































































trueo 
D cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 为 精确 地 模拟 鼠标 事件 ， 应 该 把 这 个 参数 设 
置 为 true。 





口 view( AbstractView ): 与 事件 关联 的 视图 。 这 个 参数 几乎 总 是 要 设置 为 document .defaultView。 
口 aetail( 整 数 ): 与 事件 有 关 的 详细 信息 。 这 个 值 一 般 只 有 事件 处 理 程序 使 用 , 但 通常 都 设置 为 0。 
口 screenX (整数 ): 事件 相对 于 屏幕 的 XX 坐标。 

口 screenY (整数 ): 事件 相对 于 屏幕 的 Y 坐标。 

口 clientx (整数 ): 事件 相对 于 视 口 的 XX 坐标 。 

口 clientY (整数 ): 事件 想 对 于 视 口 的 Y 坐标 。 

口 ctrlKey (布尔 值 ): 表示 是 否 按 下 了 Ctrl 键 。 默 认 值 为 false。 

口 altKey ( 布尔 值 ): 表示 是 否 按 下 了 Alt 键 。 默 认 值 为 false。 

口 shiftKey (布尔 值 ) 表示 是 否 按 下 了 Shifi 键 。 默 认 值 为 false。 

口 metaKey ( 布尔 值 ) 表示 是 否 按 下 了 Meta 键 。 默 认 值 为 false。 

口 button ( 整数 ): 表示 按 下 了 哪 一 个 鼠标 键 。 默 认 值 为 0。 

口 relatedTarget (对 象 ): 表示 与 事件 相关 的 对 象 。 这 个 参数 只 在 模拟 mouseover 或 mouseout 
时 使 用 。 
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显而易见 ，initMouseEvent () 方 法 的 这 些 参数 是 与 鼠标 事件 的 event 对 象 所 包含 的 属性 一 一 对 
应 的 。 其 中 ,前 4 个 参数 对 正确 地 激发 事件 至 关 重 要 ， 因 为 浏览 需要 用 到 这 些 参数 ; 而 剩 下 的 所 有 参数 
只 有 在 事件 处 理 程序 中 才 会 用 到 。 当 把 event 对 象 传 给 dispatchEvent () 方 法 时 ,这 个 对 象 的 target 
属性 会 自动 设置 。 下 面 ， 我 们 就 通过 一 个 例子 来 了 解 如 何 模拟 对 按钮 的 单 击 事件 。 


Var btn = document .getElementById("myBtn"); 














/ /创建 事件 对 象 


Var event = document.createEvent ("MouseEvents"); 








/ /初始化 事件 对 象 
event.initMouseEvent ("click", true, true, document.defaultView, 0, 0, 0, 0, 0, 
false, false, false, false, 0, null); 





// 触 发 事件 


btn.dispatchEvent (event); 





SimulateDOMClickExample01.htm 


在 兼容 DOM 的 浏览 器 中 ， 也 可 以 通过 相同 的 方式 来 模拟 其 他 鼠标 事件 (例如 ablclick )。 

2. 模拟 键盘 事件 

前 面 曾经 提 到 过 ,“DOM2 级 事件 ”中 没有 就 键盘 事件 作出 规定 ， 因 此 模拟 键盘 事件 并 没有 现成 的 
思路 可 循 。 "DOM2 级 事件 ”的 草案 中 本 来 包含 了 键盘 事件 ， 但 在 定稿 之 前 又 被 删除 了 ; Firefox 根据 其 
草案 实现 了 键盘 事件 。 需 要 提请 大 家 注意 的 是 ,“DOM3 级 事件 ”中 的 键盘 事件 与 曾 包 含 在 “DOM2 级 
事件 ”草案 中 的 键盘 事件 有 很 大 区 别 。 

DOM3 级 规定 , 调用 createEvent () 并 传人 "KeyboardEvent" 就 可 以 创建 一 个 键盘 事件 。 返回 的 
事件 对 象 会 包含 一 个 initKeyEvent () 方 法 ， 这 个 方法 接收 下 列 参数 。 
口 type (字符 串 ): 表示 要 触发 的 事件 类 型 ， 如 "keydown"。 
口 bubbles (布尔 值 ); 表示 事件 是 否 应 该 冒 泡 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 
口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 
口 view ( AbstractView ): 与 事件 关联 的 视图 。 这 个 参数 几乎 总 是 要 设置 为 document. 
defaultView。 
口 key (布尔 值 ): 表示 按 下 的 键 的 键 码 。 
口 location (整数 ): 表示 按 下 了 哪里 的 键 。0 表示 默认 的 主键 盘 ，1 表示 左 ，2 表示 右 ，3 表示 
数字 键盘 ，4 表示 移动 设备 ( 即 虚拟 键盘 )，5 表示 手柄 。 
口 modifiers (字符 串 ): 空格 分 隔 的 修改 键 列表 ， 如 "shift"。 
口 repeat (整数 ): 在 一 行 中 按 了 这 个 键 多 少 次 。 
1 于 DOM3 级 不 提倡 使 用 keypress 事件 ,因此 只 能 利用 这 种 技术 来 模拟 keydown 和 keyup 事件 。 































































































Var textbox = document .getElementById ("myTextlpox'" ) ， 
event; 


// 以 DOM3 级 方式 创建 事件 对 象 
if (document.implementation.hasFeature("KeyboardEvents", "3.0")){ 
event = document.createEvent ("KeyboardEvent"); 











/ /初始化 事件 对 象 


event.initKeyboardEvent ("keydown", true, true, document.defaultView, "a", 
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0, “Shift", 0)s 
} 


// 触 发 事件 


textbox.dispatchEvent (event); 


SimulateDOMKeyEventExample01.htm 





这 个 例子 模拟 的 是 按 住 Shift 的 同时 又 按 下 A 键 。 在 使 用 document .createEvent 
("KeyboardEvent") 之 前 ,应 该 先 检 测 浏览 器 是 否 支 持 DOM3 级 事件 ; 其 他 浏览 器 返回 一 个 非 标准 的 
KeyboardEvent 对 象 。 

在 Firefox 中 ,调用 createEvent () 并 传人 "KeyEvents" 就 可 以 创建 一 个 键盘 事件 。 返 回 的 事件 
对 象 会 包含 一 个 initKeyEvent () 方 法 ， 这 个 方法 接受 下 列 10 个 参数 。 

口 type (字符 串 ): 表示 要 触发 的 事件 类 型 ， 如 "keydown"。 

口 bubbles (布尔 值 ) 表示 事件 是 否 应 该 冒 泡 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 

口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 

口 view( AbstractView ): 与 事件 关联 的 视图 。 这 个 参数 几乎 总 是 要 设置 为 document .default- 
Viewo 

口 ctrlKey (布尔 值 ) 表示 是 否 按 下 了 Ctrl 键 。 默 认 值 为 false。 

口 altKey ( 布尔 值 ): 表示 是 否 按 下 了 Alt 键 。 默 认 值 为 false。 

口 shiftKey (布尔 值 ) 表示 是 否 按 下 了 Shift 键 。 默 认 值 为 false。 

口 metaKey (布尔 值 ) 表示 是 否 按 下 了 Meta 键 。 默 认 值 为 false。 

口 keycode (整数 ): 被 按 下 或 释放 的 键 的 键 码 。 这 个 参数 对 keydown 和 keyup 事件 有 用 ， 默 认 










































































值 为 0。 

口 charcode (整数 ): 通过 按键 生成 的 字符 的 ASCII 编码 。 这 个 参数 对 keypress 事件 有 用 ， 默 
认 值 为 0。 

将 创建 的 event 对 象 传人 到 aispatchEvent () 方 法 就 可 以 触发 键盘 事件 ， 如 下 面 的 例子 所 示 。 


// 只 适用 于 了 Firefox 
Var textbox = document .getElementById("myTextbox") 


/ /创建 事 件 对 象 


var event = document .createEvent ("KeyEvents"); 





1/ 初始 化 事件 对 象 
event .initKeyEvent ("keypress", true, true, document .defaultView, false, false, 
false, false, 65, 65); 


// 触 发 事件 


textbox.dispatchEvent (event); 
SimulateF F KeyEventExample01.htm 


在 Firefox 中 运行 上 面 的 代码 ， 会 在 指定 的 文本 框 中 输入 字母 A。 同 样 ， 也 可 以 依 此 模拟 keyup 和 
keydown 事件 。 

在 其 他 浏览 器 中 ， 则 需要 创建 一 个 通用 的 事件 ， 然 后 再 向 事件 对 象 中 添加 键盘 事件 特有 的 信息 。 
例如 : 
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Var textbox = document .getElementById("myTextbox"); 


/ /创建 事件 对 象 


Var event = document .createEvent ("Events"); 


1/ 初始 化 事件 对 象 

event.initEvent (type, bubbles, cancelable); 
event .view = document .defaultView; 

event .altKey = false; 

event .ctrlKey = false; 

event.shiftKey = false; 

event .metaKey = false; 

event .keyCode = 65; 

event .charCode = 65; 


/ /触发 事件 

textbox.dispatchEvent (event); 

以 上 代码 首先 创建 了 一 个 通用 事件 ， 然 后 调用 initEvent () 对 其 进行 初始 化 ， 最 后 又 为 其 添加 了 
键盘 事件 的 具体 信息 。 在 此 必须 要 使 用 通用 事件 ， 而 不 能 使 用 UI 事件， 因为 UI 事件 不 允许 向 event 
对 象 中 再 添加 新 属性 ( Safari 除外 )。 像 这 样 模拟 事件 虽然 会 触发 键盘 事件 , 但 却 不 会 向 文本 框 中 写 入 文 
本 ， 这 是 由 于 无 法 精确 模拟 键盘 事件 所 造成 的 。 

3. 模拟 其 他 事件 
虽然 鼠标 事件 和 键盘 事件 是 在 浏览 器 中 最 经 常 模拟 的 事件 ， 但 有 时 候 同 样 需要 模拟 变动 事件 和 
HTML 事件 。 要 模拟 变动 事件 ， 可 以 使 用 createEvent ("MutationEvents") 创建 一 个 包含 
initMutationEvent () 方法 的 变动 事件 对 象 。 这 个 方法 接受 的 参数 包括 : type 、bubpbles 、 
cancelable、relatedNode、preValue、newValue、attrName 和 attrchange。 下 面 来 看 一 个 模 
拟 变动 事件 的 例子 。 


Var event = document.createEvent ("MutationEvents"); 
event.initMutationEvent ("DOMNodeInserted", true, false, someNode, "™","","",0); 
target.dispatchEvent (event); 


以 上 代码 模拟 了 DoMNodeInserted 事件 。 其 他 变动 事件 也 都 可 以 照 这 个 样子 来 模拟 ， 只 要 改 一 改 
参数 就 可 以 了 。 

要 模拟 HTML 事件 ， 同 样 需 要 先 创建 一 个 event 对 象 一 一 通过 createEvent ("HTMLEvVents")， 
然后 再 使 用 这 个 对 象 的 initEvent () 方 法 来 初始 化 它 即 可 ， 如 下 面 的 例子 所 示 。 


Var event = document.createEvent ("HTITMLEVentSs" ) ; 
event .initEvent("focus"，true，false) : 
target.dispatchEvent (event); 















































































































































这 个 例子 展示 了 如 何在 给 定 目 标 上 模拟 focus 事件 。 模 拟 其 他 HTML 事件 的 方法 也 是 这 样 。 









浏览 器 中 很 少 使 用 变动 事件 和 HTML 事件 ， 因 为 使 用 它们 会 受到 一 些 限制 。 


4. 自 定义 DOM 事件 

DOM3 级 还 定义 了 “ 自 定义 事件 ”。 自 定义 事件 不 是 由 DOM 原生 触发 的 ， 它 的 目的 是 让 开发 人 员 
创建 自己 的 事件 。 要 创建 新 的 自 定义 事件 ,可 以 调用 createEvent ("CustomEvent")。 返 回 的 对 象 有 
一 个 名 为 initcustomEvent () 的 方法 ,接收 如 下 4 个 参数 。 
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口 type (字符 串 ); 触发 的 事件 类 型 ， 例 如 "keydown"。 
口 pupbles ( 布尔 值 ) 表示 事件 是 否 应 该 冒 泡 。 

口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 

口 detail (对 象 ): 任意 值 ， 保 存在 event 对 象 的 detail 属性 中 。 



































可 以 像 分 派 其 他 事件 一 样 在 DOM 中 分 派 创建 的 自 定义 事件 对 象 。 例 如 : 








var div = dqocument .getElementById( "myDiv" ) ， 

















event 

EventUtil.addHandler (div, "myevent", function(event)t 
alert ("DIV: " + event.detail); 

3 

EventUtil.addHandler (document, "myevent", function(event)t{ 
alert ("DOCUMENT: " + event.detail); 

3 

if (document.implementation.hasFeature("CustomEvents", "3.0"))t 
event = document.createEvent ("CustomEvent"); 
event.initCustomEvent ("myevent", true, false, "Hello world!"); 
div.dispatchEvent (event); 

} 


SimulateDOMCustomEventExample01.htm 


这 个 例子 创建 了 一 个 冒 泡 事 件 "myevent"。 而 event .detail 的 值 被 设置 成 了 一 个 简单 的 字符 串 ， 
然后 在 <aiv> 元 素 和 document 上 侦 听 这 个 事件 。 因 为 initcustomEvent () 方 法 已 经 指定 这 个 事件 应 
该 冒 泡 ， 所 以 浏览 器 会 负责 将 事件 向 上 冒 泡 到 qocument。 

支持 自 定义 DOM 事件 的 浏览 器 有 IE9+ 和 Firefox 6+。 


13.6.2 IE 中 的 事件 模拟 
在 IE8 及 之 前 版 本 中 模拟 事件 与 在 DOM 中 模拟 事件 的 思路 相似 : 先 创建 event 对 象 , 然后 为 其 指 





定 相应 的 信 ， 

















息 ， 然 后 再 使 用 该 对 象 来 触发 事件 。 当 然 ，IE 在 实现 每 个 步骤 时 都 采用 了 不 一 样 的 方式 。 





调用 document .createEventOobject() 方 法 可 以 在 下 中 创建 event 对 象 。 但 与 DOM 方式 不 同 
的 是 ， 这 个 方法 不 接受 参数 ,结果 会 返回 一 个 通用 的 event 对 象 。 然 后 ， 你 必须 手工 为 这 个 对 象 添加 
所 有 必要 的 信息 (没有 方法 来 辅助 完成 这 一 步 又 )。 最 后 一 步 就 是 在 目标 上 调用 fireEvent () 方 法 , 这 
个 方法 接受 两 个 参数 : 事件 处 理 程 序 的 名 称 和 event 对 象 。 在 调用 fireEvent () 方 法 时 ,会 自动 为 





event 对 象 添加 src] 












































Element 和 type 属性 ; 其 他 属性 则 都 是 必须 通过 手工 添加 的 。 换 名 话说 ,模拟 任 


何 卫 支持 的 事件 都 采用 相同 的 模式 。 例 如 ， 下 面 的 代码 模拟 了 在 一 个 按钮 上 触发 click 事件 过 程 。 


Var btn = document .getElementByIQ("myBtn" ) ; 


// 创 建 事件 对 象 


Var event = dqocument .createEventobject () ; 





// 初 始 化 事件 对 象 
event.screenX = 
event.screenY = 0; 
event.clientX = 0; 
event .cellentY =: Qs 
event.ctrlKey = false; 
eVent .alLtKey = false; 
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event .ShiftKev = false; 
event.button = 0 





// 触 发 事件 


btn.fireEvent ("onclick", event); 


SimulateIEClickExample01.htm 


这 个 例子 先 创建 了 一 个 event 对 象 ， 然 后 又 用 一 些 信息 对 其 进行 了 初始 化 。 注 意 ， 这 里 可 以 为 对 
象 随 意 添 加 属性 ， 不 会 有 任何 限制 一 一 即使 添加 的 属性 IE8 及 更 早 版 本 并 不 支持 也 无 所 谓 。 在 此 添加 的 
属性 对 事件 没有 什么 影响 ， 因 为 只 有 事件 处 理 程序 才 会 用 到 它们 。 

采用 相同 的 模式 也 可 以 模拟 触发 keypress 事件 ， 如 下 面 的 例子 所 示 。 


Var textbox = qocument .getElementById ("myTextpoxn" ) : 


// 创 建 事件 对 象 


var event = document.createEventObject(); 


/ /初始化 事件 对 象 
event.altKey = false; 
event.ctrlKey = false; 
event .ShiftKev = false; 
event.keyCode = 65; 


// 触 发 事件 


textbox.fireEvent ("onkeypress", event); 
































SimulateIEKeyEventExample01.htm 


1 于 鼠标 事件 、 键 盘 事件 以 及 其 他 事件 的 event 对 象 并 没有 什么 不 同 ， 所 以 可 以 使 用 通用 对 象 来 
触发 任何 类 型 的 事件 .不 过 ,正如 在 DOM 中 模拟 键盘 事件 一 样 ,运行 这 个 例子 也 不 会 因 模 拟 了 keypress 
而 在 文本 框 中 看 到 任何 字符 ， 即 使 触发 了 事件 处 理 程序 也 没有 用 。 


13.7 ”小结 


事件 是 将 JavaScript 与 网 页 联系 在 一 起 的 主要 方式 。“DOM3 级 事件 ”规范 和 HIMLS 定义 了 锚 见 的 
大 多 数 事件 。 即 使 有 规范 定义 了 基本 事件 , 但 很 多 浏览 器 仍然 在 规范 之 外 实现 了 自己 的 专 有 事件 ， 从 而 
为 开发 人 员 提 供 更 多 掌握 用 户 交 互 的 手段 。 有 些 专 有 事件 与 特定 设备 关联 ， 例 如 移动 Safari 中 的 
orientationchange 事件 就 是 特定 关联 iOS 设备 的 。 

在 使 用 事件 时 ， 需 要 考虑 如 下 一 些 内 存 与 性 能 方面 的 问题 。 
口 有 必要 限制 一 个 页 面 中 事件 处 理 程序 的 数量 ， 数 量 太 多 会 导致 占用 大 量 内 存 ， 而 且 也 会 让 用 户 
感觉 页 面 反 应 不 够 灵敏 。 
口 建立 在 事件 冒 泡 机 制 之 上 的 事件 委托 技术 ， 可 以 有 效 地 减少 事件 处 理 程序 的 数量 。 
口 建议 在 浏览 器 缀 载 页 面 之 前 移 除 页 面 中 的 所 有 事件 处 理 程序 。 

可 以 使 用 JavaScript 在 浏览 器 中 模拟 事件 。“DOM2 级 事件 ”和 “DOM3 级 事件 ”规范 规定 了 模拟 事 
件 的 方法 ， 为 模拟 各 种 有 定义 的 事件 提供 了 方便 。 此 外 ， 通 过 组 合 使 用 一 些 技 术 ， 还 可 以 在 某 种 程度 上 
模拟 键盘 事件 。IE8 及 之 前 版 本 同样 支持 事件 模拟 ， 只 不 过 模拟 的 过 程 有 些 差异 。 

事件 是 JavaScript 中 最 重要 的 主题 之 一 ， 深 入 理解 事件 的 工作 机 制 以 及 它们 对 性 能 的 影响 至 关 重 要 。 [全 
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本 章 内 容 
口 理解 表单 





























avaScript 


口 文本 框 验 证 与 交互 
口 使 用 其 他 表单 控制 


最 初 的 一 个 应 用 ， 就 是 分 担 


服务 器 处 理 表单 的 责任 ， 打 破 处 处 依赖 服务 器 的 


























局 面 。 尽 





管 目前 的 Web 和 ne 已 经 有 了 长 足 的 发 展 , 但 Web 表单 的 变化 并 不 明显 。 由 于 Web 表单 
F 务 提供 现成 的 解决 手段 ， 很 多 开发 人 员 不 仅 会 在 验证 表单 时 使 用 JavaScirpt， 
增强 了 一 些 标准 表单 控件 的 默认 行为 。 


14.1 表单 的 基础 知识 


在 HTML 中 ， 表 单 是 由 <£form> 元 素来 表示 的 ， 而 在 JavaScript 中 ， 表 单 对 应 的 则 是 HTMLForm- 


没有 为 许多 常见 人 有 





Element 类 型 。HTMLForml 














Element 继承 HTMLE1 





而 且 还 




















性 。 不 过 ，HTMLFormElement 也 有 它 自己 下 列 独 有 的 属性 和 方法 。 
字符 集 ; 等 价 于 HIML 中 的 accept-charset 特性 。 
接受 请 求 的 URL; 等 价 于 HTML 中 的 action 特性 。 


口 action: 





取得 <form> 元 素 引 用 的 方式 有 好 几 种 。 其 中 最 常见 的 方式 就 是 将 它 看 成 与 其 他 元 素 一 样 ，3 





口 acceptcharset: 服务 顺 能 够 处 理 的 








口 elements: 表单 中 所 有 控件 的 集合 ( 























HTMLCollection )。 















































口 enctype: 请 求 的 编码 类 型 ， 等 价 于 HTML 中 的 enctype 特性 。 

口 length: 表单 中 控件 的 数量 。 

口 method: 要 发 送 的 HITP 请 求 类 型 ,通常 是 "get "或 "post"; 等 价 于 HTML 的 method 特性 。 
口 name: 表单 的 名 称 ; 等 价 于 HTML 的 name 特性 。 

口 reset () : 将 所 有 表单 域 重 置 为 默认 值 。 

口 supmit () : 提交 表单 。 

口 target: 用 于 发 送 请 求 和 接收 响应 的 窗口 名 称 ; 等 价 于 HIML 的 target 特性 。 


























添加 ia 特性， 然后 再 像 下 面 这 样 使 用 getElementById() 方 法 找到 它 。 


var form = 





上 



































document .getElementById(" 


Form )s 





其 次 ， 通 过 document .forms 可 以 取得 

















name 值 来 取得 特定 的 表单 ， 如 下 面 的 例子 所 示 。 
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ement， 因 而 与 其 他 HTML 元 素 具 有 相同 的 默认 属 

















页 面 中 所 有 的 表单 。 在 这 个 集合 中 ， 可 以 通过 数值 索引 或 
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var firstForm = document.forms[0]; // 取 得 页 面 中 的 第 一 个 表单 
var myForm = document.forms["form2"]; // 取 得 页 面 中 名 称 为 "form2" 的 表单 


另外 ， 在 较 早 的 浏览 器 或 者 那些 支持 向 后 兼容 的 浏览 器 中 ， 也 会 把 每 个 设置 了 name 特性 的 表单 作 
为 属性 保存 在 document 对 象 中 。 例 如， 通过 document .form2 可 以 访问 到 名 为 "form2" 的 表单 。 不 
过 ， 我 们 不 推荐 使 用 这 种 方式 : 一 是 容易 出 错 ， 二 是 将 来 的 浏览 器 可 能 会 不 支持 。 

注意 ， 可 以 同时 为 表单 指定 ia 和 name 属性 ， 但 它们 的 值 不 一 定 相 同 。 


14.1.1 提交 表单 


用 户 单 击 提交 按钮 或 图 像 按 钮 时 ， 就 会 提交 表单 。 使 用 <input> 或 <button> 都 可 以 定义 提交 按钮 ， 
只 要 将 其 type 特性 的 值 设置 为 "submit" 即 可 , 而 图 像 按 钮 则 是 通过 将 <input> 的 type 特性 值 设置 为 
"image" 来 定义 的 。 因 此 ， 只 要 我 们 单 击 以 下 代码 生成 的 按钮 ， 就 可 以 提交 表单 。 

<!-- 通用 提交 按钮 --> 


<input type="submit" value="Submit Form"> 



































<!-- 自 定义 提交 按钮 --> 
<button type="submit">Submit Form</button> 


<!-- 图 像 按 钮 --> 

<input type="image" src="graphic.gif"> 

只 要 表单 中 存在 上 面 列 出 的 任何 一 种 按钮 ,那么 在 相应 表单 控件 拥有 焦点 的 情况 下 , 按 回 车 键 就 可 
以 提交 该 表单 。( textarea 是 一 个 例外 ， 在 文本 区 中 国 车 会 换行 。) 如 果 表 单 里 没有 提交 按钮 ， 按 回 车 
键 不 会 提交 表单 。 

以 这 种 方式 提交 表单 时 , 浏览 絮 会 在 将 请 求 发 送 给 服务 带 之 前 触发 supmit 事件 。 这样, 我们 就 有 
机 会 验证 表单 数据 ， 并 据 以 决定 是 否 允 许 表单 提交 。 阻 止 这 个 事件 的 默认 行为 就 可 以 取消 表单 提交 。 例 
如 ， 下 列 代码 会 阻止 表单 提交 。 


Var form = Qocument .getElementById("myForm"); 
EventUtil.addHandler (form, "submit", function(event)t 






































// 取 得 事件 对 象 


event = EventUtil.getEvent (event); 








/ /阻止 默 认 事 件 
EventUtil.preventDefault (event); 





}); 
这 里 使 用 了 第 13 章 定 义 的 EventUtil 对 象 ， 以 便 跨 浏览 器 处 理事 件 。 调 用 prevetnDefault () 
方法 阻止 了 表单 提交 。 一 般 来 说 ， 在 表单 数据 无 效 而 不 能 发 送 给 服务 器 时 ， 可 以 使 用 这 一 技术 。 

在 JavaScript 中 ， 以 编程 方式 调用 submit () 方 法 也 可 以 提交 表单 。 而 且 ， 这 种 方式 无 需 表 单 包含 
提交 按钮 ， 任 何 时 候 都 可 以 正常 提交 表单 。 来 看 一 个 例子 。 


Var form = Qocument .9etElementByIdG ("myForm'" ) ; 

/1 提交 表单 

form.submit (); 

在 以 调用 supmit () 方 法 的 形式 提交 表单 时 ， 不 会 触发 supmit 事件 ， 因 此 要 记得 在 调用 此 方法 之 
前 先 验证 表单 数据 。 
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提交 表单 时 可 能 出 现 的 最 大 问题 ， 就 是 重复 提交 表单 。 在 第 一 次 提交 表单 后 ， 如 果 长 时 间 没 有 反 
应 ， 用 户 可 能 会 变 得 不 耐烦 。 这 时 候 ， 他 们 也 许 会 反复 单 击 提交 按钮 。 结 果 往 往 很 麻烦 〈 因为 服务 器 
要 处 理 重复 的 请 求 )， 或 者 会 造成 错误 〈 如 果 用 户 是 下 订单 ， 那 么 可 能 会 多 订 好 几 份 ) 解决 这 一 问题 
的 办 法 有 两 个 : 在 第 一 次 提交 表单 后 就 禁用 提交 按钮 ， 或 者 利用 onsupmit 事件 处 理 程序 取消 后 续 的 
表单 提交 操作 。 


14.1.2” 重 置 表 单 


在 用 户 单 击 重 置 按 钮 时 ， 表 单 会 被 重 置 。 使 用 type 特性 值 为 "reset" 的 <input> 或 <button> 都 
可 以 创建 重 置 按 钮 ， 如 下 面 的 例子 所 示 。 


<!-- 通用 重 置 按 钮 --> 


<input type="reset" Value="Reset Form"> 









































<!-- 自 定义 重 置 按钮 --> 

<button type="reset">Reset Form</button> 

这 两 个 按钮 都 可 以 用 来 重 置 表单 。 在 重 置 表 单 时 ， 所 有 表单 字段 都 会 恢复 到 页 面 刚 加 载 完 毕 时 的 初 
始 值 。 如 果 某 个 字段 的 初始 值 为 空 ， 就 会 恢复 为 空 ， 而 带 有 默认 值 的 字段 ， 也 会 恢复 为 默认 值 。 

用 户 单 击 重 置 按钮 重 置 表单 时 ， 会 触发 reset 事件 。 利 用 这 个 机 会 ， 我 们 可 以 在 必要 时 取消 重 置 
操作 。 例 如 ， 下 面 展 示 了 阻止 重 置 表单 的 代码 。 


Var form = Qocument .getElementByIQ("myForm'" ) ; 
EventUtil.addHandler (form, "Teset"，function(event){ 






































// 取 得 事件 对 象 


event = EventUtil.getEvent (event); 





/ /阻止 表单 重 置 
EventUtil.preventDefault (event); 
}); 
与 提交 表单 一 样 ， 也 可 以 通过 JavaScript 来 重 置 表 单 ， 如 下 面 的 例子 所 示 。 


Var form = document .getElementById("myForm"); 


// 重 置 表单 


form.reset(); 


与 调用 submit () 方 法 不 同 ,调用 reset () 方 法 会 像 单 击 重 置 按钮 一 样 触 发 reset 事件 。 















在 Web 表单 设计 中 ， 重 置 表单 通常 意味 着 对 已 经 填写 的 数据 不 满意 。 重 置 表单 
经 常会 导致 用 户 摸 不 着 头脑 ， 如 果 意 外 地 触发 了 表单 重 置 事件 ， 那 么 用 户 甚至 会 很 恼 
火 。 事 实 上 ， 重 置 表单 的 需求 是 很 少见 的 。 更 常见 的 做 法 是 提供 一 个 取消 按钮 ， 让 用 
户 能 够 回 到 前 一 个 页 面 ， 而 不 是 不 分 青红皂白 地 重 置 表单 中 的 所 有 值 。 







14.1.3 ”表单 字段 
可 以 像 访问 页 面 中 的 其 他 元 素 一 样 ， 使 用 原生 DOM 方法 访问 表单 元 素 。 此 外 ， 每 个 表单 都 有 








t 
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elements 属性 , 该 属性 是 表单 中 所 有 表单 元 素 ( 字段 ) 的 集合 。 这 个 elements 是 一 个 有 序列 表 ， 
其 中 包含 着 表单 中 的 所 有 字段 ， 例如 <input>、 < 七 eXtarea>、 ee 每 个 表单 字 
段 在 elements 集合 中 的 顺序 ， 与 它们 出 现在 标记 中 的 顺序 相同 ， 可 以 按照 位 置 和 name 特性 来 访问 它 
们 。 下 面 来 看 一 个 例子 。 


Var form = Qocument .getElementById("forml"); 


// 取 得 表单 中 的 第 一 个 字段 


Var fieldl = form.elements[0]; 











// 取 得 名 为 "textbox1" 的 字段 
Var field2 = form.elements["textboxl"]; 


// 取 得 表单 中 包含 的 字段 的 数量 

Var fieldCount = form.elements.length; 

如 果 有 多 个 表单 控件 都 在 使 用 一 个 name( 如 单 选 按钮 )， 那 么 就 会 返回 以 该 name 命名 的 一 个 
NodeList。 例如， 以 下 面 的 HTML 代码 片段 为 例 。 


<form method="post" id="myForm"> 
9 <ul> 
<l1i><input type="radio" name="color" value="red">Red</1i> 
<l1i><input type="radio" name="color" value="green">Green</1i> 
<l1i><input type="radio" name="color" value="blue">Blue</1i> 
</ul> 
</form> 


FormFieldsExample01.htm 


在 这 个 HTML 表单 中 , 有 3 个 单 选 按钮 , 它们 的 name 都 是 "color", 意味 着 这 3 个 字段 是 一 起 的 。 
在 访问 elements["color"] 时 ， 就 会 返回 一 个 NodeList， 其 中 包含 这 3 个 元 素 ; 不 过 ， 如 果 访 问 
elements[0] ， 则 只 会 返回 第 一 个 元 素 。 来 看 下 面 的 例子 。 


Var form = Qocument .9etElementById ("myForm" ) ; 




















Var colorFields = form.elements["color"]; 
alert (colorFields.length); //3 


Var firstColorField = colorFields[0]; 


Var firstFormField = form.elements[0]; 
alert (firstColorField === firstFormField); //true 


FormFieldsExample01.htm 


以 上 代码 显示 ， 通 过 form.elements[0] 访 问 到 的 第 一 个 表单 字段 ， 与 包含 在 form.elements 
["color"] 中 的 第 一 个 元 素 相同 。 












也 可 以 通过 访问 表单 的 属性 来 访问 元 素 , 例如 form[0] 可 以 取得 第 一 个 表单 字 
段 ， 而 form["color"] 则 可 以 取得 第 一 个 命名 字段 。 这 些 属性 与 通过 elements 集 
合 访 问 到 的 元 素 是 相同 的 。 但 是 ,我们 应 该 尽 可 能 使 用 elements， 通 过 表单 属性 访 
问 元 素 只 是 为 了 与 旧 浏 览 器 向 后 兼容 而 保留 的 一 种 过 渡 方 式 。 
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属性 





多 用 


1. 共有 的 表单 字段 属性 








除了 <fieldset> 元 素 之 外 ， 所 有 表单 字段 都 拥有 相同 的 一 组 属性 。 由 于 <input> 类 型 可 以 表示 多 
种 表单 字段 ,因此 有 些 属性 只 适用 于 某 些 字段 , 但 还 有 一 些 属性 是 所 有 字段 所 共有 的 。 表 单字 段 共有 的 























如 下 。 

D aisabled: 布尔 值 ， 表 示 当 前 字段 是 否 被 禁用 。 

口 form: 指向 当前 字段 所 属 表 单 的 指针 ; 只 读 。 

口 name: 当前 字段 的 名 称 。 

口 readonly: 布尔 值 ， 表 示 当 前 字段 是 否 只 读 。 

口 tabIndex: 表示 当前 字段 的 切换 (tab ) 序号 。 

口 type: 当前 字段 的 类 型 ， 如 "checkbox" 、"radio"， 等 等 。 

口 value: 当前 字段 将 被 提交 给 服务 器 的 值 。 对 文件 字段 来 说 ， 这 个 属性 是 只 读 的 
在 计算 机 中 的 路 径 。 





















































除了 form 属性 之 外 ， 可 以 通过 JavaScript 动态 修改 其 他 任何 属性 。 来 看 下 面 的 例子 : 


Var form = Qocument .getElementByIQ("myEForm" ) ; 
Var field = form.elements[0]; 


// 修 改 value 属性 
field.value = "Another value"; 


// 检 查 form 属性 的 值 


alert (field.form === form); //true 


// 把 焦点 设置 到 当前 字段 
field.focus(); 


// 禁 用 当前 字段 
field.disabled = true; 


// 修 改 type 属性 (不 推荐 ,但 对 <input> 来 说 是 可 行 的 ) 
field.type = "checkbox"; 








， 包 含 着 文件 





能 够 动态 修改 表单 字段 属性 ， 意 味 着 我 们 可 以 在 任何 时 候 ， 以 任何 方式 来 动态 操作 表单 。 例 如 ,很 




















户 可 能 会 重复 单 击 表单 的 提交 按钮 。 在 涉及 信用 卡 消费 时 ， 这 就 是 个 问题 : 因为 会 导致 费用 翻番 。 


为 此 ， 最 常见 的 解决 方案 ， 就 是 在 第 一 次 单 击 后 就 禁用 提交 按钮 。 只 要 侦 听 submit 事件 ， 并 在 该 事件 


发 生 





时 禁用 提交 按钮 即 可 。 以 下 就 是 这 样 一 个 例子 。 
/ /避免 多 次 提交 表单 


EventUtil.addHandler (form, "submit", functionl(event)t{ 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 








// 取 得 提交 按钮 
var btn = target.elements["submit-btn"]; 


// 禁 用 它 
btn.disabled = true; 


FormFieldsExample02.htm 
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以 上 代码 为 表单 的 supmit 事件 添加 了 一 个 事件 处 理 程序 。 事 件 触 发 后 ,代码 取得 了 提交 按钮 
并 将 其 aisabled 属性 设置 为 true。 注 意 ， 不 能 通过 onclick 事件 处 理 程序 来 实现 这 个 功能 ， 原 
因 是 不 同 浏览 器 之 间 存 在 “时 差 >: 有 的 浏览 器 会 在 触发 表单 的 submit 事件 之 前 触发 click 事件 ， 
而 有 的 浏览 器 则 相反 。 对 于 先 触 发 click 事件 的 浏览 器 ， 意 味 着 会 在 提交 发 生 之 前 禁用 按钮 ， 结 果 
永远 都 不 会 提交 表单 。 因 此 ， 最 好 是 通过 submit 事件 来 禁用 提交 按钮 。 不 过 ， 这 种 方式 不 适合 表 
单 中 不 包含 提交 按钮 的 情况 ;如 前 所 述 ,只 有 在 包含 提交 按钮 的 情况 下 , 才 有 可 能 触发 表单 的 submit 
事件 。 

除了 <fieldset> 之 外 ， 所 有 表单 字段 都 有 type 属性 。 对 于 <input> 元 素 ， 这 个 值 等 于 HTML 特 
性 type 的 值 。 对 于 其 他 元 素 ， 这 个 type 属性 的 值 如 下 表 所 列 。 







































































说 明 HTML 示 例 type 属 性 的 值 
单 选 列表 <select>...</select> "select-one" 
多 选 列表 <select multiple>...</select> "select-multiple" 
定义 按钮 <button>...</button> "SUbmit”" 
定义 非 提 交 按 钮 <button type="button">...</button> "Button 
鱼 定 义 重 置 按钮 <button type="reset">...</buton> "reset" 
和 定义 提交 按钮 <button type="submit">...</buton> "submit" 

















此 外 ，<input> 和 <button> 元 素 的 type 属性 是 可 以 动态 修改 的 ， 而 <select> 元 素 的 type 属性 
则 是 只 读 的 。 

2. 共有 的 表单 字段 方法 

每 个 表单 字段 都 有 两 个 方法 : focus () 和 blur () 。 其 中 ，focus () 方 法 用 于 将 浏览 器 的 焦点 设置 
到 表单 字段 ， 即 激活 表单 字段 ， 使 其 可 以 响应 键盘 事件 。 例 如 ， 接 收 到 焦点 的 文本 框 会 显示 插入 符号 ， 
随时 可 以 接收 输入 。 使 用 focus () 方 法 ,可 以 将 用 户 的 注意 力 吸引 到 页 面 中 的 某 个 部 位 。 例 如 , 在 页 面 
加 载 完 毕 后 ， 将 焦点 转移 到 表单 中 的 第 一 个 字段 。 为 此 ， 可 以 侦 听 页 面 的 1oaaq 事件 ， 并 在 该 事件 发 生 
时 在 表单 的 第 一 个 字段 上 调用 focus () 方 法 ， 如 下 面 的 例子 所 示 。 

EventUtil.addHandler (windqow，"1oad"，function(event){ 


document .forms [0] .elements[0].focus(); 


}); 

要 注意 的 是 ， 如 果 第 一 个 表单 字段 是 一 个 <input> 元 素 ， 且 其 type 特性 的 值 为 "hiagen"， 那 么 
以 上 代码 会 导致 错误 。 另 外 ,如果 使 用 CSS 的 display 和 visibility 属性 隐藏 了 该 字段 ,同样 也 会 
导致 错误 。 

HTML5 为 表单 字段 新 增 了 一 个 autofocus 属性 ,在 支持 这 个 属性 的 浏览 器 中 ,只 要 设置 这 个 属性 ， 
不 用 JavaScript 就 能 自动 把 焦点 移动 到 相应 字段 。 例 如 : 

<input type="text" autofocus> 

为 了 保证 前 面 的 代码 在 设置 autofocus 的 浏览 器 中 正常 运行 ， 必 须 先 检测 是 否 设置 了 该 属性 ， 如 
果 设 置 了 ， 就 不 用 再 调用 focus () 了 。 


EventUtil.addHandler (window, "load", function(event)t 
Var element = document.forms[0] .elements[0]; 
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if (element.autofocus !== true)t{ 
element.focus(); console.log("JS focus"); 
} 
} 


FocusExample01.htm 


因为 autofocus 是 一 个 布尔 值 属性 ， 所 以 在 支持 的 浏览 器 中 它 的 值 应 该 是 true。( 在 不 支持 的 浏 
览 旨 中 ， 它 的 值 将 是 空 字 符 串 。) 为 此 ， 上 面 的 代码 只 有 在 autofocus 不 等 于 true 的 情况 下 才 会 调用 
focus () , 从 而 保证 癌 前 兼容 。 支持 autofocus 属性 的 浏览 器 有 Firefox 4+ 、Safari 5+、Chrome 和 Opera 
9.6。 




















在 默认 情况 下 ， 只 有 表单 字段 可 以 获得 焦点 。 对 于 其 他 元 素 而 言 ， 如 果 先 将 其 
tabIndex 属性 设置 为 -1， 然 后 再 调用 focus () 方 法 ， 也 可 以 让 这 些 元 素 获得 焦点 。 
只 有 Opera 不 支持 这 种 技术 。 






与 focus () 方 法 相对 的 是 bluz () 方 法 ， 它 的 作用 是 从 元 素 中 移 走 焦点 。 在 调用 blur () 方 法 时 ， 
并 不 会 把 焦点 转移 到 某 个 特定 的 元 素 上 ; 仅仅 是 将 焦点 从 调用 这 个 方法 的 元 素 上 面 移 走 而 已 。 在 早期 
Web 开发 中 , 那 时候 的 表单 字段 还 没有 *eadonly 特性 , 因此 就 可 以 使 用 blur () 方 法 来 创建 只 读 字 段 。 
现在 ， 虽 然 需要 使 用 bluz () 的 场合 不 多 了 ， 但 必要 时 还 可 以 使 用 的 。 用 法 如 下 : 

document .Eorms [0] .elements[0] .blur(); 

3. 共有 的 表单 字段 事件 

除了 支持 鼠标 、 键 盘 、 更 改 和 HTML 事件 之 外 ， 所 有 表单 字段 都 支持 下 列 3 个 事件 。 

口 blur: 当前 字段 失去 焦点 时 触发 。 

口 change: 对 于 <input> 和 <textarea> 元 素 ， 在 它们 失去 焦点 且 value 值 改 变 时 触发 ;对 于 
<select> 元 素 ， 在 其 选项 改变 时 触发 。 

口 focus: 当前 字段 获得 焦点 时 触发 。 

当 用 户 改 变 了 当前 字段 的 焦点 , 或 者 我 们 调用 了 blur () 或 focus () 方 法 时 ， 都 可 以 触发 blur 和 
focus 事件 。 这 两 个 事件 在 所 有 表单 字段 中 都 是 相同 的 。 但 是 ，change 事件 在 不 同 表 单 控 件 中 触发 的 
次 数 会 有 所 不 同 。 对 于 <input> 和 <textarea> 元 素 , 当 它 们 从 获得 焦点 到 失去 焦点 且 value 值 改 变 时 ， 
才 会 触发 change 事件 。 对 于 <select> 元 素 ， 只 要 用 户 选 择 了 不 同 的 选项 ， 就 会 触发 change 事件 ; 
换 名 话说， 不 失去 焦点 也 会 触发 change 事件 。 

通常 ,可 以 使 用 focus 和 blur 事件 来 以 某 种 方式 改变 用 户 界 面 ,要么 是 向 用 户 给 出 视觉 提示 , 要 
么 是 向 界面 中 添加 额外 的 功能 ( 例如， 为 文本 框 显示 一 个 下 拉 选 项 菜单 )。 而 change 事件 则 经 常用 于 
验证 用 户 在 字段 中 输入 的 数据 。 例 如 ， 假 设 有 一 个 文本 框 ， 我 们 只 允许 用 户 输入 数值 。 此 时 ， 可 以 利用 
focus 事件 修改 文本 框 的 背景 颜色 ， 以 便 更 清楚 地 表明 这 个 字段 获得 了 焦点 。 可 以 利用 blur 事件 恢复 
文本 框 的 背景 颜色 ,利用 change 事件 在 用 户 输入 了 非 数 值 字符 时 再 次 修改 背景 颜色 。 下 面 就 给 出 了 实 
现 上 述 功能 的 代码 。 


Var textbox = qdqocument .forms [0] .elements[0]; 








































































































EventUtil.addHandler (textbox, "focus", functionl(event)t{ 
event = EventUtil.getEvent (event); 
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Var target = EventUtil.getTarget (event); 
if (target.style.backgroundColor != "red")t 
target.style.backgroundColor = "yellow"; 


} 
上) 





EventUtil.addHandler (textbox, "blur", function(event)t{ 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 











if (/[^\dl/.test(target.value))t 
target.style.backgroundColor = "red"; 

} else { 
target.style.backgroundColor = "" 





} 
二 





EventUtil.addHandler (textbox, "change", function(event)t{ 


event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 











if (/[^\d]l/.test(target.value))t 
target.style.backgroundColor = "red"; 

} else { 
target.style.backgroundColor = "" 





} 
了 


FormFieldEventsExample01.htm 


在 此 ，onfocus 事件 处 理 程序 将 文本 框 的 背景 颜色 修改 为 黄色 ， 以 清楚 地 表明 当前 字段 已 经 激活 。 
随后 ，onblur 和 onchange 事件 处 理 程序 则 会 在 发 现 非 数值 字符 时 ， 将 文本 框 背景 颜色 修改 为 红色 。 
为 了 测试 用 户 输入 的 是 不 是 非 数值 ， 这 里 针对 文本 框 的 value 属性 使 用 了 简单 的 正则 表达 式 。 而 且 ， 
为 确保 无 论文 本 框 的 值 如 何 变 化 ， 验 证 规则 始终 如 一 ，onblur 和 onchange 事件 处 理 程序 中 使 用 了 相 
同 的 正则 表达 式 。 






























关于 blur 和 change 事件 的 关系 ， 并 没有 严格 的 规定 。 在 菜 些 浏览 器 中 ,pblur 
事件 会 先 于 change 事件 发 生 ; 而 在 其 他 浏览 器 中 ， 则 恰好 相反 。 为 此 ， 不 能 假定 这 
两 个 事件 总 会 以 某 种 顺序 依次 触发 ， 这 一 点 要 特别 注意 。 






14.2 文本 框 脚本 


在 HTML 中 ， 有 两 种 方式 来 表现 文本 框 : 一 种 是 使 用 <input> 元 素 的 单行 文本 框 ， 男 一 种 是 使 用 
<textarea> 的 多 行文 本 框 。 这 两 个 控件 非常 相似 ， 而 且 多 数 时 候 的 行为 也 差不多 。 不 过 ， 它 们 之 间 仍 
然 存 在 一 些 重要 的 区 别 。 

要 表现 文本 框 ,必须 将 <input> 元 素 的 type 特性 设置 为 "text"。 而 通过 设置 size 特性 , 可 以 指 
定 文本 框 中 能 够 显示 的 字符 数 。 通 过 value 特性 ,可 以 设置 文本 框 的 初始 值 ， 而 maxlength 特性 则 用 
于 指定 文本 框 可 以 接受 的 最 大 字符 数 。 如 果 要 创建 一 个 文本 框 ， 让 它 能 够 显示 25 个 字符 ， 但 输入 不 能 
超过 50 个 字符 ， 可 以 使 用 以 下 代码 : 
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<input type="text" size="25" maxlength="50" value="initial value"> 


相对 而 言 ,<textarea> 元 素 则 始终 会 呈现 为 一 个 多 行文 本 框 ,要 指定 文本 框 的 大 小 ,可 以 使 用 rows 
和 cols 特性 。 其 中 ,rows 特性 指定 的 是 文本 框 的 字符 行 数 , 而 cols 特性 指定 的 是 文本 框 的 字符 列 数 
(类 似 于 <inpu> 元 素 的 size 特性 )。 与 <input> 元 素 不 同 ，<textarea> 的 初始 值 必须 要 放 在 
<textarea> 和 </textarea> 之 间 ， 如 下 面 的 例子 所 示 。 

















<textarea rows="25" cols="5">initial value</textarea> 


男 一 个 与 <input> 的 区 别 在 于 ,不 能 在 HTML 中 给 <textarea> 指 定 最 大 字符 数 。 
无 论 这 两 种 文本 框 在 标记 中 有 什么 区 别 ， 但 它们 都 会 将 用 户 输入 的 内 容 保存 在 value 属性 中 。 可 
以 通过 这 个 属性 读 取 和 设置 文本 框 的 值 ， 如 下 面 的 例子 所 示 : 


Var textbox = qocument .forms [0] .elements["textbox1l"]; 
alert (textbox.value); 








textbox.value = "Some new value"; 

我 们 建议 读者 像 上 面 这 样 使 用 value 属性 读 取 或 设置 文本 框 的 值 ， 不 建议 使 用 标准 的 DOM 方法 。 
换 句 话说 ， 不 要 使 用 setAttribute() 设 置 <input> 元 素 的 value 特性 ， 也 不 要 去 修改 <textarea> 
元 素 的 第 一 个 子 节点 。 原 因 很 简单 : 对 value 属性 所 作 的 修改 ,不 一 定 会 反映 在 DOM 中 。 因 此 , 在 处 
理 文本 框 的 值 时 ， 最 好 不 要 使 用 DOM 方法 。 


14.2.1 选择 文本 


上 述 两 种 文本 框 都 支持 select () 方 法 ,这 个 方法 用 于 选择 文本 框 中 的 所 有 文本 。 在 调用 select () 
方法 时 ， 大 多 数 浏览 器 (Opera 除外 ) 都 会 将 焦点 设置 到 文本 框 中 。 这 个 方法 不 接受 参数 ， 可 以 在 任何 
时 候 被 调用 。 下 面 来 看 一 个 例子 。 


var textbox = dqocument .forms [0] .elements["textbox1l"]; 
textbox.select (); 


在 文本 框 获得 焦点 时 选择 其 所 有 文本 , 这 是 一 种 非常 常见 的 做 法 , 特别 是 在 文本 框 包含 默认 值 的 时 
候 。 因 为 这 样 做 可 以 让 用 户 不 必 一 个 一 个 地 删除 文本 。 下 面 展 示 了 实现 这 一 操作 的 代码 。 
EventUtil.addHandler (textbox, "focus", functionl(event)t{ 


event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 

































































target.select (); 


} 


TextboxSelectExample01.htm 


将 上 面 的 代码 应 用 到 文本 框 之 后 ， 只 要 文本 框 获得 焦点 ,就 会 选择 其 中 所 有 的 文本 。 这 种 技术 能 够 
较 大 幅度 地 提升 表单 的 易 用 性 。 

1. 选择 select ) 事件 

与 select () 方 法 对 应 的 ， 是 一 个 select 事件 。 在 选择 了 文本 框 中 的 文本 时 ， 就 会 触发 select 
事件 。 不 过 ， 到 底 什 么 时 候 触 发 select 事件 ， 还 会 因 浏览 需 而 异 。 在 IE9+、Opera 、Firefox 、Chrome 
和 Safari 中 , 只 有 用 户 选择 了 文本 ( 而 且 要 释放 鼠标 ), 才 会 触发 select 事件 。 而 在 IE8 及 更 早 版 本 中 ， 



































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


14.2 文本 框 脚本 421 





只 要 用 户 选 择 了 一 个 字母 ( 不必 释 放 鼠 标 ), 就 会 触发 select 事件 。 另 外 , 在 调用 select () 方 法 时 也 14 
会 触发 select 事件。 下面 是 一 个 简单 的 例子 。 


Var textbox = qdqocument .forms [0] .elements["textbox1l"]; 
量 ， EventUtil.addHandler (textbox, "select", function(event)t{ 
Var alert ("Text selected" + textbox.value); 


}); 





‘SelectEventExample01.htm 
2. 取得 选择 的 文本 
虽然 通过 select 事件 我 们 可 以 知道 用 户 什 么 时 候选 择 了 文本 ,但 仍然 不 知道 用 户 选择 了 什么 文本 。 
HTMLS5 通过 一 些 扩展 方案 解决 了 这 个 问题 ， 以 便 更 顺利 地 取得 选择 的 文本 。 该 规范 采取 的 办 法 是 添加 
两 个 属性 : selectionStart 和 selectionEnd。 这 两 个 属性 中 保存 的 是 基于 0 的 数值 ， 表 示 所 选择 
文本 的 范围 〈 即 文本 选区 开头 和 结尾 的 偏 移 量 )。 因 此 ， 要 取得 用 户 在 文本 框 中 选择 的 文本 ， 可 以 使 用 
如 下 代码 。 


function getSelectedText (textbox)t{ 
return textbox.value.substring (textbox.selectionStart, textbox.selectionEnd); 
























































} 


为 substring() 方 法 基于 字符 串 的 偏 移 量 执 行 操作 ， 所 以 将 selectionstart 和 
selectionEng 直接 传 给 它 就 可 以 取得 选中 的 文本 。 

IE9+ 、Firefox 、Safari 、Chrome 和 Opera 都 支持 这 两 个 属性 。IE8 及 之 前 版 本 不 支持 这 两 个 属性 ， 
而 是 提供 了 另 一 种 方案 。 

IE8 及 更 早 的 版 本 中 有 一 个 document .selection 对 象 ， 其 中 保存 着 用 户 在 整个 文档 范围 内 选择 
的 文本 信息 ; 也 就 是 说 ， 无 法 确定 用 户 选 择 的 是 页 面 中 哪个 部 位 的 文本 。 不 过 , 在 与 select 事件 一 起 
使 用 的 时 候 ， 可 以 假定 是 用 户 选 择 了 文本 框 中 的 文本 ， 因 而 触发 了 该 事件 。 要 取得 选择 的 文本 ， 首 先 必 
须 创 建 一 个 范围 〈 第 12 章 讨论 过 )， 然 后 再 将 文本 从 其 中 提取 出 来 ， 如 下 面 的 例子 所 示 。 























































































































function getSelectedText (textbox)t 
if (typeof textbox.selectionstart == "number"){ 
return textbox.value.substring (textbox.selectionStart, 
textbox.selectionEngd); 





} else if (document .selection){ 
return document .selection.createRange() .text; 
} 


TextboxGetSelectedlextExample01.htm 


这 里 修改 了 前 面 的 函数 ,包括 了 在 正中 取得 选择 文本 的 代码 。 注 意 , 调用 document . selection 
时 ,不 需要 考虑 textbox 参数 。 

3. 选择 部 分 文本 

HTML5 也 为 选择 文本 框 中 的 部 分 文本 提供 了 解决 方案 ， 即 最 早 由 Firefox 引入 的 
setSelectionRange () 方 法 。 现 在 除 select () 方 法 之 外 ,所 有 文本 框 都 有 一 个 setselectionRange () 
方法 。 这 个 方法 接收 两 个 参数 : 要 选择 的 第 一 个 字符 的 索引 和 要 选择 的 最 后 一 个 字符 之 后 的 字符 的 索引 
(类 似 于 substring () 方 法 的 两 个 参数 )。 来 看 一 个 例子 。 
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IE9、 


方法 
点 和 
用 范 





IE8 及 更 早 版 本 支持 使 用 范 


textbox.value = "Hello worild!" 
/ /选择 所 有 文本 
textbox.setSelectionRange(0, textbox.value.length); //"Hello world! 


/ /选择 前 3 个 字符 
textbox.setSelectionRange(0, 3); //"Hel" 


/ /选择 第 4 到 第 6 个 字符 
textbox.setSelectionRange(4, 7); //"o w" 











要 看 到 选择 的 文本 ， 必 须 在 调用 setselectionRange() 之 前 或 之 后 立即 将 焦点 设置 到 文本 机 





Firefox 、Safari 、Chrome 和 Opera 支持 这 种 方案 。 
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(第 12 章 讨论 过 ) 选择 部 分 文本 。 要 选择 文本 框 中 的 部 分 文本 ， 必 须 
首先 使 用 正 在 所 有 文本 框 上 提供 的 createTextRange () 方 法 创建 一 个 范围 ， 并 将 其 放 在 恰当 的 位 置 
上 。 然 后 ， 再 使 用 movestart () 和 moveEna() 这 两 个 范 上 











方法 将 范围 移动 到 位 。 不 过 ， 在 调用 这 两 个 














以 前 , 还 必须 使 用 collapse () 将 范围 折 县 到 文本 框 的 开始 位 置 。 此 时 , movestart () 将 范围 的 起 








终点 移动 到 了 相同 的 位 置 ， 只 要 再 给 moveEnd () 传人 要 选择 的 字符 总 数 即 可 。 











目的 select () 方法 选择 文本 ， 如 下 面 的 例子 所 示 。 


textbox.value = "Hello world!"; 














Var range = textbox.createTextRange(); 


/ /选择 所 有 文本 

range.collapse (true); 

range.moveStart ("character", 0); 

range.moveEnd ("character", textbox.value.length); //"Hello world!" 
range.select (); 


/ /选择 前 3 个 字符 

range.collapse (true); 

range.moveStart ("character", 0); 
range.moveEnd ("character", 3); 
range.select (); //"Hel" 


/ /选择 第 4 到 第 6 个 字符 

range.collapse (true); 

range.moveStart ("character", 4); 
range.moveEnd ("character", 3); 
range.select (); // Oo WY 


与 在 其 他 浏览 需 中 一 样 ， 要 想 在 文本 框 中 看 到 文本 被 选择 的 效果 ， 必 须 让 文本 

















最 后 一 步 ， 就 是 使 














为 了 实现 跨 浏览 器 编程 ， 可 以 将 上 述 两 种 方案 组 合 起 来 ， 如 下 面 的 例子 所 示 。 


function SelectText (textbox, startIindex, stopIndex){ 

if (textbox.setSelectionRange){ 
textbox.setSelectionRange (startIindex, stopIndex); 

} else if (textbox.createTextRange) { 
Var range = textbox.createTextRange(); 
range.collapse (true); 
range.moveStart ("character", startIindex); 
range.moveEnd ("character", stopIndex - startIindex); 
range.select (); 
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textbox.focus(); 


TextboxPartialSelectionExample01.htm 


这 个 selectText () 函数 接收 三 个 参数 : 要 操作 的 文本 框 、 要 选择 文本 中 第 一 个 字符 的 索引 和 要 选 
择 文本 中 最 后 一 个 字符 之 后 的 索引 。 首先 ， 函 数 测试 了 文本 框 是 否 包 含 setSelectionRange () 方 法 。 
如 果 有 ， 则 使 用 该 方法 。 和 否则 ， 检 测 文 本 框 是 否 支 持 createTextRange () 方 法 。 如 果 支 持 ， 则 通过 创 
建 范围 来 实现 选择 。 最 后 一 步 ， 就 是 为 文本 框 设置 焦点 ， 以 便 用 户 看 到 文本 框 中 选择 的 文本 。 可 以 像 下 
面 这 样 使 用 selectText () 方 法 。 





















































textbox.value = "Hello world!" 


/ /选择 所 有 文本 

selectText (textbox, 0, textbox.value.length); //"Hello world!" 

/ /选择 前 3 个 字符 

selectText (textbox, 0, 3); //"Hel" 

/ /选择 第 4 到 第 6 个 字符 

selectText (textbox, 4, 7); //"O w" 

选择 部 分 文本 的 技术 在 实现 高 级 文本 输入 框 时 很 有 用 , 例如 提供 自动 完成 建议 的 文本 框 就 可 以 使 用 
这 种 技术 。 


14.2.2 ”过 滤 输 入 


我 们 经 常会 要 求 用 户 在 文本 框 中 输入 特定 的 数据 ,或 者 输入 特定 格式 的 数据 。 例 如 ， 必 须 包 含 某 些 
字符 ， 或 者 必须 匹配 某 种 模式 。 由 于 文本 框 在 默认 情况 下 没有 提供 多 少 验证 数据 的 手段 ， 因 此 必须 使 用 
JavaScript 来 完成 此 类 过 滤 输 入 的 操作 。 而 综合 运用 事件 和 DOM 手段 , 就 可 以 将 普通 的 文本 框 转换 成 能 
够 理解 用 户 输入 数据 的 功能 型 控件 。 

1. 屏蔽 字符 

有 时 候 , 我 们 需要 用 户 输 入 的 文本 中 包含 或 不 包含 某 些 字符 。 例 如 ， 电话 号 码 中 不 能 包含 非 数 值 字 
符 。 如 前 所 述 ， 响 应 向 文本 框 中 插入 字符 操作 的 是 keypress 事件 。 因 此 ,可 以 通过 阻止 这 个 事件 的 默 
认 行 为 来 屏蔽 此 类 字符 。 在 极端 的 情况 下 ， 可 以 通过 下 列 代码 屏蔽 所 有 按键 操作 。 
EventUtil.addHandler (textbox, "keypress"，function(event){ 


event = EventUtil.getEvent (event); 
EventUtil.preventDefault (event); 













































































}); 

运行 以 上 代码 后 ,由 于 所 有 按键 操作 都 将 被 屏蔽 ， 结 果 会 导致 文本 框 变 成 只 读 的 。 如 果 只 想 屏蔽 特 
定 的 字符 ,， 则 需要 检测 keypress 事件 对 应 的 字符 编码 ,然后 再 决定 如 何 响应 。 例 如 ， 下 列 代码 只 人 允许 
用 户 输入 数值 。 
EventUtil.addHandler (textbox, "keypress", function(event)t 

event = EventUtil.getEvent (event); 


Var target = EventUtil.getTarget (event); 
Var charCode = EventUtil.getCharCode (event); 


















































if (!/\d/ .test (String.fromCharCode(charCode)))t{ 
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EventUtil.preventDefault (event); 
} 
} 


在 这 个 例子 中 ， 我 们 使 用 EventUtil.getcharcode() 实 现 了 跨 浏 览 器 取得 字符 编码 。 然 后 ， 使 
用 string .fromcharCode() 将 字符 编码 转换 成 字符 串 ， 再 使 用 正则 表达 式 八 q/ 来 测试 该 字符 串 ， 从 
而 确定 用 户 输入 的 是 不 是 数值 。 如 果 测 试 失败 , 那么 就 使 用 EventUtil .preventDefault () 屏蔽 按键 
和 件 。 结 果 ， 文 本 框 就 会 忽略 所 有 输入 的 非 数 值 。 
虽然 理论 上 只 应 该 在 用 户 按 下 字符 键 时 才 触 发 keypress 事件 , 但 有 些 浏览 器 也 会 对 其 他 键 触发 此 
事件 。Firefox 和 Safari (3.1 版 本 以 前 ) 会 对 向 上 键 、 向 下 键 、 退 格 键 和 删除 键 触发 keypress 事件 ; 
Safari 3.1 及 更 新 版 本 则 不 会 对 这 些 键 触发 keypress 事件 。 这 意味 着 , 仅 考 虑 到 屏蔽 不 是 数值 的 字符 还 
不 够 ， 还 要 避免 屏蔽 这 些 极为 常用 和 必要 的 键 。 所 幸 的 是 ， 要 检测 这 些 键 并 不 困难 。 在 Firefox 中 ， 所 
有 由 非 字 符 键 触发 的 keypress 事件 对 应 的 字符 编码 为 0， 而 在 Safari 3 以 前 的 版 本 中 ， 对 应 的 字符 编 
码 全 部 为 8。 为 了 让 代码 更 通用 ， 只 要 不 屏蔽 那些 字符 编码 小 于 10 的 键 即 可 。 故而 , 可 以 将 上 面 的 函数 
重 写成 如 下 所 示 。 


EventUtil.addHandler (textbox, "keypress", function(event)t{ 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 
Var charCode = EventUtil.getCharCode (event); 


























山中 




































































if (!/\d/ .test (String.fromCharCode(charCode)) && charCode > 9)({ 
EventUtil.preventDefault (event); 





} 
}); 
这 样 ,我 们 的 事件 处 理 程序 就 可 以 适用 所 有 浏览 器 了 ， 即 可 以 屏蔽 非 数 值 字符 , 但 不 
触发 keypress 事件 的 基本 按键。 

除 此 之 外 ， 还 有 一 个 问题 需要 处 理 : 复制 、 粘 贴 及 其 他 操作 还 要 用 到 Ctrl 键 。 在 除 正之 外 的 所 有 
浏览 器 中 ， 前 面 的 代码 也 会 屏蔽 Ctrl+C、CtrhrV， 以 及 其 他 使 用 Ctrl 的 组 合 键 。 因 此 ， 最 后 还 要 添加 一 
个 检测 条 件 ， 以 确保 用 户 没 有 按 下 Cttl 键 ,如 下 面 的 例子 所 示 。 

EventUtil.addHandler (textbox, "keypress", function(event)t{ 

event = EventUtil.getEvent (event); 


Var target = EventUtil.getTarget (event); 
Var charCode = EventUtil.getCharCode (event); 











峭 


菩 那 些 也 会 


el 





























if (!/\d/.test (String.fromCharCode(charCode)) && charCode > 9 && 
levent .ctrlKey)t{ 
EventUtil.preventDefault (event); 





TextboxInputFilteringExample01.htm 


经 过 最 后 一 点 修改 ， 就 可 以 确保 文本 框 的 行为 完全 正常 了 。 在 这 个 例子 的 基础 上 加 以 修改 和 调整 ， 
就 可 以 将 同样 的 技术 运用 于 放 过 和 屏蔽 任何 输入 文本 框 的 字符 。 

2. 操作 剪贴 板 

IE 是 第 一 个 支持 与 剪贴 板 相 关 事 件 ， 以 及 通过 JavaScript 访问 剪贴 板 数据 的 浏览 器 。IE 的 实现 成 为 
了 事实 上 的 标准 ,不仅 Safari 2、Chrome 和 Firefox 3 也 都 支持 类 似 的 事件 和 剪贴 板 访问 ( Opera 不 支持 
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过 JavaScript 访问 剪贴 板 ),，HTML 5 后 来 也 把 剪贴 板 事件 纳入 了 规范 。 下 列 就 是 6 个 剪贴 板 事件 。 
口 beforecopy: 在 发 生 复制 操作 前 触发 。 

口 copy: 在 发 生 复制 操作 时 触发 。 

口 beforecut: 在 发 生 剪 切 操作 前 触发 。 

口 cut: 在 发 生 剪 切 操作 时 触发 。 

口 beforepaste: 在 发 生 粘 贴 操作 前 触发 。 

口 baste: 在 发 生 粘贴 操作 时 触发 。 
1 于 没有 针对 剪贴 板 操作 的 标准 ,这 些 事件 及 相关 对 象 会 因 浏览 器 而 异 。 在 Safari Chrome 和 Firefox 
中 ，beforecopy、beforecut 和 beforepaste 事件 只 会 在 显示 针对 文本 框 的 上 下 文 菜 单 〈 预 期 将 发 
生 剪 贴 板 事件 ) 的 情况 下 触发 。 但 是 , IE 则 会 在 触发 copy、cut 和 paste 事件 之 前 先行 触发 这 些 事件 。 
至 于 copy、cut 和 paste 事件 ， 只 要 是 在 上 下 文 菜单 中 选择 了 相应 选项 , 或 者 使 用 了 相应 的 键盘 组 合 
键 ， 所 有 浏览 器 都 会 触发 它们 。 

在 实际 的 事件 发 生 之 前 , 通过 beforecopy、beforecut 和 beforepaste 事件 可 以 在 向 剪贴 板 发 
送 数据 ,或 者 从 剪贴 板 取得 数据 之 前 修改 数据 。 不 过 ,取消 这 些 事件 并 不 会 取消 对 剪贴 板 的 操作 一 一 只 
有 取消 copy、cut 和 paste 事件 ， 才 能 阻止 相应 操作 发 生 。 

要 访问 剪贴 板 中 的 数据 ， 可 以 使 用 clipboardData 对 象 : 在 下 中， 这 个 对 象 是 window 对 象 的 
属性 ; 而 在 Firefox 4+、Safari 和 Chrome 中 ， 这 个 对 象 是 相应 event 对 象 的 属性 。 但 是 ,在 Firefox、 
Safari 和 Chorme 中 , 只 有 在 处 理 剪 贴 板 事件 期 间 clipboardData 对 象 才 有 效 , 这 是 为 了 防止 对 剪贴 板 
的 未 授权 访问 ; 在 正中 ， 则 可 以 随时 访问 clipboardData 对 象 。 为 了 确保 跨 浏 览 器 兼容 性 ， 最 好 只 
在 发 生 剪贴 板 事件 期 间 使 用 这 个 对 象 。 

这 个 clipboardData 对 象 有 三 个 方法 :getData() 、setData() 和 clearData()。 其 中 ,getData () 
用 于 从 剪贴 板 中 取得 数据 , 它 接 受 一 个 参数 , 即 要 取得 的 数据 的 格式 。 在 正中 , 有 两 种 数据 格式 : "text" 
和 "URL"。 在 Firefox 、Safari 和 Chrome 中 ， 这 个 参数 是 一 种 MIME 类 型 ; 不 过 ， 可 以 用 "text" 人 代表 
"七 ext/P1Lain"o 

类 似 地 ，setData() 方 法 的 第 一 个 参数 也 是 数据 类 型 ， 第 二 个 参数 是 要 放 在 剪贴 板 中 的 文本 。 对 于 
第 一 个 参数 ，IE 照样 支持 "text" 和 "URL"， 而 Safari 和 Chrome 仍然 只 支持 MIME 类 型 。 但 是 ， 与 
getData() 方 法 不 同 的 是 , Safari 和 Chrome 的 setData() 方 法 不 能 识别 "text" 类 型 。 这 两 个 浏览 器 在 
成 功 将 文本 放 到 剪贴 板 中 后 ， 都 会 返回 true; 否则 ,返回 false。 为 了 弥合 这 些 差异 ,我 们 可 以 向 
EventUtil 中 再 添加 下 列 方法 。 


Var EventUtil = { 
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/ /省略 的 代码 


getclipboardText: function(event)t{ 
var clipboardData = (event.clipboardData || window.clipboardData); 
return clipboardData.getData("text"); 

7 


// 省 略 的 代码 
setClipboardText: function(event, value)t{ 


if (event.clipboardData)t{ 
return event.clipboardData.setData("text/plain", value); 
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} else if (window.clipboardData)t{ 
return window.clipboardData.setData("text", value); 
} 
ys 


/ /省略 的 代码 


EventUtil.js 


这 里 的 getclipboardText () 方 法 相对 简单 ; 它 只 要 确定 clipboardData 对 象 的 位 置 ， 然 后 再 
以 "text" 类 型 调用 getData() 方 法 即 可 。 相 应 地 ，setclipboardText () 方 法 则 要 稍微 复杂 一 些 。 在 
取得 clipboardData 对 象 之 后 ,需要 根据 不 同 的 浏览 器 实现 为 setData () 传 人 不 同 的 类 型 ( 对 于 Safari 
和 Chrome， 是 "text/plain"; 对 于 JIE， 是 "text" )。 

在 需要 确保 粘贴 到 文本 框 中 的 文本 中 包含 某 些 字符 , 或 者 符合 某 种 格式 要 求 时 ,能 够 访问 剪贴 板 是 非 
常 有 用 的 。 例 如 ， 如 果 一 个 文本 框 只 接受 数值 ， 那 么 就 必须 检测 粘贴 过 来 的 值 ， 以 确保 有 效 。 在 paste 
事件 中 ， 可 以 确定 剪贴 板 中 的 值 是 否 有 效 ， 如 果 无 效 ， 就 可 以 像 下 面 示例 中 那样 ， 取 消 默 认 的 行为 。 

EventUtil.addHandler (textbox, "paste", function(event)t{ 


event = EventUtil.getEvent (event); 
Var text = EventUtil.getClipboardText (event); 































































































if (!/^\d*$/.test(text))t 
EventUtil.preventDefault (event); 





} 
的， 


TextboxClipboardExample01.htm 


在 这 里 ，onpaste 事件 处 理 程序 可 以 确保 只 有 数值 才 会 被 粘贴 到 文本 框 中 。 如 果 剪 贴 板 的 值 与 正 
则 表达 式 不 匹配 ， 则 会 取消 粘贴 操作 。Firefox 、Safari 和 Chrome 只 人 允许 在 onpaste 事件 处 理 程序 中 访 
问 getData() 方 法 。 

由 于 并 非 所 有 浏览 器 都 支持 访问 剪贴 板 ， 所 以 更 简单 的 做 法 是 屏蔽 一 或 多 个 剪贴 板 操 作 。 在 支持 
copy、cut 和 paste 事件 的 浏览 器 中 (IE、Safari、Chrome 和 Firefox 3 及 更 高 版 本 )， 很 容易 阻止 这 些 
事件 的 默认 行为 。 在 Opera 中 ， 则 需要 阻止 那些 会 触发 这 些 事件 的 按键 操作 ， 同 时 还 要 阻止 在 文本 框 中 
显示 上 下 文 菜单 。 















































14.2.3 自动 切换 焦点 
使 用 JavaScript 可 以 从 多 个 方面 增强 表单 字段 的 易 用 性 。 其 中 ， 最 常见 的 一 种 方式 就 是 在 用 户 填写 
完 当 前 字段 时 ， 自 动 将 焦点 切换 到 下 一 个 字段 。 通 常 ， 在 自动 切换 焦点 之 前 ， 必 须知 道 用 户 已 经 输入 了 

















既定 长 度 的 数据 〈 例如 电话 号 码 )。 例 如 ， 美 国 的 电话 号 码 通常 会 分 为 三 部 分 : 区 号 、 局 号 和 另外 4 位 
数字 。 为 取得 完整 的 电话 号 码 ， 很 多 网 页 中 都 会 提供 下 列 3 个 文本 框 : 
<input type= "text" name="tell" id="txtTell" maxlength="3"> 


<input type="text" name="tel2" id="txtTel2" maxlength="3"> 
<input type="text" name="tel3" id="txtTel3" maxlength="4"> 





im 








TextboxTabForwardExample01.htm 
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为 增强 易 用 性 ， 同 时 加 快 数 据 输入 ， 可 以 在 前 一 个 文本 框 中 的 字符 达到 最 大 数量 后 ， 自 动 将 焦点 切 





换 到 下 一 个 文本 机 





医 。 换 名 话说， 用 户 在 第 一 个 文本 框 中 输入 了 3 个 数字 之 后 ， 











焦点 就 会 切换 到 第 二 个 文 


本 框 ， 再 输入 3 个 数字 ， 焦 点 又 会 切换 到 第 三 个 文本 框 。 这 种 “自动 切换 焦点 ”的 功能 ， 可 以 通过 下 列 


代码 实现 : 
(function()t 


function tabForward (event)t 
event EventUtil.getEvent (event); 
var target EventUtil.getTarget (event); 











if (target.value.length 
var form = target.form; 


target .maxLength)t{ 





for (var i=0, len=form.elements.length; i < len; 
if (form.elements[i] == target) { 
if (form.elements[i+1])f{ 
form.elements[i+1] .focus(); 
} 
return; 
} 
} 
} 
} 
Var textboxl] = document .getElementById("txtTell1"); 
Var textbox2 = document .getElementById("txtTel2"); 
Var textbox3 = document .getElementById("txtTel3"); 
EventUtil.addHandler (textboxl, "keyup", tabForward); 
EventUtil.addHandler (textbox2, "keyup", tabForward); 
EventUtil.addHandler (textbox3, "keyup", tabForward); 





i++) 


{ 





TextboxTabForwardExample01.htm 











与 文本 框 的 maxlength 特性 ， 可 以 确定 是 否 已 经 达到 最 大 长 度 。 如 果 这 两 个 








值 相等 〈 因为 浏览 需 最 终 





会 强制 它们 相等 ， 因 此 用 户 绝 不 会 多 输入 字符 )， 则 需要 查找 表单 字段 集合 ， 直 至 找到 下 一 个 文本 框 。 





找到 下 一 个 文本 机 











区 之 后 , 则 将 焦点 切换 到 该 文本 框 ,然后 ,我 们 把 这 个 函数 指定 为 每 个 文本 


下 的 onkeyup 








事件 处 理 程序 。 由 于 keyup 事件 会 在 用 户 输入 了 新 字符 之 后 触发 ， 所 以 此 时 是 检测 文本 框 中 内 容 长 度 





的 最 佳 时 机 。 这 样 一 来 ,用 户 在 填写 这 个 简单 的 表单 时 ， 就 不 必 再 通过 按 制 表 键 切换 表单 字段 和 提交 表 











单 了 。 





不 过 请 记 住 ， 这 些 代 码 只 适用 于 前 面 给 出 的 标记 ， 而 且 没 有 考虑 隐藏 字段 。 


14.2.4 HTML5 约束 验证 API 











为 了 在 将 表单 提交 到 服务 器 之 前 验证 数据 , HITML5 新 增 了 一 些 功 能 ,有 了 这 些 功 能 , 即便 JavaScript 
被 禁用 或 者 由 于 种 种 原因 未 能 加 载 ,， 也 可 以 确保 基本 的 验证 。 换 名 话说 ,浏览 器 自己 会 根据 标记 中 的 规 





则 执行 验证 ， 然 后 自己 显示 适当 的 错误 消息 ( 完全 不 用 JavaScript 插手 )。 当 然 ， 这 个 功能 只 有 在 支持 
HTML5 这 部 分 内 容 的 浏览 器 中 才 有 效 ， 这 些 浏览 器 有 Firefox 4+、Safari 5+、Chrome 和 Opera 10+。 
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只 有 在 某 些 情 况 下 表单 字段 才能 进行 自动 验证 。 具 体 来 说 ， 就 是 要 在 HTML 标记 中 为 特定 的 字段 
间 定 一 些 约 束 ， 然 后 浏览 器 才 会 自动 执行 表单 验证 。 

1. 必 填 字段 

第 一 种 情况 是 在 表单 字段 中 指定 了 requireg 属性 ， 如 下 面 的 例子 所 示 : 











<input type= "text" name="username" required> 





任何 标注 有 *eauired 的 字段 , 在 提交 表单 时 都 不 能 空 着 。 这 个 属性 适用 于 <input>、<textarea> 
和 <select> 字 段 (Opera 11 及 之 前 版 本 还 不 支持 <select> 的 required 属性 ), 在 JavaScript 中 , 通过 
对 应 的 required 属性 ， 可 以 检查 某 个 表单 字段 是 否 为 必 填 字段 。 














Var isUsernameRequired = dqocument .forms [0] .elements["username"] .required; 


另外 ， 使 用 下 面 这 行 代码 可 以 测试 浏览 器 是 否 支持 required 属性 。 























Var isRequiredSupported = "required" in document.createElement ("input"); 





以 上 代码 通过 特性 检测 来 确定 新 创建 的 <input> 元 素 中 是 否 存 在 required 属性 。 
对 于 空 着 的 必 填 字段 ,不 同 浏览 占有 不 同 的 处 理 方 式 。Firefox 4 和 Opera 11 会 阻止 表单 提交 并 在 相 
应 字段 下 方 弹出 帮助 框 ， 而 Safari (5 之前) 和 Chrome (9 之 前 ) 则 什么 也 不 做 ， 而 且 也 不 阻止 表单 提 














2. 其 他 输入 类 型 

HTML5 为 <input> 元 素 的 type 属 属性 又 增加 了 几 个 值 。 这 些 新 的 类 型 不 仅 能 反映 数据 类 型 的 信息 ， 
而 且 还 能 提供 一 些 默认 的 验证 功能 。 其 中 ，"emai1l" 和 "ur1" 是 两 个 得 到 支持 最 多 的 类 型 ， 各 浏览 器 也 
都 为 它们 增加 了 定制 的 验证 机 制 。 例 如 : 




















<input type="email" name ="email"> 

<input type="url" name="homepage"> 

顾名思义 ，"email" 类 型 要 求 输入 的 文本 必须 符合 电子 邮件 地 址 的 模式 ， 而 "ur1" 类 型 要 求 输入 的 
文本 必须 符合 URL 的 模式 。 不 过 ， 本 节 前 面 提 到 的 浏览 器 在 恰当 地 匹配 模式 方面 都 存在 问题 。 最 明显 
的 是 "-e- "会 被 当成 一 个 有 效 的 电子 邮件 地 址 。 浏 览 器 开发 商 还 在 解决 这 些 问 题 。 

要 检测 浏览 器 是 否 支持 这 些 新 类 型 ， 可 以 在 JavaScript 创建 一 个 <input> 元 素 ， 然 后 将 type 属性 
设置 为 "emai1" 或 "url"， 最 后 再 检测 这 个 属 性 的 值 。 不 支持 它们 的 旧版 本 浏览 器 会 自动 将 未 知 的 值 设 
置 为 "text"， 而 支持 的 浏览 器 则 会 返回 正确 的 值 。 例 如 : 






































Var input = document.createElement ("input"); 
input.type = "email"; 


Var isEmailSupported = (input.type == "email"); 


要 注意 的 是 , 如 果 不 给 <ijnput> 元 素 设置 required 属性 , 那么 空 文本 框 也 会 验证 通过 。 另 一 方面 ， 
设置 特定 的 输入 类 型 并 不 能 阻止 用 户 输入 无 效 的 值 ， 只 是 应 用 某 些 默认 的 验证 而 已 。 

3. 数值 范围 

除了 "email" 和 "url"，HTML5 还 定义 了 另外 几 个 输入 元 素 。 这 几 个 元 素 都 要 求 填 写 某 种 基于 数 
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字 的 值 : "number"、 "range"、"datetime"、"datetime-local"、"date"、"month"、"week",， 
还 有 "time"。 浏 览 吉 对 这 几 个 类 型 的 支持 情况 并 不 好 ， 因 此 如 果真 想 选 用 的 话 ， 要 特别 小 心 。 目 前 ， 
浏览 器 开发 商 主要 关注 更 好 的 跨 平 台 兼 容 性 以 及 更 多 的 逻辑 功能 。 因 此 , 本 节 介 绍 的 内 容 某 种 程度 上 有 
些 超 前 ， 不 一 定 马上 就 能 在 实际 开发 中 使 用 。 

对 所 有 这 些 数 值 类 型 的 输入 元 素 , 可 以 指定 min 属性 ( 最 小 的 可 能 值 )、max 属性 ( 最 大 的 可 能 值 ) 
和 step 属性 (从 min 到 max 的 两 个 刻度 间 的 差 值 )。 例如， 想 让 用 户 只 能 输入 0 到 100 的 值 ， 而 且 这 
个 值 必须 是 5 的 倍数 ， 可 以 这 样 写 代码 : 

<input type="number" min="0" max="100" step="5" name="count"> 

在 不 同 的 浏览 器 中 ， 可 能 会 也 可 能 不 会 看 到 能 够 自动 递增 和 递减 的 数值 调节 按钮 (向 上 和 向 下 按 
钮 )。 

以 上 这 些 属性 在 JavaScript 中 都 能 通过 对 应 的 元 素 访问 (或 修改 ) 此 外 , 还 有 两 个 方法 : stepUp () 
和 stepDown () ， 都 接收 一 个 可 选 的 参数 : 要 在 当前 值 基础 上 加 上 或 减 去 的 数值 。( 默认 是 加 或 减 1。) 
这 两 个 方法 还 没有 得 到 任何 浏览 器 支持 ， 但 下 面 的 例子 演示 了 它们 的 用 法 。 












































input .stepUp () ; // 和 1 
input.stepUp (5); // 加 5 
input .stepDown (); // 减 1 
input.stepDown(10); // 减 10 
4. 输入 模式 











HTML5 为 文本 字段 新 增 了 pattern 属性 。 这 个 属性 的 值 是 一 个 正则 表达 式 , 用 于 匹配 文本 框 中 的 
例如 ,如果 只 想 允 许 在 文本 字段 中 输入 数值 ， 可 以 像 下 面 的 代码 一 样 应 用 约束 : 











区 


<input type="text" pattern="\d+" name="count"> 


注意 ,模式 的 开头 和 末尾 不 用 加 ^ 和 $ 符 号 (假定 已 经 有 了 )。 这 两 个 符号 表示 输入 的 值 必须 从 头 到 
尾 都 与 模式 匹配 。 

与 其 他 输入 类 型 相似 ， 指 定 pattern 也 不 能 阻止 用 户 输入 无 效 的 文本 。 这 个 模式 应 用 给 值 ， 浏 览 
器 来 判断 值 是 有 效 ， 还 是 无 效 。 在 JavaScript 中 可 以 通过 pattern 属性 访问 模式 。 

Var pattern = dqocument .forms [0] .elements["count"] .pattern; 

使 用 以 下 代码 可 以 检测 浏览 器 是 否 支 持 Pattern 属性 。 

Var isPatternSupported = "pattern" in document.createElement ("input"); 

5. 检测 有 效 性 

使 用 checkvaliaity() 方 法 可 以 检测 表单 中 的 某 个 字段 是 否 有 效 。 所 有 表单 字段 都 有 个 方法 ， 如 
果 字 段 的 值 有 效 ， 这 个 方法 返回 true， 否 则 返回 false。 字 段 的 值 是 否 有 效 的 判断 依据 是 本 节 前 面 介 
绍 过 的 那些 约束 。 换 名 话说 ， 必 填 字 段 中 如 果 没 有 值 就 是 无 效 的 ， 而 字段 中 的 值 与 pattern 属性 不 匹 
配 也 是 无 效 的 。 例 如 : 

if (document.forms[0] .elements[0] .checkValidity())t 

// 字 段 有 效 ， 继 续 


} else { 
/ /字段 无 效 





















































} 
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要 检测 整个 表单 是 否 有 效 ， 可 以 在 表单 自身 调用 checkvaliaity() 方 法 。 如 果 所 有 表单 字段 都 有 





效 ， 这 个 方法 返回 true; 即使 有 一 个 字段 无 效 ， 这 个 方法 也 会 返回 false。 





if(document.forms[0] .checkVvalidity())t{ 
/ /表单 有 效 ， 继 续 

} else { 
/ /表单 无 效 

站 


与 checkValidity() 方 法 简单 地 告诉 你 字段 是 否 有 效 相 比 ，validity 属性 则 会 告诉 你 为 什么 字 























段 有 效 或 无 效 。 这 个 对 象 中 包含 一 系列 属性 ， 每 个 属性 会 返回 一 个 布尔 值 。 





口 customError : 如 果 设 置 了 setcustomvalidity() ， 则 为 txzue， 和 否则 返回 false。 

口 patternMismatch: 如 果 值 与 指定 的 pattern 属性 不 匹配 ， 返 回 true。 

口 rangeOverflow: 如 果 值 比 max 值 大 ,返回 true。 

口 rangeUnderflow: 如 果 值 比 min 值 小 , 返回 true。 

口 stepMisMatch: 如 果 min 和 max 之 间 的 步 长 值 不 合理 ， 返 回 true。 

口 tooLong: 如 果 值 的 长 度 超过 了 maxlength 属性 指定 的 长 度 , 返回 true。 有 的 浏览 器 ( 如 Firefox 4 ) 
会 自动 约束 字符 数量 ， 因 此 这 个 值 可 能 永远 都 返回 false。 

口 typeMismatch: 如 果 值 不 是 "mail1" 或 "ur1" 要 求 的 格式 ， 返 回 true。 

口 valid: 如 果 这 里 的 其 他 属性 都 是 false， 返 回 true。checkvValidity() 也 要 求 相同 的 值 。 

口 valueMissing: 如 果 标 注 为 equired 的 字段 中 没有 值 ， 返 回 true。 

因此 , 要 想得到 更 具体 的 信息 , 就 应 该 使 用 validity 属性 来 检测 表单 的 有 效 性 。 下面 是 一 个 例子 。 



































































































































if (input.validity && !input.validity.valid)t{ 
if (input.validity.valueMissing)t{ 
alert ("Please specify a value.") 
} else if (input.validity.typeMismatch)t{ 
alert ("Please enter an email address."); 
} else { 
alert ("Value is invalid."); 
} 
} 


6. 禁用 验证 
通过 设置 novaliaate 属性 ， 可 以 告诉 表单 不 进行 验证 。 
<form method="post" action="signup.php" novalidate> 


<!-- 这 里 插入 表单 元 素 --> 


</form> 


在 JavaScript 中 使 用 novalidate 属性 可 以 取得 或 设置 这 个 值 ， 如 果 这 个 属性 存在 ， 值 为 true， 

















如 果 不 存在 ， 值 为 false。 





dqocument .forms [0] .noValidate = true; // 禁 用 验证 


如 果 一 个 表单 中 有 多 个 提交 按钮 , 为 了 指定 点 击 某 个 提交 按钮 不 必 验 证 表单 ， 可 以 在 相应 的 按钮 上 























添加 formovalidate 属性 。 


<form method="post" action="foo.php"> 
<!-- 这 里 质 入 表单 元 素 --> 
<input type="submit" value="Regular Submit"> 
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<input type="submit" formnovalidate name="btnNoValidate" 
value="Non-validating Submit"> 
</form> 


在 这 个 例子 中 ,点 击 第 一 个 提交 按钮 会 像 往 常 一 样 验证 表单 ， 而 点 击 第 二 个 按钮 则 会 不 经 过 验证 而 
提交 表单 。 使 用 JavaScript 也 可 以 设置 这 个 属性 。 


// 禁 用 验证 
document . forms [0] .elements["btnNoValidate"] .formNoValidate = true; 














14.3 ”选择 框 脚本 


选择 框 是 通过 <select> 和 和 <option> 元 素 创建 的 。 为 了 方便 与 这 个 控件 交互 , 除了 所 有 表单 字段 共 
有 的 属性 和 方法 外 ，HTMLSelectElement 类 型 还 提供 了 下 列 属性 和 方法 。 
口 add (newOption，relQption) : 向 控件 中 插入 新 <option> 元 素 ， 其 位 置 在 相关 项 ( reloption ) 
之 前 。 
口 multiple: 布尔 值 ， 表 示 是 否 允许 多 项 选择 ; 等 价 于 HTML 中 的 multiple 特性 。 
口 options: 控件 中 所 有 <option> 元 素 的 HTMLCollection。 
口 remove (index) : 移 除 给 定位 置 的 选项 。 
口 selectedIndex: 基于 0 的 选中 项 的 索引 , 如 果 没 有 选中 项 , 则 值 为 -1。 对 于 支持 多 选 的 控件 ， 
只 保存 选中 项 中 第 一 项 的 索引 。 
口 size: 选择 框 中 可 见 的 行 数 ; 等 价 于 HTML 中 的 size 特性 。 
选择 框 的 type 属性 不 是 "select-one"， 就 是 "select-multiple"， 这 取决 于 HTML 代码 中 有 
没有 multiple 特性 。 选 择 框 的 value 属性 由 当前 选中 项 决定 ， 相 应 规则 如 下 。 
口 如 果 没 有 选中 的 项 ， 则 选择 框 的 value 属性 保存 空 字符 串 。 
口 如 果 有 一 个 选中 项 ， 而 且 该 项 的 value 特性 已 经 在 HTML 中 指定 ， 则 选择 框 的 value 属性 等 
于 选中 项 的 value 特性 。 即 使 value 特性 的 值 是 空 字符 串 ， 也 同样 遵循 此 条 规则 。 
口 如 果 有 一 个 选中 项 ， 但 该 项 的 value 特性 在 HTML 中 未 指定 ， 则 选择 框 的 value 属性 等 于 该 
项 的 文本 。 
口 如 果 有 多 个 选中 项 ， 则 选择 框 的 value 属性 将 依据 前 两 条 规则 取得 第 一 个 选中 项 的 值 。 
以 下 面 的 选择 框 为 例 : 
<select name="location" id="selLocation"> 
<option value="Sunnyvale, CA">Sunnyvale</option> 
<option value="Los Angeles, CA">Los Angeles</option> 
<option value="Mountain View, CA">Mountain View</option> 
<option value="">China</option> 


<option>Australia</option> 
</select> 


如 果 用 户 选 择 了 其 中 第 一 项 ， 则 选择 框 的 值 就 是 "sunnyvale，CA"。 如 果 文 本 为 "china" 的 选项 
被 选中 ， 则 选择 框 的 值 就 是 一 个 空 字 符 串 ， 因 为 其 value 特性 是 空 的 。 如 果 选 择 了 最 后 一 项 ， 那 么 由 
于 <option> 中 没有 指定 value 特性 ， 则 选择 框 的 值 就 是 "Australia"。 

在 DOM 中 ， 每 个 <option> 元 素 都 有 一 个 HTMLOptionElement 对 象 表示 。 为 便于 访问 数据 ， 
HTMLOptionElement 对 象 添加 了 下 列 属性 : 















































TT 



































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


432 第 14 章 表单 脚本 





口 index: 当前 选项 在 options 集合 中 的 索引 。 

口 1abel: 当前 选项 的 标签 ; 等 价 于 HTML 中 的 label 特性 。 
口 selected: 布尔 值 ， 表 示 当 前 选项 是 否 被 选中 。 将 这 个 属性 设置 为 true 可 以 选中 当前 选项 。 
口 text: 选项 的 文本 。 

口 value: 选项 的 值 ( 等 价 于 HTML 中 的 value 特性 )。 

其 中 大 部 分 属性 的 目的 ， 都 是 为 了 方便 对 选项 数据 的 访问 。 虽 然 也 可 以 使 用 常规 的 DOM 功能 来 访 
问 这 些 信息 ， 但 效率 是 比较 低 的 ， 如 下 面 的 例子 所 示 : 


Var selectbox = dqocument .forms [0] .elements["location"]; 





























/ /不 推荐 
var text = selectbox.options[0] .firstChild.nodeVvalue; // 选 项 的 文本 
var value = selectbox.options [0] .getAttribute("value"); // 选 项 的 值 





以 上 代码 使 用 标准 DOM 方法 ， 取 得 了 选择 框 中 第 一 项 的 文本 和 值 。 可 以 与 下 面 使 用 选项 属性 的 代 
码 作 一 比较 : 


Var Selectbox = document.forms[0]. elements["location"]; 


1/ 推荐 
var text = selectbox.options[0] .text; // 选 项 的 文本 
var value = selectbox.options[0] .value; // 选 项 的 值 

















在 操作 选项 时 , 我们 建议 最 好 是 使 用 特定 于 选项 的 属性 ， 因 为 所 有 浏览 器 都 支持 这 些 属性 。 在 将 表 
单 控件 作为 DOM 节点 的 情况 下 ， 实 际 的 交互 方式 则 会 因 浏 览 器 而 异 。 我 们 不 推荐 使 用 标准 DOM 技术 
修改 <option> 元 素 的 文本 或 者 值 。 

最 后 ， 我 们 还 想 提 醒 读 者 注意 一 点 : 选择 框 的 change 事件 与 其 他 表单 字段 的 change 事件 触发 的 
条 件 不 一 样 。 其 他 表单 字段 的 change 事件 是 在 值 被 修改 且 焦点 离开 当前 字段 时 触发 ， 而 选择 框 的 
change 事件 只 要 选中 了 选项 就 会 触发 。 







































不 同 浏览 器 下 ， 选 项 的 value 属性 返回 什么 值 也 存在 差别 。 人 但是， 在 所 有 浏览 
器 中 ，value 属性 始终 等 于 value 特性 。 在 未 指定 value 特性 的 情况 下 ，IE8 会 返 
空 字 符 串 ， 而 IE9+、Safari、Firefox、Chrome 和 Opera 则 会 返回 与 text 特性 相同 
的 值 。 


14.3.1 选择 选项 


对 于 只 人 允许 选择 一 项 的 选择 框 ,访问 选中 项 的 最 简单 方式 ， 就 是 使 用 选择 框 的 selectedIndex 
如 下 面 的 例子 所 示 : 

var selectedOption = selectbox.options[selectbox.selectedIndex]; 

取得 选中 项 之 后 ， 可 以 像 下 面 这 样 显 示 该 选项 的 信息 : 


Var SelectedIndex = selectbox.selectedindex; 

var selectedOption = Selectbox.options [selectedqIndex] ; 

alert ("Selected index: " + SelectedIndex + "\nSelected text: "+ 
selectedOption.text + "\nSelected value: " + selectedOption.value); 
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这 里 ， 我 们 通过 一 个 警告 框 显 示 了 选中 项 的 索引 、 文 本 和 值 。 

对 于 可 以 选择 多 项 的 选择 框 ，selectedfIndex 属性 就 好 像 只 允许 选择 一 项 一 样 。 设 置 
selectedIndex 会 导致 取消 以 前 的 所 有 选项 并 选择 指定 的 那 一 项 ， 而 读 取 selectedIndex 则 只 会 ; 
回 选中 项 中 第 一 项 的 索引 值 。 

另 一 种 选择 选项 的 方式 ， 就 是 取得 对 某 一 项 的 引用 , 然后 将 其 selected 属性 设置 为 true。 例 如 ， 
下 面 的 代码 会 选中 选择 框 中 的 第 一 项 : 

selectbox.options [0] .selected = true; 

与 selectedIndex 不 同 ， 在 允许 多 选 的 选择 框 中 设置 选项 的 selected 属性 ， 不 会 取消 对 其 他 选中 项 
的 选择 ， 因 而 可 以 动态 选中 任意 多 个 项 。 但 是 ， 如 果 是 在 单 选 选 择 框 中 ， 修 改 某 个 选项 的 selected 属性 则 
会 取消 对 其 他 选项 的 选择 。 需 要 注意 的 是 ， 将 selected 属性 设置 为 false 对 单 选 选择 框 没 有 影响 。 

实际 上 ，selected 属性 的 作用 主要 是 确定 用 户 选择 了 选择 框 中 的 哪 一 项 。 要 取得 所 有 选中 的 项 ， 
可 以 循环 遍历 选项 集合 ， 然 后 测试 每 个 选项 的 selected 属性 。 来 看 下 面 的 例子 。 










































































function getSelectedOptions (selectbox){ 
Var result = new Array(); 
var option = null; 


for (var i=0, len=selectbox.options.length; i < len; i++)f{ 
option = selectbox.options[i]; 
if (option.selected)t{ 
result.push (option); 
} 
} 


return result; 


SelectboxExample03.htm 
这 个 函数 可 以 返回 给 定 选择 框 中 选中 项 的 一 个 数组 。 首先, 创建 一 个 将 包含 选中 项 的 数组 ,然后 使 
用 for 循环 旬 代 所 有 选项 ， 同 时 检测 每 一 项 的 selecteq 属性 。 如 果 有 选项 被 选中 ， 则 将 其 添加 到 


result 数组 中 。 最 后 ， 返 回 包含 选中 项 的 数组 。 下 面 是 一 个 使 用 getselectedqoptions () 函数 取得 
选中 项 的 示例 。 









































var selectbox = document.getElementById("selLocation"); 
C9 Var selectedOptions = getSelectedOptions (selectbox); 
Var message = "" 


for (var i=0, len=selectedOptions.length; i < len; i++)f{ 


message += "Selected index: " + selectedOptions[i].index + 
"\nSelected text: " + selectedOptions[i].text + 
"\nSelected value: " + selectedOptions[i].value + "\n\n"; 


} 
alert (message); 
SelectboxExample03.htm 
在 这 个 例子 中 , 我 们 首先 从 一 个 选择 框 中 取得 了 选中 项 。 然 后 , 使 用 for 循环 构建 了 一 条 消息 , 包 
含 所 有 选中 项 的 信息 : 每 一 项 的 索引 、 文 本 和 值 。 这 种 技术 适用 于 单 选 和 多 选 选择 框 


声 o 
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14.3.2 ”添加 选项 


可 以 使 用 JavaScript 动态 创建 选项 ， 并 将 它们 添加 到 选择 框 中 。 添 加 选项 的 方式 有 很 多 ， 第 一 种 方 
式 就 是 使 用 如 下 所 示 的 DOM 方法 。 
Var newOption = document.createElement ("option"); 


newOption.appendChild(document.createTextNode ("Option text")); 
newOption.setAttribute("value", "Option value"); 











selectbox.appendChild (newOption); 
SelectboxExample04.htm 


以 上 代码 创建 了 一 个 新 的 <option> 元 素 ， 然 后 为 它 添加 了 一 个 文本 节点 ， 并 设置 其 value 特性 ， 
最 后 将 它 添加 到 了 选择 框 中 。 添 加 到 选择 框 之 后 ， 用 户 立 即 就 可 以 看 到 新 选项 。 

第 二 种 方式 是 使 用 option 构造 函数 来 创建 新 选项 , 这 个 构造 函数 是 DOM 出 现 之 前 就 有 的 , 一 
直 遗 留 到 现在 。option 构造 函数 接受 两 个 参数 : 文本 ( text ) 和 值 (value ); 第 二 个 参数 可 选 。 
虽然 这 个 构造 函数 会 创建 一 个 object 的 实例 ， 但 兼容 DOM 的 浏览 器 会 返回 一 个 <option> 元 素 。 
换 句 话说 , 在 这 种 情况 下 , 我 们 仍然 可 以 使 用 appenachild() 将 新 选项 添加 到 选择 框 中 。 来 看 下 面 
的 例子 。 


Var newOption = new Option("Option text", "Option value"); 
selectbox.appendChild (newOoption); // 在 IE8 及 之 前 版 本 中 有 问题 






































SelectboxExample08.htm 


这 种 方式 在 除 下 之 外 的 浏览 器 中 都 可 以 使 用 。 由 于 存在 bug， 下 在 这 种 方式 下 不 能 正确 设置 新 选 
项 的 文本 。 

第 三 种 添加 新 选项 的 方式 是 使 用 选择 框 的 aaa () 方 法 。DOM 规定 这 个 方法 接受 两 个 参数 : 要 添加 
的 新 选项 和 将 位 于 新 选项 之 后 的 选项 。 如 果 想 在 列表 的 最 后 添加 一 个 选项 ， 应 该 将 第 二 个 参数 设置 为 
null。 在 了 正 对 aqaq() 方 法 的 实现 中 ， 第 二 个 参数 是 可 选 的 ， 而 且 如 果 指 定 ， 该 参数 必须 是 新 选项 之 后 
选项 的 索引 。 兼 容 DOM 的 浏览 器 要 求 必须 指定 第 二 个 参数 ， 因 此 要 想 编 写 跨 浏 览 需 的 代码 ， 就 不 能 只 
传人 一 个 参数 。 这 时 候 ， 为 第 二 个 参数 传人 unaefined， 就 可 以 在 所 有 浏览 器 中 都 将 新 选项 插入 到 列 
表 最 后 了 。 来 看 一 个 例子 。 


CD Var newOption = new Option("Option text", "Option value"); 


























selectbox.add (newOption，undefined); // 最 佳 方案 
A a NA 
笑 新 选项 添加 到 其 他 位 置 ( 不 





在 正和 兼容 DOM 的 浏览 器 中 ,上 面 的 代码 都 可 以 正常 使 用 ,如 果 你 想 * 
是 最 后 一 个 )， 就 应 该 使 用 标准 的 DOM 技术 和 insertBefore () 方 法 。 








就 和 在 HTML 中 一 样 ， 此 时 也 不 一 定 要 为 选项 指定 值 。 换 和 名 话说， 只 为 option 


构造 函数 传 入 一 个 参数 ( 选项 的 文本 ) 也 没有 问题 。 
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14.3.3” 移 除 选项 


与 添加 选项 类 似 ， 移 除 选项 的 方式 也 有 很 多 种 。 首 先 ， 可 以 使 用 DOM 的 removechild() 方 法 ， 








为 其 传人 要 移 除 的 选项 ， 如 下 面 的 例子 所 示 : 


selectbox .removechild(selectbox.options[0]) ; // 移 除 第 一 个 选项 








的 例子 所 示 : 


selectbox.remove (0); 


其 次 ， 可 以 使 用 选择 框 的 remove () 方 法 。 这 个 方法 接受 一 个 参数 ， 即 要 移 除 选项 的 索引 ， 如 下 面 


// 移 除 第 一 个 选项 





最 后 一 种 方式 ， 就 是 将 相应 选项 设置 为 nul11。 这 种 方式 也 是 DOM 出 现 之 前 浏览 器 的 遗留 机 制 。 


例如 : 


selectbox.options[0] 


= null; // 移 除 第 一 个 选项 


要 清除 选择 框 中 所 有 的 项 ， 需 要 迭代 所 有 选项 并 逐个 移 除 它们 ， 如 下 面 的 例子 所 示 : 


function clearSelectbox(selectbox){ 
for(var i=0, len=selectbox.options.length; i < len; i++){ 
selectbox.remove (i); 





} 
} 


这 个 函数 每 次 只 移 除 选择 框 中 的 第 一 个 选项 。 由 于 移 除 第 一 个 选项 后 ,， 所 有 后 续 选 项 都 会 自动 向 上 
移动 一 个 位 置 ， 因 此 重复 移 除 第 一 个 选项 就 可 以 移 除 所 有 选项 了 。 


14.3.4 ”移动 和 重 排 选项 


在 DOM 标准 出 现 之 前 ， 

















将 一 个 选择 框 中 的 选项 移动 到 为 一 个 选择 框 中 是 非常 床 烦 的 。 整 个 过 程 要 








涉及 从 第 一 个 选择 框 中 移 除 选项 , 然后 以 相同 的 文本 和 值 创建 新 选项 , 最 后 再 将 新 选项 添加 到 第 二 个 选 





择 框 中 。 而 使 用 DOM 的 ap 








父 节 点 中 移 除 它 , 再 把 它 添 力 
第 二 个 选择 框 中 的 过 程 。 


var selectboxl 
var selectbox2 





pendchild() 方 法 ， 就 可 以 将 第 一 个 选择 框 中 的 选项 直接 移动 到 第 二 个 选 








择 框 中 。 我 们 知道 ， 如 果 为 appendchila() 方 法 传人 一 个 文档 中 已 有 的 元 素 ， 那 么 就 会 先 从 该 元 素 的 





[到 指定 的 位 置 。 下 面 的 代码 展示 了 将 第 一 个 选择 框 中 的 第 一 个 选项 移动 到 








document .getElementById("selLocations1" ) ; 
document .getElementById("selLocations2"); 








selectbox2.appendChild(selectboxl.options[0]); 


SelectboxExample05.htm 


移动 选项 与 移 除 选项 有 一 个 共同 之 处 ， 即 会 重 置 每 一 个 选项 的 index 属性 。 
重 排 选 项 次 序 的 过 程 也 十 分 类 似 ， 最 好 的 方式 仍然 是 使 用 DOM 方法 。 要 将 选择 框 中 的 某 一 项 移动 
到 特定 位 置 ， 最 合适 的 DOM 方法 就 是 insertBefore(); appendChi1ld() 方 法 只 适用 于 将 选项 添加 








到 选择 框 的 最 后 。 要 在 选择 











E 中 向 前 移动 一 个 选项 的 位 置 ， 可 以 使 用 以 下 代码 : 








Var optionToMove = selectbox.options[1]; 
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); 


SelectboxExample06.htm 
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以 上 代码 首先 选择 了 要 移动 的 选项 ,然后 将 其 插入 到 了 排 在 它 前 面 的 选项 之 前 。 实 际 上 , 第 二 行 代 
码 对 除 第 一 个 选项 之 外 的 其 他 选项 是 通用 的 。 类似 地 ,可 以 使 用 下 列 代码 将 选择 框 中 的 选项 向 后 移动 一 
个 位 置 。 

var optionToMove = selectbox.options[1]; 

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index+2]); 














SelectboxExample06.htm 





以 上 代码 适用 于 选择 框 中 的 所 有 选项 ， 包 括 最 后 一 个 选项 。 





IE7 存在 一 个 页 面 重 绘 问题 ， 有 时 候 会 导致 使 用 DOM 方法 重 排 的 选项 不 能 马上 


正确 显示 。 


14.4 ”表单 序列 化 


随 着 Ajax 的 出 现 ， 表单 序列 化 已 经 成 为 一 种 常见 需求 (第 21 章 将 讨论 Ajax )。 在 JavaScript 中 ,可 
以 利用 表单 字段 的 type 属性 ， 连 同 name 和 value 属性 一 起 实现 对 表单 的 序列 化 。 在 编写 代码 之 前 ， 
有 必须 先 搞 清楚 在 表单 提交 期 间 ， 浏 览 器 是 怎样 将 数据 发 送 给 服务 器 的 。 
口 对 表单 字段 的 名 称 和 值 进行 URL 编码 ， 使 用 和 号 ( & ) 分 隔 。 
口 不 发 送 禁 用 的 表单 字段 。 
口 只 发 送 色 选 的 复 选 框 和 单 选 按钮 。 
口 不 发 送 type 为 "reset" 和 "button" 的 按钮 。 
口 多 选 选择 框 中 的 每 个 选中 的 值 单独 一 个 条 目 。 
口 在 单 击 提交 按钮 提交 表单 的 情况 下 ， 也 会 发 送 提交 按钮 ; 和 否则， 不 发 送 提交 按钮 。 也 包括 type 
为 "image" 的 <input> 元 素 。 
口 <select> 元 素 的 值 ， 就 是 选中 的 <option> 元 素 的 value 特性 的 值 。 如 果 <option> 元 素 没有 
value 特性 ， 则 是 <option> 元 素 的 文本 值 。 
在 表单 序列 化 过 程 中 ， 一 般 不 包含 任何 按钮 字段 ， 因 为 结果 字符 串 很 可 能 是 通过 其 他 方式 提交 的 。 
除 此 之 外 的 其 他 上 述 规则 都 应 该 遵循 。 以 下 就 是 实现 表单 序列 化 的 代码 。 
function serialize(form)f{ 
CC) var parts = [], 
field = HULL 
3 
optLen, 


option, 
optValue; 
























































for (i=0, len=form.elements.length; i < len; i++){ 
field = form.elements[i]; 


switch(field.type)t{ 


case "select-one": 
case "select-multiple": 


if (field.name.length)t 
for (j=0, optLen = field.options.length; j < optLen; j++){ 
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option = field.options[j]; 
if (option.selected)t 
optValue = ""; 
if (option.hasAttribute)t 
optValue = (option.hasAttribute("value") ? 


option.value : option.text); 





} else { 
optValue = (option.attributes["value'"] .specified ? 
option.value : option.text); 
小 
Darts.Dpush(encodeURIComponent (field.name) + "=" + 
encodeURIComponent (optValue)); 
} 
站 
} 
break; 
case undefined: / /字段 集 
case "file": / /文件 输入 
case "submit": / /提交 按 鱼 
case "reset": // 重 置 按钮 
case "button": // 自 定义 按钮 
break; 
case "radio": // 单 选 按钮 
case "checkbox": // 复 选 框 
if (!field.checked){ 
break; 


} 
/* 执行 默认 操作 */ 
default: 
// 不 包含 没有 名 字 的 表单 字段 
if (field.name.length)t 
parts.push(encodeURIComponent (field.name) + "=" + 
encodeURIComponent (field.value)); 


} 
} 


return parts.join("&"); 


FormSerializationExample01.htm 


上 面 这 个 serialize() 清 数 首 先 定 义 了 一 个 名 为 parts 的 数组 ， 用 于 保存 将 要 创建 的 字符 串 的 各 
个 部 分 。 然 后 ， 通 过 for 循环 迭代 每 个 表单 字段 ， 并 将 其 保存 在 fiela 变量 中 。 在 获得 了 一 个 字段 的 
引用 之 后 ,使 用 switch 语句 检测 其 type 属性 。 序 列 化 过 程 中 最 麻烦 的 就 是 <select> 元 素 ， 它 可 能 
是 单 选 框 也 可 能 是 多 选 框 。 为 此 ， 需 要 遍历 控件 中 的 每 一 个 选项 ,并 在 相应 选项 被 选中 的 情况 下 向 数组 
中 添加 一 个 值 。 对 于 单 选 框 ， 只 可 能 有 一 个 选中 项 ， 而 多 选 框 则 可 能 有 零 或 多 个 选中 项 。 这 里 的 代码 适 
用 于 这 两 种 选择 框 ， 至 于 可 选项 的 数量 则 是 由 浏览 器 控制 的 。 在 找到 一 个 选中 项 之 后 ， 需 要 确定 使 用 什 
么 值 。 如 果 不 存 在 value 特性 ， 或 者 虽然 存在 该 特性 ， 但 值 为 空 字符 串 ， 都 要 使 用 选项 的 文本 来 代替 。 
为 检查 这 个 特性 ， 在 DOM 兼容 的 浏览 器 中 需要 使 用 hasAttribute() 方 法 ， 而 在 正 中 需要 使 用 特性 
的 specified 属性 。 

如 果 表 单 中 包含 <fieldqset> 元 素 , 则 该 元 素 会 出 现在 元 素 集合 中 , 但 没有 type 属性 。 因此 , 如 果 type 
属性 未 定义 ， 则 不 需要 对 其 进行 序列 化 。 同 样 ， 对 于 各 种 按钮 以 及 文件 输入 字段 也 是 如 此 (文件 输入 字段 在 
表单 提交 过 程 中 包含 文件 的 内 容 ; 但 是 ， 这 个 字段 是 无 法 模仿 的 ， 序 列 化 时 一 般 都 要 忽略 )。 对 于 单 选 按钮 
和 复 选 框 ， 要 检查 其 cnecked 属性 是 否 被 设置 为 false， 如 果 是 则 退出 switch 语句 。 如 果 checked 属性 
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为 true， 则 继续 执行 default 语句 ,即将 当前 字段 的 名 称 和 值 进行 编码 ,然后 添加 到 parts 数组 中 。 函 数 
的 最 后 一 步 ， 就 是 使 用 join () 格 式 化 整个 字符 串 ， 也 就 是 用 和 号 来 分 隔 每 一 个 表单 字段 。 

最 后 ,serialize() 困 数 会 以 查询 字符 串 的 格式 输出 序列 化 之 后 的 字符 串 。 当 然 ,要 序列 化 成 其 他 
格式 ， 也 不 是 什么 困难 的 事 。 


14.5 ” 富 文 本 编辑 


富 文本 编辑 ， 又 称 为 WYSIWYG (What You See Is What You Get， 所 见 即 所 得 )。 在 网 页 中 编辑 富 
文本 内 容 ， 是 人 们 对 Web 应 用 程序 最 大 的 期 待 之 一 。 虽 然 也 没有 规范 ,但 在 正 最 早 引 入 的 这 一 功能 基 
础 上 , 已 经 出 现 了 事实 标准 。 而 且 ，Opera、Safari、Chrome 和 Firefox 都 已 经 支持 这 一 功能 。 这 一 技术 
的 本 质 , 就 是 在 页 面 中 艇 入 一 个 包含 空 HTML 页 面 的 iframe。 通过 设置 designMode 属性 , 这 个 空 
的 HTML 页 面 可 以 被 编辑 ， 而 编辑 对 象 则 是 该 页 面 <pody> 元 素 的 HTML 代码 。designMode 属性 有 两 
个 可 能 的 值 : "off" (默认 值 ) 和 "on"。 在 设置 为 "on" 时 ， 整 个 文档 都 会 变 得 可 以 编辑 ( 显示 插入 符 
号 )， 然 后 就 可 以 像 使 用 字 处 理 软件 一 样 ， 通 过 键盘 将 文本 内 容 加 粗 、 变 成 斜体 ， 等 等 。 

可 以 给 iframe 指定 一 个 非常 简单 的 HTML 页 面 作为 其 内 容 来 源 。 例 如 : 

<!DOCTYPE html> 

<html> 

<head> 

<title>Blank Page for Rich Text Editing</title> 
</head> 
<body> 


</body> 
</html> 
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这 个 页 面 在 iframe 中 可 以 像 其 他 页 面 一 样 被 加 载 。 要 让 它 可 以 编辑 , 必须 要 将 designMode 设置 
为 "on", 但 只 有 在 页 面 完 全 加 载 之 后 才能 设置 这 个 属性 。 因 此 , 在 包含 页 面 中 , 需要 使 用 on1load 事件 
处 理 程序 来 在 恰当 的 时 刻 设置 aesignMode， 如 下 面 的 例子 所 示 : 


<iframe name="richedit" style="height:100px;width:100px;" src="blank.htm"></iframe> 





























<script type="text/javascript"> 
EventUtil.addHandler (window, "load", function()t{ 

frames["richedit"] .document.designMode = "on"; 
3 


</SCrLGES 
等 到 以 上 代码 执行 之 后 ,你 就 会 在 页 面 中 看 到 一 个 类 似 文本 框 的 可 编辑 区 字段 。 这 个 区 字段 具有 与 
其 他 网 页 相同 的 默认 样式 ; 不 过 ， 通 过 为 空白 页 面 应 用 CSS 样式 ， 可 以 修改 可 编辑 区 字段 的 外 观 。 

























































































14.5.1 使 用 contenteditable 属 性 


另 一 种 编辑 富 文本 内 容 的 方式 是 使 用 名 为 contenteditable 的 特殊 属性 ， 这 个 属性 也 是 由 下 最 
早 实现 的 。 可 以 把 contenteditable 属性 应 用 给 页 面 中 的 任何 元 素 , 然后 用 户 立 即 就 可 以 编辑 该 元 素 。 
这 种 方法 之 所 以 受到 欢迎 ， 是 因为 它 不 需要 iframe、 空 白 页 和 JavaScript， 只 要 为 元 素 设置 
contenteditable 属性 即 可 。 

<div class="editable" id="richedit" contenteditable></div> 
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这 样 , 元 素 中 包含 的 任何 文本 内 容 就 都 可 以 编 表 


通过 在 这 个 元 素 上 设置 contenteditable 属性 ， 

















var div = document .get] 


div.contentEditable 














= "true"; 





量 了 ,就 好 像 这 个 元 素 变 成 了 <textarea> 元 素 一 样 。 

















也 能 打开 或 天 闭 编辑 模式 。 























ElementById("richedit"); 





contenteditable 属性 有 三 个 可 能 的 值 : "true'" 表 示 打 开 、"false" 表 示 关 闭 ,，"inherit" 表 示 
从 父 元 素 那里 继承 ( 因为 可 以 在 contenteditable 元 素 中 创建 或 删除 元 素 )。 支持 contenteditable 
属性 的 元 素 有 下 、Firefox 、Chrome 、Safari 和 Opera。 在 移动 设备 上 ， 支 持 contenteditable 属性 的 
浏览 器 有 iOS 5+ 中 的 Safari 和 Android 3+ 中 的 WebKit。 





14.5.2 ”操作 富 文 本 








与 富 文本 编辑 器 交互 的 主要 方式 ， 就 是 使 用 document .execCommand () 。 这 个 方法 可 以 对 文档 执 
行 预定 义 的 命令 ， 而 且 可 以 应 用 大 多 数 格式 。 可 以 为 aocument . execCommand () 方 法 传递 3 个 参数 : 
览 器 是 否 应 该 为 当前 命令 提供 用 户 界面 的 一 个 布尔 值 和 执行 命令 必须 的 一 个 
值 (如 果 不 需 要 值 ， 则 传递 null )。 为 了 确保 跨 浏览 器 的 兼容 性 ， 第 二 个 参数 应 该 始终 设置 为 false， 
因为 Firefox 会 在 该 参数 为 true 时 抛 出 错误 。 

不 同 浏览 器 支持 的 预定 义 命令 也 不 一 样 。 下 表 列 出 了 那些 被 支持 最 多 的 命令 。 














要 执行 的 命令 名 称 、 表 示 浏 














































































































命 会 值 (第 三 个 参数 ) 说 明 
backcolor 颜色 字符 串 设置 文档 的 背景 颜色 
bold null 将 选择 的 文本 转换 为 粗 体 
copy null 将 选择 的 文本 复制 到 剪贴 板 
createlink URL 字 符 串 将 选择 的 文本 转换 成 一 个 链接 ， 指 向 指定 的 URL 
cut null 将 选择 的 文本 剪 切 到 剪贴 板 
delete null 删除 选择 的 文本 
fontname 字体 名 称 将 选择 的 文本 修改 为 指定 字体 
fontsize 1~7 将 选择 的 文本 修改 为 指定 字体 大 小 
forecolor 颜色 字符 串 将 选择 的 文本 修改 为 指定 的 颜色 
formatblock 要 包围 当前 文本 块 的 使 用 指定 的 HTML 标 签 来 格式 化 选择 的 文本 块 

HTML 标 签 ; 如 <h1> 

indent null] 缩 进 文 本 
inserthorizontalrule null 在 插入 字符 处 插入 一 个 <hr> 元 素 
insertimage 图 像 的 URL 在 插入 字符 处 插入 一 个 图 像 
insertorderedlist nul] 在 插入 字符 处 插入 一 个 <ol> 元 素 
insertunorderedlist null 在 插入 字符 处 插入 一 个 <ul> 元 素 
insertparagraph null 在 插入 字符 处 插入 一 个 <p> 元 素 
italic nul1] 将 选择 的 文本 转换 成 斜体 
justifycenter mul] 将 插入 光标 所 在 文本 块 居中 对 齐 
justifyleft mul] 将 插入 光标 所 在 文本 块 左 对 齐 
outdent nul 凸 排 文 本 〈 减少 缩 进 ) 
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( 续 ) 
命 令 值 (第 三 个 参数 ) 说 明 
paste null 将 剪贴 板 中 的 文本 粘贴 到 选择 的 文本 
removeformat null 移 除 插入 光标 所 在 文本 块 的 块 级 格式 。 这 是 撤销 formatblock 
命令 的 操作 
selectall null 选择 文档 中 的 所 有 文本 
underline nul1l 为 选择 的 文本 添加 下 划 线 
unlink null 移 除 文本 的 链接 。 这 是 撤销 createlink 命 令 的 操作 




















其 中 ， 与 剪贴 板 有 关 的 命令 在 不 同 浏览 咒 中 的 差异 极 大 。Opera 根本 没有 实现 任何 剪贴 板 命令 ， 而 
Firefox 在 默认 情况 下 会 禁用 它们 ( 必须 修改 用 户 的 首选 项 来 启用 它们 )。Safari 和 Chrome 实现 了 cut 和 
copy， 但 没有 实现 paste。 不 过 ， 即 使 不 能 通过 document .execCommand () 来 执行 这 些 命令 ,但 却 可 

通过 相应 的 快捷 键 来 实现 同样 的 操作 。 
可 以 在 任何 时 候 使 用 这 些 命令 来 修改 富 文本 区 域 的 外 观 ， 如 下 面 的 例子 所 示 。 
ED 


frames["richedit"] .document .execCommand ("bold", false, null); 





























/ /转换 儿 体 文本 


frames["richedit"] .document.execCommand ("italic", false, null); 


/ /创建 指向 www .wrox.com 的 链接 
frames["richedit"] .document .execCommand ("createlink", false, 
"http://www.wrox.com"); 


/ /格式 化 为 1 级 标题 


frames["richedit"] .document.execCommand ("formatblock", false, "<hl>"); 




















RichTextEditingExample01.htm 











同样 的 方法 也 适用 于 页 面 中 contenteditable 属性 为 "true" 的 区 块 ， 只 要 把 对 框架 的 引用 替换 
成 当前 窗口 的 document 对 象 即 可 。 


/ /转换 粗 体 文本 


document .execCommand ("bold", false, null); 








/ /转换 斜 体 文本 


document .execCommand ("italic", false, null); 


/ /创建 指向 www .wrox.com 的 链接 
document .execCommand ("createlink", false, 
"http://www.wrox.com"),; 





/ /格式 化 为 1 级 标题 


document .execCommand ("formatblock", false, "<hl>"); 
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需要 注意 的 是 ， 虽 然 所 有 浏览 器 都 支持 这 些 命 令 ， 但 这 些 命 令 所 产生 的 HTML 仍然 有 很 大 不 同 。 
例如 ， 执 行 pold 命令 时 ，IE 和 Opera 会 使 用 <strong> 标 签 包 围 文 本 ，Safari 和 Chrome 使 用 <b> 标 签 ， 
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而 Firefox 则 使 用 <span> 标 签 。 由 于 各 个 浏览 器 实现 命令 的 方式 不 同 ， 加 上 它们 通过 innerHTML 实现 4 
转换 的 方式 也 不 一 样 ， 因 此 不 能 指望 富 文 本 编辑 需 会 产生 一 致 的 HTML。 

除了 命令 之 外 , 还 有 一 些 与 命令 相关 的 方法 。 第 一 个 方法 就 是 queryCommandEnabled(), 可 以 用 它 来 检 
测 是 否 可 以 针对 当前 选择 的 文本 ,或 者 当前 插入 字符 所 在 位 置 执行 某 个 命令 。 这 个 方法 接收 一 个 参数 ， 即 要 
检测 的 命令 。 如 果 当 前 编辑 区 域 允许 执行 传人 的 命令 ， 这 个 方法 返回 true， 否 则 返回 false。 例 如 : 

Var result = frames["richedit"] .dqocument .queryCcommandqEnabledq("bold") ; 

如 果 能 够 对 当前 选择 的 文本 执行 "polda" 命 令 ， 以 上 代码 会 返回 true。 需 要 注意 的 是 ，query- 
CommandEnabled () 方 法 返回 true， 并 不 意味 着 实际 上 就 可 以 执行 相应 命令 ， 而 只 能 说 明 对 当前 选择 
的 文本 执行 相应 命令 是 否 合适 。 例 如 ，Firefox 在 默认 情况 下 会 禁用 剪 切 操作 ， 但 执行 querycommand- 
Enabled("cut") 也 可 能 会 返回 true。 

另外 ，querycommandstate () 方 法 用 于 确定 是 否 已 将 指定 命令 应 用 到 了 选择 的 文本 。 例 如 ， 要 和 
定 当 前 选择 的 文本 是 否 已 经 转换 成 了 粗 体 ， 可 以 使 用 如 下 代码 。 


CD var isBold = frames["richedit"] .document.queryCommandState("bold"); 
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如 果 此 前 已 经 对 选择 的 文本 执行 了 "bolda" 命 令 , 那么 上 面 的 代码 会 返回 true。 一 些 功能 全 面 的 富 
文本 编辑 器 ， 正 是 利用 这 个 方法 来 更 新 粗 体 、 斜 体 等 按钮 的 状态 的 。 

最 后 一 个 方法 是 querycommangdValue () ， 用 于 取得 执行 命令 时 传人 的 值 ( 即 前 面 例子 中 传 给 
document .execCommand () 的 第 三 个 参数 )。 例 如 ， 在 对 一 段 文本 应 用 "fontsize" 命 令 时 如 果 传人 了 
7， 那 么 下 面 的 代码 就 会 返回 "7": 


Var fontSize = frames["richedit"] .document .queryCommandValue ("fontsize"); 
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通过 这 个 方法 可 以 确定 某 个 命令 是 怎样 应 用 到 选择 的 文本 的 , 可 以 据 以 确定 再 对 其 应 用 后 续 命令 是 
适 














14.5.3” 富 文本 选区 


在 富 文 本 编辑 器 中 ， 使 用 框架 (iframe ) 的 getSelection() 方 法 ， 可 以 确定 实际 选择 的 文本 。 
这 个 方法 是 window 对 象 科 document 对 象 的 属性 ,调用 它 会 返回 一 个 表示 当前 选择 文本 的 Selection 
对 象 。 每 个 selection 对 象 都 有 下 列 属 性 。 
口 anchorNode: 选区 起 点 所 在 的 节点 。 
口 anchoroffset: 在 到 达 选 区 起 点 位 置 之 前 跳 过 的 anchorNode 中 的 字符 数量 。 
口 focusNode: 选区 终点 所 在 的 节点 。 
口 focusoffset: focusNode 中 包含 在 选区 之 内 的 字符 数量 。 
口 iscollapsed: 布尔 值 ， 表 示 选 区 的 起 点 和 终点 是 否 重合 。 
口 rangeCount: 选区 中 包含 的 DOM 范围 的 数量 。 

Selection 对 象 的 这 些 属性 并 没有 包含 多 少 有 用 的 信息 。 好 在 ,该 对 象 的 下 列 方法 提供 了 更 多 信 
息 ， 并 且 支 持 对 选区 的 操作 。 
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口 addRange (range) : 将 指定 的 DOM 范围 添加 到 选区 中 。 
口 collapse (node，offset): 将 选区 折合 到 指定 节点 中 的 相应 的 文本 偏 移 位 置 。 
口 collapseToEnd(): 将 选区 折 闭 到 终点 位 置 。 
口 collapseToStart (): 将 选区 折 和 县 到 起 点 位 置 。 
口 containsNode (nodae) : 确定 指定 的 节点 是 否 包含 在 选区 中 。 
口 deleteFromDocument () :从 文档 中 删除 选区 中 的 文本 ,与 document .execCommand("delete'"， 
false，null) 命 令 的 结果 相同 。 
口 extend (node，offset): 通过 将 focusNode 和 focusoffset 移动 到 指定 的 值 来 扩展 选区 
口 getRangeAt (index) : 返回 索引 对 应 的 选区 中 的 DOM 范围 。 
口 removeAllRanges () : 从 选区 中 移 除 所 有 DOM 范围 。 实 际 上 ， 这 样 会 移 除 选区 ， 因 为 选区 中 
至 少 要 有 一 个 范围 。 
口 reomveRange (range) : 从 选区 中 移 除 指定 的 DOM 范围 。 
口 iat. : 清除 选区 并 选择 指定 节点 的 所 有 子 节 点 。 
口 toString ( 返回 选区 所 包含 的 文本 内 容 。 

Selection ae si 它们 利用 了 (第 12 章 讨论 过 的 ) DOM 范围 来 管理 选区 。 
1 于 可 以 直接 操作 选择 文本 的 DOM 表现 , 因此 访问 DOM 范围 与 使 用 execCcommandq () 相 比 , 能 够 对 富 
文本 编辑 器 进行 更 加 细 化 的 控制 。 下 面 来 看 一 个 例子 



































































































































下 var selection = frames["richedit"] .getSelection(); 
// 取 得 选择 的 文本 
Var selectedText = selection.toString(); 
// 取 得 代表 选区 的 范围 
var range = selection.getRangeAt (0) ; 
// 突 出 显示 选择 的 文本 
Var span = frames["richedit"] .document.createElement ("span"); 
span.style.backgroundColor = "yellow"; 


range.surroundContents (span); 
RichTextEditingExample01.htm 


以 上 代码 会 为 富 文 本 编辑 器 中 被 选择 的 文本 添加 黄色 的 背景 ,这 里 使 用 了 默认 选区 中 的 DOM 范围 ， 
通过 surroundcontents () 方 法 将 选区 添加 到 了 带 有 黄色 背景 的 <span> 元 素 中 。 

HTML5 将 getselection() 方 法 纳 人 了 标准 ， 而 且 IE9、Firefox、Safari、Chrome 和 Opera 8 都 实 
现 了 它 。 由 于 历史 原因 ， 在 Firefox 3.6+ 中 调用 document .getSselection() 会 返回 一 个 字符 串 。 为 此 ， 
可 以 在 Firefox 3.6+ 中 改作 调用 window.getSelection()， 从 而 返回 selection 对 象 。Firefox 8 修复 
了 document .getSelection() 的 bug， 能 返回 与 windqow.getselection() 相 同 的 值 。 

IE8 及 更 早 的 版 本 不 支持 DOM 范围 ， 但 我 们 可 以 通过 它 支 持 的 selection 对 象 操作 选择 的 文本 。 
正中 的 selection 对 象 是 0 的 属性 ， 本 章 前 面 曾经 讨论 过 。 要 取得 富 文本 编辑 器 中 选择 的 文 
本 , 首先 必须 创建 一 个 文本 范围 ( 请 参考 第 12 章 中 的 相关 内 容 ), 然后 再 像 下 面 这 样 访问 其 text 属性 。 


Var range = frames["richedit"] .document.selection.createRange(); 
Var selectedText = range.text; 
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的 途径 。 





要 像 前 面 使 用 DOM 范 











pasteHTML () 方 法 。 


虽然 使 用 正 的 文本 范围 来 执行 HTML 操作 并 不 像 使 用 DOM 范围 那么 可 靠 ， 但 也 不 失 为 一 种 有 效 

















国 那 样 实现 相同 的 文本 高 亮 效果 ， 可 以 组 合 使 用 htmlText 属性 和 














Var range = frames["richedit"] .document.selection.createRange(); 
range.pasteHTML ("<span style=\"background-color:yellow\"> " + range.htmlText + 
"</span> 让 ; 


以 上 代码 通过 htmlText 取得 了 当前 选区 中 的 HTML， 然 后 将 其 放 在 了 一 对 <span> 标 签 中 ， 最 后 
又 使 用 pasteHTML () 将 结果 重新 搬入 到 了 选区 中 。 


14.5.4 ”表单 与 富 文本 

















1 于 富 文 本 编辑 是 使 月 











日 iframe 而 非 表单 控件 实现 的 ， 因此 从 技术 上 膏 , 语文 本 编辑 器 并 不 属于 表 





单 。 换 句 话 说 ， 富 文本 编辑 器 中 的 HTML 不 会 被 自动 提交 给 服务 器 ， 而 需要 我 们 手工 来 提取 并 提交 
HTML。 为 此 ,通常 可 以 添加 一 个 隐藏 的 表单 字段 ， 让 它 的 值 等 于 从 iframe 中 提取 出 的 HTML 。 具 体 

















来 说 ,就 是 在 提交 表单 之 前 ， 从 iframe 中 提取 出 HTML, 并 将 其 插入 到 隐藏 的 字段 中 。 下 面 就 是 通过 
表单 的 onsubmit 事件 处 理 程序 实现 上 述 操作 的 代码 。 





了 





event = Event 
var target = 


target .elemen 


Util .getl 





EventUtil.addHandler (form, "submit", function(event)t 





Event (event); 


EventUtil.getTarget (event); 


ts["comments"] .value = frames["richedit"] .document.body.innerHTML; 


RichTextEditingExample01.htm 





在 此 ， 我 们 通过 文档 主体 的 innerHTML 属性 取得 了 iframe 中 的 HTML， 然 后 将 其 插入 到 了 名 为 
"comments" 的 表单 字段 中 。 这 样 可 以 确保 恰好 在 提交 表单 之 前 填充 "comments "字段 。 如 果 你 想 在 代 
码 中 通过 submit () 来 手工 提交 表单 ,那么 一 定 不 要 忘记 事先 执行 上 面 的 操作 。 对 于 contenteditable 








元 素 ， 也 可 以 执行 类 似 操作 。 





和 


14.6 





event = Event 
var target = 


Util.get 









































EventUtil.addHandler (form, "submit", function(event)t 





Event (event); 


EventUtil.getTarget (event); 


target .elements["comments"] .value = 
document .getElementById("richedit").innerHTML; 


小 结 





虽然 HTML 和 Web 应 用 自 诞 生 以 来 已 经 发 生 了 天 翻 地 覆 的 变化 ,但 Web 表单 相对 却 没有 什么 改 


变 。 使 月 

















日 JavaScript 可 以 增强 已 有 的 表单 字段 ， 从 而 创造 出 新 的 功能 , 或 者 提升 表单 的 易 用 性 。 为 此 ， 
表单 、 表 单字 段 都 引入 了 相应 的 属性 和 方法 ， 以 便 JavaScript 使 用 。 下 面 是 本 章 介绍 的 几 个 概念 。 




















口 可 以 使 用 一 些 标准 或 非 标准 的 方法 选择 文本 框 中 的 全 部 或 部 分 文本 。 
口 大 多 数 浏览 器 都 采用 了 Firefox 操作 选择 文本 的 方式 , 但 卫 仍然 坚持 自己 的 实现 。 
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口 在 文本 框 的 内 容 变 化 时 ， 可 以 通过 侦 听 键盘 事件 以 及 检测 插入 的 字符 ， 来 允许 或 禁止 用 户 输入 
某 些 字符 。 

除 Opera 之 外 的 所 有 浏览 器 都 支持 剪贴 板 事 件 ， 包 括 copy、cut 和 paste。 其 他 浏览 器 在 实现 剪 
贴 板 事件 时 也 可 以 分 为 几 种 不 同 的 情况 。 

口 IE 、Firefox 、Chrome 和 Safari 允许 通过 JavaScript 访问 剪贴 板 中 的 数据 ， 而 Opera 不 允许 这 种 访 

问 方式 。 

口 即使 是 正 、Chrome 和 Safari， 它 们 各 自 的 实现 方式 也 不 相同 。 

口 Firefox 、Safari 和 Chrome 只 人 允许 在 paste 事件 发 生 时 读 取 剪贴 板 数 据 ， 而 正 没有 这 个 限制 。 

口 Firefox 、Safari 和 Chrome 只 人 允许 在 发 生 剪贴 板 事件 时 访问 与 剪贴 板 相 关 的 信息 , 而 正人 允许 在 任 
何 时 候 访问 相关 信息 。 

在 文本 框 内 容 必须 限制 为 某 些 特 定 字符 的 情况 下 , 就 可 以 利用 剪贴 板 事 
中 插入 内 容 的 操作 。 

选择 框 也 是 经 常 要 通过 JavaScript 来 控制 的 一 个 表单 字段 。 由 于 有 了 DOM, 对 选择 框 的 操作 比 以 前 
要 方便 多 了 。 添 加 选项 、 移 除 选 项 、 将 选项 从 一 个 选择 框 移动 到 另 一 个 选择 框 ， 甚 至 对 选项 进行 排序 等 
操作 ， 都 可 以 使 用 标准 的 DOM 技术 来 实现 。 

富 文本 编辑 功能 是 通过 一 个 包含 空 HTML 文档 的 iframe 元 素来 实现 的 。 通 过 将 空 文档 的 
designMode 属性 设置 为 "on" , 就 可 以 将 该 页 面 转换 为 可 编辑 状态 , 此 时 其 表现 如 同 字 处 理 软件 。 另 外 ， 
也 可 以 将 某 个 元 素 设置 为 contenteditable。 在 默认 情况 下 , 可 以 将 字体 加 粗 或 者 将 文本 转换 为 斜体 ， 
还 可 以 使 用 剪贴 板 。JavaScript 通过 使 用 execcommand () 方 法 也 可 以 实现 相同 的 一 些 功能 。 另 外 ,使 用 
aqueryCommandEnabled() 、queryCommandState() 和 queryCommandValue() 方 法 则 可 以 取得 有 关 
文本 选区 的 信息 。 由 于 以 这 种 方式 构建 的 富 文 本 编辑 器 并 不 是 一 个 表单 字段 ， 因 此 在 将 其 内 容 提 交 给 
服务 器 之 前 ， 必 须 将 iframe 或 contenteditable 元 素 中 的 HTML 复制 到 一 个 表单 字段 中 。 
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件 来 屏蔽 通过 粘贴 向 文本 框 
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使 用 Canvas 给 


本 章 内 容 

口 理解 <canvas> 元 素 

口 绘制 简单 的 2D 图 形 

口 使 用 WebGL 绘制 3D 图 形 




















人 不 HTMLS 添加 的 最 受 欢迎 的 功能 就 是 <canvas> 元 素 。 这 个 元 素 负责 在 页 面 中 设 定 一 个 
ss 区 域 ， 然 后 就 可 以 通过 JavaScript 动态 地 在 这 个 区 域 中 绘制 图 形 。<canvas> 元 素 最 早 是 由 苹 
果 公 司 推出 的 ， 当 时 主要 用 在 其 Dashboard 微 件 中 。 很 快 ，HTIML5 加 入 了 这 个 元 素 ， 主 流 浏览 器 也 迅 
速 开始 支持 它 。IE9+、Firefox 1.5+、Safari2+、Opera 9+、Chrome、iOS 版 Safari 以 及 Android 版 WebKit 
都 在 某 种 程度 上 支持 <canvas>。 

与 浏览 器 环境 中 的 其 他 组 件 类 似 ，<canvas> 由 几 组 API 构成 ， 但 并 非 所 有 浏览 器 都 支持 所 有 这 些 
API。 除 了 具备 基本 绘图 能 力 的 2D 上 下 文 ，<canvas> 还 建议 了 一 个 名 为 WebGL 的 3D 上 下 文 。 目 前 ， 
支持 该 元 素 的 浏览 器 都 支持 2D 上 下 文 及 文本 API， 但 对 WebGL 的 支持 还 不 够 好 。 由 于 WebGL 还 是 实 
验 性 的 ， 因 此 要 得 到 所 有 浏览 器 支持 还 需要 很 长 一 段 时 间 。Firefox 4+ 和 Chrome 支持 WebGL 规范 的 早 
期 版 本 ， 但 一 些 老 版 本 的 操作 系统 ， 比 如 Windows XP， 由 于 缺少 必要 的 绘图 驱动 程序 ， 即 便 安 装 了 这 
两 款 浏览 器 也 无 济 于 事 。 


15.1 基本 用 法 


要 使 用 <canvas> 元 素 ， 必 须 先 设置 其 width 和 height 属性 ， 指 定 可 以 绘图 的 区 域 大 小 。 出 现在 
开始 和 结束 标签 中 的 内 容 是 后 备 信息 ， 如 果 浏 览 器 不 支持 <canvas> 元 素 ， 就 会 显示 这 些 信息 。 下 面 就 
是 <canvas> 元 素 的 例子 。 























































































































<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas> 


与 其 他 元 素 一 样 ，<canvas> 元 素 对 应 的 DOM 元 素 对 象 也 有 width 和 heignt 属性 ， 可 以 随意 修 
改 。 而 且 , 也 能 通过 CSS 为 该 元 素 添 加 样式 ， 如 果 不 添 加 任何 样式 或 者 不 绘制 任何 图 形 , 在 页 面 中 是 看 
不 到 该 元 素 的 。 

要 在 这 块 画 布 (canvas ) 上 绘图 ， 需 要 取得 绘图 上 下 文 。 而 取得 绘图 上 下 文 对 象 的 引用 ， 需 要 调用 
getContext () 方 法 并 传人 上 下 文 的 名 字 。 传 人 "2d"， 就 可 以 取得 2D 上 下 文 对 象 。 


var drawing = dqocument .getElementById("drawing"); 









































/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 
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Var context = drawing.getContext ("2d"); 

// 更 多 代码 

} 

在 使 用 <canvas> 元 素 之 前 ， 首 先 要 检测 getcontext () 方 法 是 否 存在 ， 这 一 步 非 常 重要 。 有 些 浏 
览 器 会 为 HTML 规范 之 外 的 元 素 创建 默认 的 HTML 元 素 对 象 " 。 在 这 种 情况 下 ， 即 使 arawing 变量 中 
保存 着 一 个 有 效 的 元 素 引 用 ， 也 检测 不 到 getcontext () 方 法 。 

使 用 toDataURL() 方 法 , 可 以 导出 在 <canvas> 元 素 上 绘制 的 图 像 。 这 个 方法 接受 一 个 参数 ， 即 图 
像 的 MIME 类 型 格式 ， 而 且 适 合用 于 创建 图 像 的 任何 上 下 文 。 比 如 ， 要 取得 画布 中 的 一 幅 PNG 格式 的 
图 像 ， 可 以 使 用 以 下 代码 。 


var drawing = dqocument .getElementById("drawing"); 

















/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)t{ 


// 取 得 图 像 的 数据 URI 
var imgURI = drawing.toDataURL("image/png"); 
// 显 示 图 像 


var image = document .createElement ("img"); 
image.src = imgURI; 
document .body .appendChild(image); 


2DDataUrlExample01.htm 

默认 情况 下 ， 浏 览 器 会 将 图 像 编 码 为 PNG 格式 ( 除非 另行 指定 )。Firefox 和 Opera 也 支持 基于 

"image/jpeg "参数 的 JPEG 编码 格式 。 由 于 这 个 方法 是 后 来 才 追 加 的 , 所 以 支持 <canvas> 的 浏览 器 也 
是 在 较 新 的 版 本 中 才 加 入 了 对 它 的 支持 ， 比 如 IE9、Firefox 3.5 和 Opera 10。 




















如 果 绘 制 到 画布 上 的 图 像 源 自 不 同 的 域 , toDataURL() 方 法 会 抛 出 错误 。 本章 后 


面 还 将 介绍 更 多 相关 内 容 。 





15.2 2D 上 下 文 


使 用 2D 绘图 上 下 文 提 供 的 方法 ， 可 以 绘制 简单 的 2D 图 形 ， 比 如 矩形、 弧 线 和 路 径 。2D 上 下 文 的 
坐标 开始 于 <canvas> 元 素 的 左上 角 ， 原点 坐标 是 (0,0)。 所 有 坐标 值 都 基于 这 个 原点 计算 , x 值 越 大 表示 
越 靠 右 ,y 值 越 大 表示 越 靠 下 。 默 认 情 况 下 ，wiath 和 heignt 表示 水 平和 垂直 两 个 方向 上 可 用 的 像素 
数目 。 


15.2.1 填充 和 描 边 


2D 上 下 文 的 两 种 基本 绘图 操作 是 填充 和 描 边 。 填 充 ， 就 是 用 指定 的 样式 ( 颜色 、 渐 变 或 图 像 ) 填 
充 图 形 ; 描 边 ， 就 是 只 在 图 形 的 边缘 画 线 。 大 多 数 2D 上 下 文 操作 都 会 细 分 为 填充 和 描 边 两 个 操作 ， 而 




































































GO 假设 你 想 在 Firefox 3 中 使 用 <canvas> 元 素 。 虽 然 浏 览 器 会 为 该 标签 创建 一 个 DOM 对 象 ， 而 且 也 可 以 引用 它 , 但 
这 个 对 象 中 并 没有 getcontext () 方 法 。( 据 作 者 回复 ) 
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操作 的 结果 取决 于 两 个 属性 : fillstyle 和 strokeStyle。 

这 两 个 属性 的 值 可 以 是 字符 串 、 渐 变 对 象 或 模式 对 象 ， 而 且 它 们 的 默认 值 都 是 "#000000"。 如 果 为 
它们 指定 表示 颜色 的 字符 串 值 ， 可 以 使 用 CSS 中 指定 颜色 值 的 任何 格式 ， 包 括 颜 色 名 、 十 六 进 制 码 、 
rgb、rgba、hsl 或 hsla。 举 个 例子 : 























var drawing = document .getElementById("drawing"); 


/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 


Var context = drawing.getContext("2d"); 
context.strokeStyle = "red"; 
context.fillStyle = "#0000ff"; 

} 





以 上 代码 将 strokestyle 设置 为 red (CSS 中 的 颜色 名 ), 将 fillstyle 设置 为 #0000ff ( 蓝 色 )。 
然后 ， 所 有 涉及 描 边 和 填充 的 操作 都 将 使 用 这 两 个 样式 ， 直 至 重新 设置 这 两 个 值 。 如 前 所 述 ， 这 两 个 属 
性 的 值 也 可 以 是 渐变 对 象 或 模式 对 象 。 本 章 后 面 会 讨论 这 两 种 对 象 。 


15.2.2 ”绘制 矩形 


矩形 是 唯一 一 种 可 以 直接 在 2D 上 下 文中 绘制 的 形状 。 与 矩形 有 关 的 方法 包括 fillRect ()、 
strokeRect () 和 clearRect () 。 这 三 个 方法 都 能 接收 4 个 参数 : 矩形 的 x 坐标 、 矩 形 的 y 坐 标 、 和 矩形 
宽度 和 拢 形 高 度 。 这 些 参数 的 单位 都 是 像素 。 
首先 ，fillRect () 方 法 在 画布 上 绘制 的 矩形 会 填充 指定 的 颜色 。 填 充 的 颜色 通过 fillstyle 属 
性 指定 ， 比 如 : 


var drawing = document .getElementById("drawing"); 














上 ol 




































































/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 


Var context = drawing.getContext("2d"); 


/大 
* 根据 Mozilla 的 文档 
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic _ usage 
4 


// 绘 制 红 色 矮 形 
context .fillStyle = "#Ef0000"7 
context .fillRect(10, 10, 50, 50); 


// 绘 制 半 透 明 的 蓝 色 拢 形 


context .fillStyle = "rgba(0,0,255,0.5)"; 
context .fillRect(30, 30, 50, 50); 


2DFillRectExample01.htm 


以 上 代码 首先 将 fi11style 设置 为 红色 ,然后 从 (10,10) 处 开始 绘制 矩形 , 矩形 的 宽 和 高 均 为 50 像 
素 。 然 后 ， 通 过 rgba () 格 式 再 将 fillstyle 设置 为 半 透 明 的 蓝 色 ， 在 第 一 个 矩形 上 面 绘 制 第 二 个 和 矩 
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形 。 结 果 就 是 可 以 透 过 蓝 色 的 和 矩形 看 到 红色 的 矩形 〈 见 图 15-1 )。 
strokeRect () 方 法 在 画布 上 绘制 的 矩形 会 使 用 指定 的 颜色 描 边 。 描 边 颜 色 通 
过 strokeStyle 属性 指定 。 比 如 : 

















var drawing = dqocument .getElementById("drawing"); 





/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 





图 15-1 


Var context = drawing.getContext ("2d"); 

/* 
* 根据 Mozilla 的 文档 
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic usage 
a 

// 绘 制 红色 描 边 矩形 

Context .StrokeStyle = "#£f£f0000"; 

context.strokeRect (10, 10, 50, 50); 


// 绘 制 半 透明 的 蓝 色 描 边 矩 形 
Context .strokeStyle = "rgba(0,0,255,0.5)"; 
context.strokeRect (30, 30, 50, 50); 


2DStrokeRectExample01.htm 
以 上 代码 绘制 了 两 个 重 苹 的 和 矩形。 不 过 , 这 两 个 矩形 都 只 有 框 线 , 内 部 并 没有 填充 颜色 ( 见 图 15-2 )。 





描 边 线条 的 宽度 由 1ineWidth 属性 控制 ， 该 属性 的 值 可 以 是 任意 整数 。 另 外 ， 
通过 lineCap 0 线条 末端 的 形状 是 平头 、 圆 头 还 是 方 头 ("butt"、 
"round" 或 "square" ) ， 通 过 linedJoin 属性 可 以 控制 线条 相交 的 方式 是 圆 交 、 斜 
交还 是 匀 接 ( wround"、 De 










最 后 , clearRect () 方 法 用 于 清除 画布 上 的 矩形 区 域 。 本质 上 , 这 个 方法 可 以 把 绘制 上 下 文中 的 某 
一 矩形 区 域 变 透明 。 通 过 绘制 形状 然后 再 清除 指定 区 域 ， 就 可 以 生成 有 意思 的 效果 ,例如 把 某 个 形状 切 
掉 一 块 。 下 面 看 一 个 例子 。 


var drawing = dqocument .getElementById("drawing"); 















































/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 


Var context = drawing.getContext ("2d"); 
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/* 
* 根据 Mozilla 的 文档 
* http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic usage 
A 


// 绘 制 红色 适 形 
context.fillStyle = "#f£ff0000"; 
context.fillRect(10, 10, 50, 50); 


// 绘 制 半 透明 的 蓝 色 拢 形 
context.fillStyle = "rgba(0,0,255,0.5)"; 
context.fillRect(30, 30, 50, 50); 


// 在 两 个 矩形 重合 的 地 方 清除 一 个 小 矩形 
Context .ClLearRect (40, 40, 10, 10); 


2DClearRectExample01.htm 


如 图 15-3 所 示 , 两 个 填充 矩形 重合 在 一 起 , 而 重合 的 地 方 又 被 清除 了 一 个 小 
矩形 区 域 。 


15.2.3 ”绘制 路 径 


2D 绘制 上 下 文 支持 很 多 在 画布 上 绘制 路 径 的 方法 。 通 过 路 径 可 以 创造 出 复 
杂 的 形状 和 线条 。 要 绘制 路 径 ， 首 先 必须 调用 beginPath () 方 法 ， 表 示 要 开始 图 15-3 
绘制 新 路 径 。 然 后 ， 再 通过 调用 下 列 方法 来 实际 地 绘制 路 径 。 

Darc(x, y, radius, startAngle, endAngle, counterclockwise): 以 (xy) 为 圆心 绘 
制 一 条 弧 线 ， 弧 线 半径 为 raaius， 起 始 和 结束 角度 ( 用 弧度 表示 ) 分 别 为 startangle 和 
endAngle。 最 后 一 个 参数 表示 startangle 和 endangle 是 否 按 逆 时 针 方 向 计算 , 值 为 false 
表示 按 顺 时 针 方 向 计算 。 

口 arcTo (x1，yl，x2，y2，radius): 从 上 一 点 开始 绘制 一 条 弧 线 ， 到 (x2,y2) 为止， 并且 以 

给 定 的 半径 radius 穿 过 (x1,y1)。 

口 pezierCurveTo (clix，cly，c2x，c2y，x，y): 从 上 一 点 开始 绘制 一 条 曲线 ， 到 (x,y) 为 

止 , 并 且 以 (clx, cJy) 和 (c2x,c2y) 为 控制 点 。 

口 lineTo (x，y): 从 上 一 点 开始 绘制 一 条 直线 ， 到 (x,y) 为 止 。 

口 moveTo (x，y) : 将 绘图 游标 移动 到 (x,y) ， 不 画 线 。 

口 quadraticCurveTo (cx，cy，x，y) : 从 上 一 点 开始 绘制 一 条 二 次 曲线 ， 到 (x,y) 为 止 , 并 

且 以 (cxv, cy) 作为 控制 点 。 

口 rect (x,，y，width，height): 从 点 (xy) 开 始 绘制 一 个 和 矩形， 宽度 和 高 度 分 别 由 wiath 和 
height 指定 。 这 个 方法 绘制 的 是 矩形 路 径 ， 而 不 是 strokeRect () 和 fillRect () 所 绘制 的 独 
立 的 形状 。 

创建 了 路 径 后 ， 接 下 来 有 几 种 可 能 的 选择 。 如 果 想 绘制 一 条 连接 到 路 径 起 点 的 线条 ， 可 以 调用 
closePath() 。 如 果 路 径 已 经 完成 ， 你 想 用 fi11Style 填充 它 ， 可 以 调用 £i11() 方 法 。 男 外 ， 还 可 
以 调用 stroke () 方 法 对 路 径 描 边 ， 描 边 使 用 的 是 strokeStyle。 最 后 还 可 以 调用 clip () ， 这 个 方法 
可 以 在 路 径 上 创建 一 个 剪 切 区 域 。 
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下 面 看 一 个 例子 ， 即 绘制 一 个 不 带 数字 的 时 钟表 盘 。 











var drawing = document. 





getElementById("drawing"); 


/ /确定 浏览 器 支持 <canvas> 元 素 


if (drawing.getContext) 


{ 


Var context = drawing.getContext ("2d"); 


// 开 始 路 径 
context .beginPath() 


// 绘 制 外 贺 


context.arc(100, 100, 99, 0, 2 * Math.PI， 


/ /绘制 内 辆 


了 


Context .moveTo(194, 100); 


context.arc(100, 100, 94, 0, 2 * Math.PI， 


/ /绘制 分 针 


context .moveTo(100, 100); 
context .lineTo(100, 15); 


/ /绘制 时 针 


context .moveTo(100, 100); 


context .lineTo(35, 


// 描 边 路 径 


Context .stroke(); 











100) ， 


false); 


false); 


2DPathExample01.htm 





这 个 例子 使 用 arc () 方 法 绘制 了 两 个 圆 形 : 一 个 外 圆 和 一 个 内 圆 ,构成 了 表盘 的 边框 。 外 圆 的 半径 





是 99 像素 ,圆心 位 于 点 (100,100)， 也 是 画布 的 中 心 点 。 为 了 








绘制 一 个 完整 的 圆 形 ， 我 们 从 0 弧度 开始 ， 


绘制 2r 弧度 (通过 Math.PI 来 计算 )。 在 绘制 内 圆 之 前 ， 必 须 把 路 径 移 动 到 内 圆 上 的 某 一 点 ， 以 避免 


绘制 出 多 余 的 线条 。 第 二 次 调 月 














moveTo() 和 linerTo () 方 法 来 绘制 时 针 和 分 针 。 最 后 一 步 是 调用 stroke () 方 法 , 这 样 才能 把 图 形 绘制 








到 画布 上 ， 如 图 15-4 所 示 。 














日 arc () 使 用 了 小 一 点 的 半径 ， 以 便 创 造 边框 的 效果 。 然 后 ， 组 合 使 用 
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在 2D 绘图 上 下 文中 ， 路 径 是 一 种 主要 的 绘图 方式 ， 因 为 路 径 能 为 要 绘制 的 图 形 提供 更 多 控制 。 由 
于 路 径 的 使 用 很 频繁 ， 所 以 就 有 了 一 个 名 为 isPointInPath () 的 方法 。 这 个 方法 接收 x 和 了 坐标 作为 
参数 ， 用 于 在 路 径 被 关闭 之 前 确定 画布 上 的 某 一 点 是 否 位 于 路 径 上 ， 例 如 : 


if (Context .isPointInPath(100，100) ){ 
alert("Point (100, 100) is in the path."); 




















} 


2D 上 下 文中 的 路 径 API 已 经 非常 稳定 ， 可 以 利用 它们 结合 不 同 的 填充 和 描 边 样式 ， 绘 制 出 非常 复 
杂 的 图 形 来 。 


15.2.4 ”绘制 文本 


文本 与 图 形 总 是 如 影 随 形 。 为 此 ，2D 绘图 上 下 文 也 提供 了 绘制 文本 的 方法 。 绘 制 文本 主要 有 两 个 
方法 : fillText () 和 strokeText ()。 这 两 个 方法 都 可 以 接收 4 个 参数 : 要 绘制 的 文本 字符 串 、x 4 
标 、y 坐标 和 可 选 的 最 大 像素 宽度 。 而 且 ， 这 两 个 方法 都 以 下 列 3 个 属性 为 基础 。 

口 font: 表示 文本 样式 、 大 小 及 字体 ， 用 CSS 中 指定 字体 的 格式 来 指定 ， 例 如 "10px Arial"。 

口 textAlign: 表示 文本 对 齐 方式 ,可 能 的 值 有 "start"、"end"、"left"、"right" 和 "center"。 

建议 使 用 "start" 和 "end" ， 不 要 使 用 "left" 和 "zight"， 因 为 前 两 者 的 意思 更 稳妥， 能 同时 
适合 从 左 到 右 和 从 右 到 左 显示 (阅读 ) 的 语言 。 

口 tex tBaseline: 表 示 文 本 的 基线 ,可 能 的 值 有 "top"、"hanging"、 "middle"."alphabetic".、 

"ideographic" 和 "bottom"。 

这 几 个 属性 都 有 默认 值 ， 因 此 没有 必要 每 次 使 用 它们 都 重新 设置 一 遍 值 。fillText () 方 法 使 用 
fillstyle 属性 绘制 文本 , 而 strokeText () 方 法 使 用 stzrokestyle 属性 为 文本 描 边 。 相 对 来 说 , 还 
是 使 用 fillText () 的 时 候 更 多 ， 因 为 该 方法 模仿 了 在 网 页 中 正常 显示 文本 。 例 如 ， 下 面 的 代码 在 前 一 
节 创 建 的 表盘 上 方 绘制 了 数字 12: 

Context .font = "bold 14px Arial"; 

context.textAlign = "center"; 


context.textBaseline = "middle"; 
context.fillText ("12", 100, 20); 
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2D TextExample01.htm 





结果 如 图 15-5 所 示 。 








图 15-5 


图 灵 社 区 会 员 stinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





452 第 15 章 使 用 Canvas 绘图 





因为 这 里 把 textAlign 设置 为 "center" 














表示 的 是 文本 水 平和 垂直 中 点 的 坐标 。 如 果 将 textAlign 设置 为 "start" 
端的 位 置 ( 从 左 到 右 阅 读 的 语言 ); 设置 为 "end" 

















,把 textBaseline 设置 为 "middle" 


,所 以 坐标 (100,20) 
， 则 x 坐标 表示 的 是 文本 左 
， 则 x 坐标 表示 的 是 文本 右 端 的 位 置 ( 从 左 到 右 阅 读 的 














语言 )。 例 如 : 
/ /正常 
context.font = "bold 14px Arial"; 
context.textAlign = "center"; 
context.textBaseline = "middle"; 
context.fillText ("12", 100, 20); 
// 起 点 对 齐 
Context .textAlign = "start"; 








context .fi llText("12", 100, 40); 
// 终 点 对 齐 
context .textAlign = "end"; 
context .fi llText ("12", 100, 60); 

2DTextExample02.htm 
这 一 回 绘制 了 三 个 字符 串 "12"， 每 个 字符 串 的 x 坐标 值 相同 , 但 textAlign 值 不 同 。 另 外 ， 后 两 

个 字符 串 的 y 坐标 依次 增 大 ， 以 避免 相互 重大 。 结 果 如 图 15-6 所 示 。 
图 15-6 





表盘 中 的 分 针 恰好 位 于 正中 间 ， 因 此 文本 的 水 平 对 齐 方式 如 何 变化 也 能 够 一 目 了 然 。 类 似 地 ,修改 
textBaseline 属性 的 值 可 以 调整 文本 的 垂直 对 齐 方式 : 值 为 "top",，y 坐标 表示 文本 顶端 值 为 
"bottom" ,yy 坐标 表示 文本 底 端 ; 值 为 "hanging"、"alphabetic" 和 "ideographic"， 则 y 坐标 分 
别 指向 字体 的 特定 基线 坐标 。 

由 于 绘制 文本 比较 复杂 ， 特 别 是 需要 把 文本 控制 在 某 一 区 域 中 的 时 候 ，2D ee 
文本 大 小 的 方法 measureText ()。 这 个 方法 接收 一 个 参数 ， 即 要 绘制 的 文本 ; 返回 一 
对 象 。 返 回 的 对 象 目前 只 有 一 个 wiath 属性 ,但 将 来 还 会 增加 更 多 度量 属性 
































个 TextMetrics 











o 

















measureText () 方 法 利 月 


比如 ， 假 设 你 想 在 一 个 140 像素 宽 的 矩形 区 域 中 绘制 文本 Hello world!， 


有 font、 textAlign 和 texti 


大 小 开始 递减 ， 最 终 会 找到 合适 的 字体 大 小 。 


图 灵 社 区 


Baseline 的 当前 值 计算 指定 文本 的 大 小 。 
下 面 的 代码 从 100 像素 的 字体 


会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 
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Var fontSize 
context.font 


L100 
fontSize + "px Arial"; 


while(context.measureText ("Hello world!") .width > 140)f{ 
fontSize--; 
context.font = fontSize + "px Arial"; 


} 


context.fillText ("Hello world!", 10, 10); 
context.fillText ("Font size is " + fontSize + "px", 10, 50); 


2DTextExample03.htm 


前 面 提 到 过 ，fillText 和 strokeText () 方 法 都 可 以 接收 第 四 个 参数 ， 
也 就 是 文本 的 最 大 像素 宽度 。 不 过 , 这 个 可 选 的 参数 尚未 得 到 所 有 浏览 器 支持 dnd 
( 最 早 支 持 它 的 是 Firefox 4 )。 提 供 这 个 参数 后 ， 调 用 fillText () 或 。 ”字体 大 小 为 26 像 素 
strokeText () 时 如 果 传 人 的 字符 串 大 于 最 大 宽度 , 则 绘制 的 文本 字符 的 高 度 图 15-7 
正确 ， 但 宽度 会 收缩 以 适应 最 大 宽度 。 图 15-7 展示 了 这 个 效果 。 

绘制 文本 还 是 相对 比较 复杂 的 操作 ， 因 此 支持 <canvas> 元 素 的 浏览 器 也 并 未 完全 实现 所 有 与 绘制 
文本 相关 的 API。 


15.2.5 ”变换 


通过 上 下 文 的 变换 ， 可 以 把 处 理 后 的 图 像 绘 制 到 画布 上 。2D 绘制 上 下 文 支持 各 种 基本 的 绘制 变换 。 
创建 绘制 上 下 文 时 ， 会 以 默认 值 初始 化 变换 矩阵 ， 在 默认 的 变换 矩阵 下 ， 所 有 处 理 都 按 描述 直接 绘制 。 
为 绘制 上 下 文 应 用 变换 ， 会 导致 使 用 不 同 的 变换 矩阵 应 用 处 理 ， 从 而 产生 不 同 的 结果 。 
可 以 通过 如 下 方法 来 修改 变换 矩阵 。 
口 rotate(angle) : 围绕 原点 旋转 图 像 angle 弧度 。 
口 scale (scaleXx,，scaleYy) : 缩放 图 像 , 在 x 方 向 乘 以 scalex, 在 ) 方 向 乘 以 scaleY。 scalex 
和 scaleY 的 默认 值 都 是 1.0。 
























































口 translate(x, y) : 将 坐标 原点 移动 到 (x,y) 。 执行 这 个 变换 之 后 , 坐标 (0,0) 会 变 成 之 前 由 (x, y) 
表示 的 点 。 

口 transform(m1_ 1，m1 2，m2_1，m2_2，dx，dy) : 直接 修改 变换 矩阵， 方式 是 乘 以 如 下 
和 矩阵 。 


ml_1 ml_2 dx 
m2_1 m2_2 dy 
0 0 1 


D setTransform(m1_1, ml_2, m2_1, m2_2, dx, dy): 将 变换 矩阵 重 置 为 默认 状态 ， 然后 
再 调用 transform()。 
变换 有 可 能 很 简单 ， 但 也 可 能 很 复杂 ， 这 都 要 视 情况 而 定 。 比 如 ， 就 拿 前 面 例子 中 绘制 表 针 来 说 ， 
如 果 把 原点 变换 到 表盘 的 中 心 ， 然 后 再 绘制 表 针 就 容易 多 了 。 请 看 下 面 的 例子 。 


var drawing = dqocument .getElementById("drawing"); 























/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 
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Var context 


// 开 始 路 径 
Context .beginPath () ; 


/ /绘制 外 
context 


辆 


arc(100; 100; 





/ /绘制 内 加 
context .moveTo (194， 
context.arc(100, 100, 


1/ 变换 原点 


context .translate(100, 


/ /绘制 分 针 
context .moveTo(0,0); 
context.lineTo(0, 


/ /绘制 时 针 
context .moveTo(0, 0); 
context .lineTo(-65, 


// 描 边 路 径 
context.stroke(); 


99 ， 


drawing.getContext ("2d"); 


0, 2 * Math.PI, false); 


10033 
94, 


0, 2 * Math.PI, false); 


100); 


-85); 


0); 


2DTransformExample01.htm 


把 原点 变换 到 时 钟表 盘 的 中 心 点 (100,100) 后 ， 在 同一 方向 上 绘制 线条 就 变 成 了 简单 的 数学 问题 了 。 
所 有 数学 计算 都 基于 (0,0)， 而 不 是 (100,100)。 还 可 以 更 进一步 ， 像 下 面 这 样 使 用 *otate () 方 法 旋转 时 


钟 的 表 针 。 








var drawing document .get1 


De 


览 器 支持 <canvas> 元 素 
(drawing.getContext)t{ 


/ /确定 注 
于 下 


Var context 


// 开 始 路 径 
Context .beginPath 


圆 
:are(100; 


// 绘 
cont 





圆 
.moveTo (194, 
Aare(100; 100; 





用 原 点 


t.translate 











/1 旋转 表 针 


context .rotate(1); 


/ /绘制 分 针 


图 灵 社 区 


ElementById("drawing"); 


drawing.getContext ("2d"); 


0, 2 * Math.PI, false); 


100):; 
94, 


0, 2 * Math.PI, false); 
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context.moveTo(0,0); 
context.lineTo(0, -85); 


/ /绘制 时 针 
context.moveTo(0, 0); 

context.lineTo(-65, 0); 15 
// 描 边 路 径 


context.stroke 














2DTransformExample01.htm 


因为 原点 已 经 变换 到 了 时 钟表 盘 的 中 心 点 ,， 所 以 旋转 也 是 以 该 点 为 圆心 的 。 结 果 就 像 是 表 针 真 地 被 
固定 在 表盘 中 心 一 样 ， 然 后 向 右 旋转 了 一 定 角度 。 结 果 如 图 15-8 所 示 。 











图 15-8 


无 论 是 刚才 执行 的 变换 , 还 是 fi1l1lstyle、strokeStyle 等 属性 , 都 会 在 当前 上 下 文中 一 直 有 效 ， 
除非 再 对 上 下 文 进行 什么 修改 。 虽 然 没 有 什么 办 法 把 上 下 文中 的 一 切 都 重 置 回 默认 值 , 但 有 两 个 方法 可 
以 跟踪 上 下 文 的 状态 变化 。 如 果 你 知道 将 来 还 要 返回 某 组 属性 与 变换 的 组 合 ， 可 以 调用 save () 方 法 。 
调用 这 个 方法 后 ， 当 时 的 所 有 设置 都 会 进入 一 个 栈 结构 ， 得 以 妥善 保管 。 然 后 可 以 对 上 下 文 进行 其 他 修 
改 。 等 想 要 回 到 之 前 保存 的 设置 时 ， 可 以 调用 restore () 方 法 ， 在 保存 设置 的 栈 结 构 中 向 前 返回 一 级 ， 
恢复 之 前 的 状态 。 连 续 调 用 save () 可 以 把 更 多 设置 保存 到 栈 结构 中 , 之 后 再 连续 调用 *estore () 则 可 
以 一 级 一 级 返回 。 下 面 来 看 一 个 例子 。 












































context.fillStyle = "#f£ff0000"; 


9 context .save(); 


context.fillStyle = "#00f£f00"; 

context.translate(100, 100); 

context.save(); 

context.fillStyle = "#0000ff"; 

context.fillRect (0，0，100，200); // 从 点 (100,100) 开 始 绘制 蓝 色 和 珑 形 
context.restore(); 

context.fillRect (10，10，100，200); // 从 点 (110,110) 开 始 绘制 绿色 矩形 








context.restore(); 
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context.fillRect(0，0，100，200); // 从 点 (0,0) 开 始 绘制 红色 敌 形 


2DSaveRestoreExample01.htm 


首先 , 将 fillstyle 设置 为 红色 ,并 调用 save () 保 存 上 下 文 状态 。 接 下 来 ,把 fillstyle 修改 
为 绿色 ,把 坐标 原点 变换 到 (100,100), 再 调用 save () 保存 上 下 文 状 态 。 然 后 , 把 fillstyle 修改 为 蓝 
色 并 绘制 蓝 色 的 和 矩形。 因为 此 时 的 坐标 原点 已 经 变 了 ， 所 以 抢 形 的 左上 和 角 坐标 实际 上 是 (100,100)。 然 后 
调用 *estore(), 之 后 fillstyle 变 回 了 绿色 ,因而 第 二 个 矩形 就 是 绿色 。 之 所 以 第 二 个 矩形 的 起 点 
坐标 是 (110,110)， 是 因为 坐标 位 置 的 变换 仍然 起 作用 。 再 调用 一 次 restore()， 变 换 就 被 取消 了 ， 而 
fillStyle 也 返回 了 红色 。 所 以 最 后 一 个 矩形 是 红色 的 ， 而 且 绘制 的 起 点 是 (0,0)。 

需要 注意 的 是 ，save () 方 法 保存 的 只 是 对 绘图 上 下 文 的 设置 和 变换 ， 不 会 保存 绘图 上 下 文 的 
内 容 。 


15.2.6 ”绘制 图 像 


2D 绘图 上 下 文 内 置 了 对 图 像 的 支持 。 如 果 你 想 把 一 幅 图 像 绘制 到 画布 上 ， 可 以 使 用 drawImage () 
方法 。 根 据 期 望 的 最 终结 果 不 同 ， 调 用 这 个 方法 时 ， 可 以 使 用 三 种 不 同 的 参数 组 合 。 最 简单 的 调用 方式 
是 传人 一 个 HTML <img> 元 素 ， 以 及 绘制 该 图 像 的 起 点 的 x 和 ?坐标 。 例 如 


var image = document.images[0]; 
context.drawImage (image, 10, 10); 




























































































2DDrawlmageExample01.htm 

这 两 行 代码 取得 了 文档 中 的 第 一 幅 图 像 ， 然 后 将 它 绘制 到 上 下 文中 ， 起 点 为 (10,10)。 绘制 到 画布 上 

的 图 像 大 小 与 原始 大 小 一 样 。 如 果 你 想 改 变 绘制 后 图 像 的 大 小 ,可 以 再 多 传人 两 个 参数 ， 分 别 表示 目标 
宽度 和 目标 高 度 。 通 过 这 种 方式 来 缩放 图 像 并 不 影响 上 下 文 的 变换 和 矩阵。 例如: 


context.drawImage (image, 50, 10, 20, 30); 























2DDrawlmageExample01.htm 


执行 代码 后 ， 绘 制 出 来 的 图 像 大 小 会 变 成 20x30 像素 。 

除了 上 述 两 种 方式 , 还 可 以 选择 把 图 像 中 的 某 个 区 域 绘制 到 上 下 文中 。drawImage () 方 法 的 这 种 调 
用 方式 总 共 需 要 传人 9 个 参数 : 要 绘制 的 图 像 、 源 图 像 的 x 坐标、 源 图 像 的 y 坐标 、 源 图 像 的 宽度 、 源 
图 像 的 高 度 、 目 标 图 像 的 x 坐标 、 目 标 图 像 的 y 坐标 、 目 标 图 像 的 宽度 、 目 标 图 像 的 高 度 。 这 样 调用 
drawImage() 方 法 可 以 获得 最 多 的 控制 。 例 如 : 


context.drawImage (image, 0, 10, 50, 50, 0, 100, 40, 60); 















































2DDrawlmageExample01.htm 
这 行 代码 只 会 把 原始 图 像 的 一 部 分 绘制 到 画布 上 。 原 始 图 像 的 这 一 部 分 的 起 点 为 (0,10)， 宽 和 高 都 
是 50 像素 。 最 终 绘 制 到 上 下 文中 的 图 像 的 起 点 是 (0,100)， 而 大 小 变 成 了 40x60 像素 。 
这 种 调用 方式 可 以 创造 出 很 有 意思 的 效果 ， 如 图 15-9 所 示 。 


























图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


15.2 2D 上 下 文 457 











图 15-9 


除了 给 arawImage () 方 法 传人 HITML <img> 元 素 外 , 还 可 以 传人 另 一 个 <canvas> 元 素 作 为 其 第 一 
个 参数 。 这 样 ， 就 可 以 把 另 一 个 画布 内 容 绘制 到 当前 画布 上 。 

结合 使 用 drawImage () 和 其 他 方法 ， 可 以 对 图 像 进行 各 种 基本 操作 。 而 操作 的 结果 可 以 通过 
toDataURL () 方 法 获得 "。 不 过 ， 有 一 个 例外 ， 即 图 像 不 能 来 自 其 他 域 。 如 果 图 像 来 自 其 他 域 ， 调 用 
toDataURL () 会 抛 出 一 个 错误 。 打 个 比方 ， 假 如 位 于 www.example.com 上 的 页 面 绘制 的 图 像 来 自 于 
www.wrox.com， 那 当前 上 下 文 就 会 被 认为 “不 干净 ”， 因 而 会 抛 出 错误 。 


15.2.7 ”阴影 


2D 上 下 文 会 根据 以 下 儿 个 属性 的 值 ， 自 动 为 形状 或 路 径 绘制 出 阴影 。 
口 shadowColor: 用 CSS 颜色 格式 表示 的 阴影 颜色 ， 默 认为 黑色 。 
口 shadowOffsetx: 形状 或 路 径 x 轴 方向 的 阴影 偏 移 量 ， 默 认为 0。 
口 shadowOffsetY: 形状 或 路 径 y 轴 方向 的 阴影 偏 移 量 ， 默 认为 0。 
口 shadowBlur: 模糊 的 像素 数 ， 默 认 0， 即 不 模糊 

这 些 属性 都 可 以 通过 context 对 象 来 修改 。 只 要 在 绘制 前 为 它们 设置 适当 的 值 ， 就 能 自动 产生 阴 
影 。 例 如 : 




































































o 











Var context = drawing.getContext("2d"); 


// 设 置 阴影 

Context . ShadowoOffsetX = 5; 
Context .ShadowoOffsetY = 5; 
context .shadowBlur = 4; 


context .shadowColor "rgba(0, 0, 0, 0.5)"; 


// 绘 制 红色 适 形 
context.fillStyle = "#f£ff0000"; 
context.fillRect(10, 10, 50, 50); 


/ /绘制 蓝 色 适 形 
context.fillStyle = "rgba(0,0,255,1)"; 

















Qa 请 读者 注意 ， 虽然 本 章 至 今 一 直 在 讨论 2D 绘图 上 下 文 , 但 toDataURL () 是 Canvas 对 象 的 方法 ,不 是 上 下 文 对 
象 的 方法 。 
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context.fillRect(30, 30, 50, 50); 
2DFillRectShadowExample0]1.htm 


两 个 矩形 的 阴影 样式 相同 ， 结 果 如 图 15-10 所 示 。 

不 同 浏览 器 对 阴影 的 支持 有 一 些 差 异 。IE9、Firefox 4 和 Opera 11 的 行为 
最 为 规范 ， 其 他 浏览 器 多 多 少 少 会 有 一 些 奇怪 的 现象 ， 其 至 根本 不 支持 阴影 。 
Chrome ( 直至 第 10 版 ) 不 能 正确 地 为 描 边 的 形状 应 用 实心 阴影 。Chrome 和 
Safari ( 直至 第 5 版 ) 在 为 带 透 明 像素 的 图 像 应 用 阴影 时 也 会 有 问题 ， 不 透明 
部 分 的 下 方 本 来 是 该 有 阴影 的 ， 但 此 时 则 一 概 不 见 了 。Safari 也 不 能 给 渐变 图 
形 应 用 阴影 ， 其 他 浏览 器 都 可 以 。 














15-10 














15.2.8 渐变 


渐变 由 canvasGradient 实例 表示 , 很 容易 通过 2D 上 下 文 来 创建 和 修改 。 要 创建 一 个 新 的 线性 渐 
变 ， 可 以 调用 createLinearGradient () 方 法 。 这 个 方法 接收 4 个 参数 : 起 点 的 x 坐标、 起 点 的 y 坐 
标 、 终 点 的 x 坐标 、 终 点 的 y 坐标 。 调 用 这 个 方法 后 ， 它 就 会 创建 一 个 指定 大 小 的 渐变 ， 并 返回 
CanvasGradient 对 象 的 实例 。 

创建 了 渐变 对 象 后 ， 下 一 步 就 是 使 用 addcolorstop () 方 法 来 指定 色 标 。 这 个 方法 接收 两 个 参数 : 
色 标 位 置 和 CSS 颜色 值 。 色 标 位 置 是 一 个 0 (开始 的 颜色 ) 到 1 (结束 的 颜色 ) 之 间 的 数字 。 例 如 : 


中 Var gradient = context.createLinearGradient (30, 30, 70, 70); 





























gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "black"); 


2DFillRectGradientExample01.htm 


此 时 ，graaient 对 象 表示 的 是 一 个 从 画布 上 点 (30.30) 到 点 (70.70) 的 渐变 。 起 点 的 色 标 是 白色 ， 终 
点 的 色 标 是 黑色 。 然 后 就 可 以 把 fillstyle 或 strokestyle 设置 为 这 个 对 象 ， 从 而 使 用 渐变 来 绘制 
多 状 或 描 边 : 

// 绘 制 红色 憩 形 


context.fillStyle = "#f£ff0000"; 
context.fillRect(10, 10, 50, 50); 




















// 绘 制 渐变 和 珑 形 
context .fi11Style = gradient; 
context.fillRect(30, 30, 50, 50); 





2DFillRectGradientExample01.htm 

为 了 让 渐变 覆盖 整个 矩形， 而 不 是 仪 应 用 到 和 矩形 的 一 部 分 ， 和 矩形 和 渐变 对 
象 的 坐标 必须 匹配 才 行 。 以 上 代码 会 得 到 如 图 15-11 所 示 的 结果 。 
如 果 没 有 把 矩形 绘制 到 恰当 的 位 置 ， 那 可 能 就 只 会 显示 部 分 渐变 效果 。 
例如 : 


context.fillStyle = gradient; 





























图 15-11 
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context .fillRect(50, 50, 50, 50); 


2DF'illRectGradientExample02.htm 

这 两 行 代码 执行 后 得 到 的 矩形 只 有 左上 角 稍 微 有 一 点 白色 。 这 主要 是 因为 矩形 的 起 点 位 于 渐变 的 中 

间 位 置 ， 而 此 时 渐变 差不多 已 经 结束 了 。 由 于 渐变 不 重复 ， 所 以 矩形 的 大 部 分 区 域 都 是 黑色 。 确 保 渐 变 
与 形状 对 齐 非 常 重要 ， 有 时 候 可 以 考虑 使 用 函数 来 确保 坐标 合适 。 例 如 : 


function createRectLinearGradient (context, x, y, width, height)t{ 


CY) return context.createLinearGradient (x, y, x+t+width, y+height); 
} 


























2DFillRectGradientExample03.htm 


这 个 函数 基于 起 点 的 zx 和 ?坐标 以 及 宽度 和 高 度 值 来 创建 渐变 对 象 ,从 而 让 我 们 可 以 在 fillRect () 
中 使 用 相同 的 值 。 


Var gradient = createRectLinearGradient (context, 30, 30, 50, 50); 





gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "black"); 


/ /绘制 渐变 适 形 
context .fi llStyle = gradient; 
context.fillRect(30, 30, 50, 50); 


2DF'illRectGradientExample03.htm 

使 用 画布 的 时 候 , 确保 坐标 匹配 很 重要 ,也 需要 一 些 技巧 。 类 似 createRectLinearGradient () 
这 样 的 辅助 方法 可 以 让 控制 坐标 更 容易 一 些 。 

要 创建 径 向 渐变 (或 放射 渐变 ), 可 以 使 用 createRadialGradient () 方 法 。 这 个 方法 接收 6 个 参 
数 ， 对 应 着 两 个 圆 的 圆心 和 半径 。 前 三 个 参数 指定 的 是 起 点 圆 的 原 心 (x 和 y ) 及 半径 ， 后 三 个 参数 指 
定 的 是 终点 圆 的 原 心 (x 和 y) 及 半径 。 可 以 把 径 向 渐变 想象 成 一 个 长 圆 桶 ， 而 这 6 个 参数 定义 的 正 是 
这 个 桶 的 两 个 圆 形 开口 的 位 置 。 如 果 把 一 个 圆 形 开口 定义 得 比 另 一 个 小 一 些 , 那 这 个 圆 桶 就 变 成 了 圆锥 
体 ， 而 通过 移动 每 个 圆 形 开口 的 位 置 ， 就 可 达到 像 旋转 这 个 圆锥 体 一 样 的 效果 。 

如 果 想 从 某 个 形状 的 中 心 点 开始 创建 一 个 向 外 扩散 的 径 向 渐变 效果 ， 就 要 将 两 个 圆 定义 为 同心 圆 。 
比如 , 就 拿 前 面 创建 的 矩形 来 说 , 径 向 渐变 的 两 个 圆 的 圆心 都 应 该 在 (55,55), 因为 矩形 的 区 域 是 从 (30,30) 
到 (80,80)。 请 看 代码 : 


var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30); 





















































gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "black"); 


// 绘 制 红色 适 形 
context.fillStyle = "#f£ff0000"; 
context.fillRect(10, 10, 50, 50); 


// 绘 制 渐变 抵 形 
context.fillStyle = gradient; 
context.fillRect(30, 30, 50, 50); 


2DFillRectGradientExample04.htm 
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运行 代码 ， 会 得 到 如 图 15-12 所 示 的 结果 。 








因为 创建 比较 麻烦 ， 所 以 径 向 渐变 并 不 那么 容易 控制 。 不 过 ,一般 来 说 ， 





让 起 点 贺 和 终点 圆 保持 为 同心 圆 的 情况 比较 多 , 这 时 候 只 要 考虑 给 两 个 圆 设置 


不 同 的 半径 就 好 了 。 
15.2.9 ”模式 


模式 其 实 就 是 重复 的 图 像 ， 可 以 用 来 填充 或 描 边 图 形 。 要 创建 一 个 新 模式 ,可 以 调用 




















图 15-12 

















createPattern () 方 法 并 传人 两 个 参数 : 一 个 HTML <img> 元 素 和 一 个 表示 如 何 重 复 图 像 的 字符 串 。 











其 中 ， 第 二 个 参数 的 值 与 CSS 








的 background-repeat 属性 值 相同 ， 包 括 "zepeat"、"zrepeat-x"、 


"repeat-y" 和 "no-repeat"。 看 一 个 例子 。 


var image = document.images[0], 
C9 pattern = context.createPattern(image, "repeat"); 


/ /绘制 矩形 


context.fillStyle = pattern; 
context.fillRect(10, 10, 150, 150); 


需要 注意 的 是 ,模式 与 渐变 一 样 ， 都 是 从 面 布 的 原点 (0,0) 开 始 的 。 将 填充 样式 ( fil1lstyle ) 设置 





2DFillRectPatternExample01.htm 











为 模式 对 象 ， 只 表示 在 某 个 特定 的 区 域内 显示 重复 的 图 像 ， 而 不 是 要 从 某 个 位 置 开始 绘制 重复 的 图 像 。 
上 面 的 代码 会 得 到 如 图 15-13 所 示 的 结果 。 














SO 


网 15-13 





createPattern () 方 法 的 第 一 个 参数 也 可 以 是 一 个 <viaeo> 元 素 ， 或 者 另 一 个 <canvas> 元 素 。 


15.2.10 “使 用 图 像 数 据 





2D 上 下 文 的 一 个 明显 的 长 处 就 是 ， 可 以 通过 getImagepata() 取 得 原始 图 像 数据 。 这 个 方法 接收 











4 个 参数 : 要 取得 其 数据 的 画 f 





掉 区 域 的 x 和 了 坐标 以 及 该 区 域 的 像素 宽度 和 高 度 。 例 如 ， 要 取得 左上 角 





坐标 为 (10,3)、 大 小 为 50x50 像素 的 区 域 的 图 像 数 据 ， 可 以 使 用 以 下 代码 : 


var imageData = contex 


这 里 返回 的 对 象 是 Image] 














t.getImageData(10, 5, 50, 50); 


Data 的 实例 。 每 个 ImageData 对 象 都 有 三 个 属性 : wiath、height 和 














data。 其 中 aata 属性 是 一 个 数组 ， 保 存 着 图 像 中 每 一 个 像素 的 数据 。 在 aata 数组 中 ， 每 一 个 像素 用 




















图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


15.2 2D 上 下 文 461 





4 个 元 素来 保存 ， 分 别 表 示 红 、 绿 、 蓝 和 透明 度 值 。 因 此 ， 第 一 个 像素 的 数据 就 保存 在 数组 的 第 0 到 第 
3 个 元 素 中 ， 例 如 : 


var data = imageData.data, 


red = data[0], 
green = qata[1]， 
blue = datal[l2], 
alpha = datal[l3]; 


数组 中 每 个 元 素 的 值 都 介 于 0 到 255 之 间 (包括 0 和 255 )。 能 够 直接 访问 到 原始 图 像 数 据 ， 就 能 
以 各 种 方式 来 操作 这 些 数 据 。 例 如 ， 通 过 修改 图 像 数 据 ， 可 以 像 下 面 这 样 创建 一 个 简单 的 灰 阶 过 滤器 。 


var drawing = document .getElementById("drawing"); 

















9 / /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 


Var context = drawing.getContext ("2d"), 
image = document.images[0], 
imageData, data, 

i, len, average, 
red, green, blue, alpha; 


/ /绘制 原始 图 像 


context.drawImage (image, 0, 0); 


// 取 得 图 像 数 据 
imageData = context.getImageData(0, 0, image.width, image.height); 
data = imageData.data; 


for (i=0, len=data.length; i < len; i+=4){ 
red = datal[il]; 
green = data[i+1]; 
blue = datal[li+2]; 
alpha = datal[li+3]; 


// 求 得 rgb 平均 值 


average = Math.floor((red + green + blue) / 3); 


// 设 置 颜色 值 ， 透 明度 不 变 


datal[i] = average; 
datal[i+1] = average; 
datal[i+2] = average; 


} 
// 回 写 图 像 数 据 并 显示 结果 


imageData.data = data; 
context .putImageData (imageData, 0, 0); 


2DImageDataExample01.htm 


这 个 例子 首先 在 画面 上 绘制 了 一 幅 图 像 , 然后 取得 了 原始 图 像 数据 。 其 中 的 for 循环 遍历 了 图 像 数 
据 中 的 每 一 个 像素 。 这 里 要 注意 的 是 ， 每 次 循环 控制 变量 i 都 递增 4。 在 取得 每 个 像素 的 红 、 绿 、 蓝 颜 
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色 值 后 , 计算 出 它们 的 平均 值 。 再 把 这 个 平均 值 设置 为 每 个 颜色 的 值 , 结果 就 是 去 掉 了 每 个 像素 的 颜色 ， 
只 保留 了 亮度 接近 的 灰 度 值 ( 即 彩色 变 黑 白 )。 在 把 aata 数组 回 写 到 imageData 对 象 后 ， 调 用 
putImageData() 方 法 把 图 像 数 据 绘制 到 画布 上 。 最 终 得 到 了 图 像 的 黑白 版 。 

当然 ， 通 过 操作 原始 像素 值 不 仅 能 实现 灰 阶 过 滤 ， 还 能 实现 其 他 功能 。 要 了 解 通过 操作 原始 图 像 数 
据 实现 过 滤器 的 更 多 信息 ， 请 参考 IImari Heikkinen 的 文章 “Making Image Filters with Canvas”( 基于 
Canvas 的 图 像 过 滤器 ): http:/www.html5rocks.com/en/tutorials/canvas/imagefilters/。 












































只 有 在 画布 “干净 ”的 情况 下 ( 即 图 像 并 非 来 自 其 他 域 ) ， 才 可 以 取得 图 像 数据 。 


如 果 和 画布 “不 干净 ”， 那 么 访问 图 像 数 据 时 会 导致 JavaScript 错误 。 





15.2.11 ”合成 
还 有 两 个 会 应 用 到 2D 上 下 文中 所 有 绘制 操作 的 属性 : globalAlpha 和 globalComposition- 


Operation。 其 中 ，globalAlpha 是 一 个 介 于 0 和 1 之 间 的 值 (包括 0 和 1)， 用 于 指定 所 有 绘制 的 透 
明度 。 默 认 值 为 0。 如 果 所 有 后 续 操作 都 要 基于 相同 的 透明 度 ， 就 可 以 先 把 globalAlpha 设置 为 适当 
值 ， 然 后 绘制 ， 最 后 再 把 它 设 置 回 默认 值 0。 下 面 来 看 一 个 例子 。 


// 绘 制 红色 矮 形 
context.fillStyle = "#Ef0000" 7 
context.,. fillRect(10, 10, 50, 50)y 





























// 修 改 全 局 透明 度 
Context .globalAlpha = 0.5; 


/ /绘制 蓝 色 矩形 
context .fillstyle = "rgba(0,0,255,1)"; 
context.fillRect(30, 30, 50, 50); 


// 重 置 全 局 透明 度 
context.globalAlpha = 0; 


2DGlobalAlphaExample01.htm 


在 这 个 例子 中 ， 我 们 把 蓝 色 和 抢 形 绘制 到 了 红色 矩形 上 面 。 因 为 在 绘制 蓝 色 和 矩形 前 ，globalAlpha 
已 经 被 设置 为 0.5， 所 以 蓝 色 抑 形 会 呈现 半 透 明 效 果 ， 透 过 它 可 以 看 到 下 面 的 红色 和 矩形 。 
第 二 个 属性 globalcompositionoperation 表示 后 绘制 的 图 形 怎样 与 完 绘制 的 图 形 结合 。 这 个 
属性 的 值 是 字符 串 ， 可 能 的 值 如 下 。 
口 source-over (默认 值 ); 后 绘制 的 图 形 位 于 先 绘制 的 图 形 上 方 。 
口 source-in: 后 绘制 的 图 形 与 先 绘制 的 图 形 重 又 的 部 分 可 见 ， 两 者 其 他 部 分 完全 透明 。 
口 source-out: 后 绘制 的 图 形 与 先 绘制 的 图 形 不 重合 的 部 分 可 见 ， 先 绘制 的 图 形 完全 透明 。 
口 source-atop: 后 绘制 的 图 形 与 先 绘制 的 图 形 重叠 的 部 分 可 见 ， 先 绘制 图 形 不 受 影响 。 
口 gestination-over: 后 绘制 的 图 形 位 于 先 绘制 的 图 形 下 方 ,只 有 之 前 透明 像素 下 的 部 分 才 可 见 。 
口 destination-in: 后 绘制 的 图 形 位 于 先 绘制 的 图 形 下方 ， 两 者 不 重 琶 的 部 分 完全 透明 。 
D aestination-out: 后 绘制 的 图 形 控 除 与 先 绘制 的 图 形 重 又 的 部 分 。 
口 destination-atop: 后 绘制 的 图 形 位 于 先 绘制 的 图 形 下 方 ， 在 两 者 不 重 县 的 地 方 ， 先 绘制 的 
























































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


15.3 WebGL 463 

















图 形 会 变 透明 。 
口 1ighter: 后 绘制 的 图 形 与 先 绘制 的 图 形 重 受 部 分 的 值 相 加 ， 使 该 部 分 变 亮 。 
口 copy: 后 绘制 的 图 形 完全 替代 与 之 重 和 的 先 绘制 图 形 。 
口 xor: 后 绘制 的 图 形 与 先 绘制 的 图 形 重 双 的 部 分 执行 “ 异 或 ”操作 。 

这 个 合成 操作 实际 上 用 语言 或 者 黑白 图 像 是 很 难说 清楚 的 。 要 了 解 每 个 操作 的 具体 效果 ， 请 参见 
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html。 推 荐 使 用 IE9+ 或 Firefox 
4+ 访 问 前 面 的 网 页 ， 因 为 这 两 款 浏 览 器 对 Canvas 的 实现 最 完善 。 下 面 来 看 一 个 例子 。 

/ /绘制 红色 矩形 


context.fillStyle = "#f£ff0000"; 
context.fillRect(10, 10, 50, 50); 




























































































/ /设置 合成 操作 


context .globalCompositeOperation = "destination-over"; 
/ /绘制 蓝 色 适 形 


context .fillSsStyle = "rgba(0,0,255,1)"; 
context.fillRect(30, 30, 50, 50); 


2DGlobalCompositeOperationExample01.htm 





如 果 不 修 改 globalcompositionoperation， 那 么 蓝 色 和 矩形 应 该 位 于 红色 和 矩形 之 上 。 但 把 
globalCompositionOperation 设置 为 "destination-ovezr" 之 后 ， 红 色 和 矩形 跑 到 了 蓝 色 矩形 上 面 。 

在 使 用 globalcompositionoperation 的 情况 下 ， 一 定 要 多 测试 一 些 浏览 句 。 因 为 不 同 浏览 器 
对 这 个 属性 的 实现 仍然 存在 较 大 的 差别 。Safari 和 Chrome 在 这 方面 还 有 问题 ， 至 于 有 什么 问题 ， 大 家 
可 以 比较 在 打开 上 述 页 面 的 情况 下 ，IE9+ 和 Firefox 4+ 与 它们 有 什么 差异 。 


15.3 WebGL 


WebGL 是 针对 Canvas 的 3D 上下文。 与 其 他 Web 技术 不 同 ，WebGL 并 不 是 W3C 制定 的 标准 ， 而 
是 由 Khronos Group 制定 的 。 其 官方 网 站 是 这 样 介绍 的 :“Khronos Group 是 一 个 非 鳃 利 的 由 会 员 资 助 的 
协会 ， 专 注 于 为 并 行 计算 以 及 各 种 平台 和 设备 上 的 图 形 及 动态 媒体 制定 无 版 税 的 开放 标准 。” Khronos 
Group 也 设计 了 其 他 图 形 处 理 API， 比 如 OpenGL ES 2.0。 浏览 器 中 使 用 的 WebGL 就 是 基于 OpenGL ES 
2.0 制定 的 。 

OpenGL 等 3D 图 形 语言 是 非常 复杂 的 , 本 书 不 可 能 介绍 其 中 每 一 个 概念 。 熟悉 OpenGL ES 2.0 的 读 
者 可 能 会 觉得 WebGL 更 好 理解 一 些 ， 因 为 好 多 概念 是 相通 的 。 

本 节 将 适当 地 介绍 OpenGL ES 2.0 的 一 些 概念 ， 尽 力 解释 其 中 的 某 些 部 分 在 WebGL 中 的 实现 。 要 
全 面 了 解 OpenGL ， 请 访问 www.opengl.org。 要 全 面 学 习 WebGL ， 请 参考 www.learningwebgl.com， 其 
中 包含 非常 棒 的 系列 教程 ”。 


15.3.1 ”类 型 化 数组 
WebGL 涉及 的 复杂 计算 需要 提前 知道 数值 的 精度 ， 而 标准 的 JavaScript 数值 无 法 满足 需要 。 为 此 ， 



















































































Qa 中文 翻译 版 请 参考 http://www.hiwebgl.com/?p=42。 
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WebGL 引入 了 一 个 概念 ， 叫 类 型 化 数组 ( typed arrays )。 类 型 化 数组 也 是 数组 ， 只 不 过 其 元 素 被 设置 为 
特定 类 型 的 值 。 

类 型 化 数组 的 核 ， 0 ArrayBuffer 的 类 型 。 每 个 ArrayBuffer 对 象 表示 的 只 是 内 存 
中 指定 的 字 节 数 ， 但 不 会 指定 这 些 字 节 用 于 保存 什么 类 型 的 数据 。 通 过 ArrayBuffer 所 能 做 的 ， 就 是 
为 了 将 来 使 用 而 分 配 一 定数 量 的 字 节 。 例 如 ， 下 面 这 行 代码 会 在 内 存 中 分 配 20B。 


Var buffer = new ArrayBuffer(20); 
创建 了 ArrayBuffer 对 象 后 ， 能 够 通过 该 对 象 获 得 的 信息 只 有 它 包含 的 字 节 数 ， 方 法 是 访问 其 
byteLength 属性 : 






































Var bytes = buffer.byteLength; 


虽然 ArrayBuffer 对 象 本 身 没有 多 少 可 说 的 ， 但 对 WebGL 而 言 ， 使 用 它 是 极其 重要 的 。 而 且 ， 
在 涉及 视图 的 时 候 ， 你 才 会 发 现 它 原来 还 是 很 有 意思 的 。 

1. 视图 

使 用 ArrayBuffer (数组 缓冲 器 类 型 ) 的 一 种 特别 的 方式 就 是 用 它 来 创建 数组 缓冲 器 视图 o 其 中 ， 
最 常见 的 视图 是 DatavView, 通 过 它 可 以 选择 ArrayBuffer 中 一 小 段 字 节 。 为 此 ,可 以 在 创建 DataView 
实例 的 时 候 传人 一 个 ArrayBuffer、 一 个 可 选 的 字 节 偏 移 量 (从 该 字 节 开始 选择 ) 和 一 个 可 选 的 要 选 
择 的 字 节 数 。 例 如 : 

// 基 于 整个 缓冲 器 创建 一 个 新 视图 


Var View = new DataView(buffer); 

























































































// 创 建 一 个 开始 于 字 节 9 的 新 视图 


Var View = new DataView(buffer, 9); 


/ /创建 一 个 从 字 节 9 开始 到 字 节 18 的 新 视图 

Var View = new DataView(buffer, 9, 10); 

实例 化 之 后 ，DataView 对 象 会 把 字 节 偏 移 量 以 及 字 节 长 度 信 息 分 别 保存 在 byteoffset 和 
byteLengtn 属性 中 。 


























alert (view.byteOffset); 
alert (view.byteLength); 














通过 这 两 个 属性 可 以 在 以 后 方便 地 了 解 视 图 的 状态 。 另 外 ， 其 buffer 属性 也 可 以 取得 数组 组 
冲 器 。 
读 取 和 写 人 DataView 的 时 候 ， 要 根据 实际 操作 的 数据 类 型 ， 选 择 相应 的 getter 和 setter 方法 。 下 





表 列 出 了 DataView 支持 的 数据 类 型 以 及 相应 的 读 写 方法 。 











数据 类 型 getter setter 

有 符号 8 位 整数 getIint8 (byteoffset) setInt8(byteOoffset, value) 

无 符号 8 位 整数 getUint8 (byteOffset) setUint8 (byteOffset, value) 

有 符号 16 位 整数 ”getInt16 (byteOffset,1littlegEndian) SetInt16 (byteoffset, 
value,1littleEndian) 

无 符号 16 位 整数 getUint16 (byteOffset,1littleEndian) setUint16 (byteOffset,value, 
littleEndian) 

有 符号 32 位 整数 getInt32 (byteOffset,1littleEndian) SetInt32 (byteOffset, 
value,1littleEndian) 
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( 续 ) 
数据 类 型 getter setter 

无 符号 32 位 整数 ”getUint32 (byteOffset,1littleEndian) setUint32 (byteOffset,value, 
littleEndian) 

32 位 浮 点 数 getFloat32 (byteOffset,1ittleEndian) setFloat32 (byteOffset,value, 
littleEndian) 

64 位 浮 点 数 getFloat64 (byteOffset,1ittleEndian) setFloat64 (byteOoffset,value, 
littleEndian) 














所 有 这 些 方法 的 第 一 个 参数 都 是 一 个 字 节 偏 移 量 ， 表 示 要 从 哪个 字 节 开 始 读 取 或 写 人 。 不 要 忘 了 ， 
要 保存 有 些 数 据 类 型 的 数据 ,， 可 能 需要 不 止 1B。 比 如 , 无 符号 8 位 整数 要 用 1B, 而 32 位 浮 点 数 则 要 用 
4B。 使 用 Dataview， 就 需要 你 自己 来 管理 这 些 细节 ， 即 要 明确 知道 自己 的 数据 需要 多 少 字 节 ， 并 选择 
正确 的 读 写 方法 。 例 如 : 

Var buffer = new ArrayBuffer(20),， 


CS ) view = new DataView (buffer), 
value; 
































view.setUint16(0, 25); 
view.setUint16(2，50); // 不 能 从 字 节 1 开始 ， 因 为 16 位 整数 要 用 2B 
value = view.getUint16(0); 


DataViewExample01.htm 


以 上 代码 把 两 个 无 符号 16 位 整数 保存 到 了 数组 缓冲 器 中 。 因 为 每 个 16 位 整数 要 用 2B， 所 以 保存 
第 一 个 数 的 字 节 偏 移 量 为 0， 而 保存 第 二 个 数 的 字 节 偏 移 量 为 2。 
用 于 读 写 16 位 或 更 大 数值 的 方法 都 有 一 个 可 选 的 参数 1ittleEndian。 这 个 参数 是 一 个 布尔 值 ， 
表示 读 写 数值 时 是 否 采 用 小 端 字 节 序 〈 即 将 数据 的 最 低 有 效 位 保存 在 低 内 存 地 址 中 )， 而 不 是 大 端 字 节 
序 (即将 数据 的 最 低 有 效 位 保存 在 高 内 存 地址 中 )。 如 果 你 也 不 确定 应 该 使 用 哪 种 字 节 序 ， 那 不用 管 它 ， 
就 采用 默认 的 大 端 字 节 序 方式 保存 即 可 。 
因为 在 这 里 使 用 的 是 字 节 偏 移 量 , 而 非 数 组 元 素数 , 所 以 可 以 通过 几 种 不 同 的 方式 来 访问 同一 字 节 。 
例如 : 

Var buffer = new ArrayBuffer(20), 


C9 View = new DataView(buffer), 
value; 



























































view.setUint16(0, 25); 
value = view.getInt8(0); 


alert (value); //0 


DataViewExample02.htm 

在 这 个 例子 中 ， 数 值 25 以 16 位 无 符号 整数 的 形式 被 写 人 ， 字 节 偏 移 量 为 0。 然后， 再 以 8 位 有 符 

号 整数 的 方式 读 取 该 数据 ,得 到 的 结果 是 0。 这 是 因为 25 的 二 进 制 形式 的 前 8 位 (第 一 个 字 节 ) 全 部 是 
0， 如 图 15-14 所 示 。 
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数据 保存 到 哪里 ,需要 占用 多 少 字 节 。 这 样 一 来 ,就 会 带 来 很 多 工作 量 , 因此 类 型 化 视图 也 就 应 运 而 生 。 












































字 节 0 六 全 
of ofofofo 全 of ofof11ofofi 
8 位 整数 
16 位 束 雪 
图 15-14 





可 见 , 虽然 DataView 能 让 我 们 在 字 节 级 别 上 读 写 数组 缓冲 器 中 的 数据 , 但 我 们 必须 自己 记 住 要 将 























2. 类 型 化 视图 
类 型 化 视图 一 般 也 被 称 为 类 型 化 数组 ,因为 它们 除了 元 素 必须 是 某 种 特定 的 数据 类 型 外 ,， 与 常规 的 





数组 无 异 。 类 型 化 视图 也 分 几 种 ， 而 且 它们 都 继承 了 DataView。 


如 ， 


口 Int8Array: 表示 8 位 二 补 整数 。 

口 Uint8Array: 表示 8 位 无 符号 整数 。 

口 Int16Array: 表示 16 位 二 补 整数 。 

口 Uint16Array: 表示 16 位 无 符号 整数 。 

口 Int32Array: 表示 32 位 二 补 整数 。 

口 Uint32Array: 表示 32 位 无 符号 整数 。 

口 Float32Array: 表示 32 位 IEEE 浮 点 值 。 

口 Float64Array: 表示 64 位 IEEE 浮 点 值 。 

每 种 视图 类 型 都 以 不 同 的 方式 表示 数据 ， 而 同一 数据 视 选择 的 类 型 不 同 有 可 能 占用 一 或 多 字 节 。 例 
20B 的 ArrayBuffer 可 以 保存 20 个 Int8Array 或 Uint8Array, 或 者 10 个 Int16RArray 或 














Uint16Array, 或 者 5 个 Int32Array、Uint32Array 或 Float32Array, 或 者 2 个 Float64Array。 


使 











由 于 这 些 视图 都 继承 自 DataVview， 因 而 可 以 使 用 相同 的 构造 函数 参数 来 实例 化 。 第 一 个 参数 是 要 





用 ArrayBuffer 对 象 , 第 二 个 参数 是 作为 起 点 的 字 节 偏 移 量 ( 默认 为 0), 第 三 个 参数 是 要 包含 的 字 

















节 数 。 三 个 参数 中 只 有 第 一 个 是 必需 的 。 下 面 来 看 几 个 例子 。 


// 创 建 一 个 新 数组 ， 使 用 整个 缓冲 器 
var int8s = new Int8Array (buffer); 


// 只 使 用 从 字 节 9 开始 的 缓冲 器 
Var int16s = new Intl6Array (buffer, 9); 


// 只 使 用 从 字 节 9 到 字 节 18 的 缓冲 器 
var uint16s = new Uintl6éArray (buffer, 9, 10); 


能 够 指定 缓冲 器 中 可 用 的 字 节 段 ， 意 味 着 能 在 同一 个 缓冲 器 中 保存 不 同类 型 的 数值 。 比 如 ， 下 面 的 








代码 就 是 在 缓冲 器 的 开头 保存 8 位 整数 ， 而 在 其 他 字 节 中 保存 16 位 整数 。 





// 使 用 缓冲 器 的 一 部 分 保存 8 位 整数 ， 另 一 部 分 保存 16 位 整数 
var int8s = new Int8Array (buffer, 0, 10); 
var uint16s = new Uintl6Array (buffer, 11, 10); 


每 个 视图 构造 聘 数 都 有 一 个 名 为 BYTES_PER_ELEMENT 的 属性 ,表示 类 型 化 数组 的 每 个 元 素 需 要 多 














由 



























































少 字 节 。 因此 , Uint8Array .BYTES_PER_ELEMENT 就 是 1, 而 Float32Array .BYTES_PER_ELEMENT 
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则 为 4。 可 以 利用 这 个 属性 来 辅助 初始 化 。 


// 需 要 10 个 元 素 空间 
Var int8s = new Int8Array (buffer, 0, 10 * Int8Array .BYTES_PER_ ELEMENT); 























// 需 要 5 个 元 素 空间 
Var Uint16s = new Uintl6Array (buffer, int8s.byteOffset + int8s.byteLength, 
5 * Uint1l6Array .BYTES_PER ELEMENT); 

以 上 代码 基于 同一 个 数组 缓冲 器 创建 了 两 个 视图 。 缓 冲 需 的 前 10B 用 于 保存 8 位 整数 , 而 其 他 字 节 
用 于 保存 无 符号 16 位 整数 。 在 初始 化 Uint16Arravy 的 时 候 ， 使 用 了 Int8Array 的 byteoffset 和 
byteLength 属性 ， 以 确保 uint16s 开始 于 8 位 数据 之 后 。 

如 前 所 述 ， 类 型 化 视图 的 目的 在 于 简化 对 二 进 制 数 据 的 操作 。 除 了 前 面 看 到 的 优点 之 外 ,创建 类 型 
化 视图 还 可 以 不 用 首先 创建 arrayBuffet 对 象 。 只 要 传人 希望 数组 保存 的 元 素数 ， 相 应 的 构造 函数 就 
可 以 自动 创建 一 个 包含 足够 字 节 数 的 ArrayBuffer 对 象 ， 例 如 : 


/ /创建 一 个 数组 保存 10 个 8 位 整数 (10 字 节 ) 
var int8s = new Int8Array (10); 

































































/ /创建 一 个 数组 保存 10 个 16 位 整数 (20 字 节 ) 

var int16s = new Intl6Array (10); 

男 外 ， 也 可 以 把 常规 数组 转换 为 类 型 化 视图 ， 只 要 把 常规 数组 传人 类 型 化 视图 的 构造 聘 数 即 可 : 

/ /创建 一 个 数组 保存 5 个 8 位 整数 (10 字 节 ) 

Var int8s = new Int8Array([10, 20, 30, 40, 50]); 

这 是 用 默认 值 来 初始 化 类 型 化 视图 的 最 佳 方式 ， 也 是 WebGL 项 目 中 最 常用 的 方式 。 

以 这 种 方式 来 使 用 类 型 化 视图 ， 可 以 让 它们 看 起 来 更 像 array 对 象 ， 同 时 也 能 确保 在 读 写 信 息 的 
时 候 使 用 正确 的 数据 类 型 。 
使 用 类 型 化 视图 时 ， 可 以 通过 方 括号 语法 访问 每 一 个 数据 成 员 ,， 可 以 通过 length 属性 确定 数组 中 
有 多 少 元 素 。 这 样 ， 对 类 型 化 视图 的 迭代 与 对 Array 对 象 的 迭代 就 是 一 样 的 了 。 


for (var i=0, len=int8s.length; i < len; i++){ 
console.log("Value at position " +1I+ "is "+ int8s[i]); 






























































} 

当然 , 也 可 以 使 用 方 括号 语法 为 类 型 化 视图 的 元 素 赋值 。 如 果 为 相应 元 素 指定 的 字 节 数 放 不 下 相应 
的 值 ， 则 实际 保存 的 值 是 最 大 可 能 值 的 模 。 例如 ,无 符号 16 位 整数 所 能 表示 的 最 大 数值 是 65535， 如 果 
你 想 保存 65536， 那 实际 保存 的 值 是 0; 如 果 你 想 保存 65537， 那 实际 保存 的 值 是 1， 依 此 类 推 。 

var uintl6s = new Uintl6Array (10); 


uint16s[0] = 65537; 
alert (uint16s[0]); //1 


数据 类 型 不 匹配 时 不 会 抛 出 错误 ， 所 以 你 必须 自己 保证 所 赋 的 值 不 会 超过 相应 元 素 的 字 节 限制 。 

类 型 化 视图 还 有 一 个 方法 ， 即 subarray() ,使 用 这 个 方法 可 以 基于 底层 数组 缓冲 器 的 子 集 创 建 一 
个 新 视图 。 这 个 方法 接收 两 个 参数 : 开始 元 素 的 索引 和 可 选 的 结束 元 素 的 索引 。 返 回 的 类 型 与 调用 该 方 
法 的 视图 类 型 相同 。 例 如 : 


var Uint16s = new Uintl6Array (10), 
sub = uintl6s.subarray(2, 5); 
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在 以 上 代码 中 ，sub 也 是 Uint16Array 的 一 个 实例 ， 而 且 底 层 与 uint16s 都 基于 同一 个 
ArrayBuffer。 通过 大 视图 创建 小 视图 的 主要 好 处 就 是 , 在 操作 大 数组 中 的 一 部 分 元 素 时 , 无 需 担 心意 
外 修改 了 其 他 元 素 。 

类 型 化 数组 是 WebGL 项 目 中 执行 各 种 操作 的 重要 基础 。 














15.3.2 WebGL 上 下 文 


目前 ， 在 支持 的 浏览 器 中 ，WebGL 的 名 字 叫 "experimental-webg1"， 这 是 因为 WebGL 规范 仍 
然 未 制定 完成 。 制 定 完成 后 ， 这 个 上 下 文 的 名 字 就 会 变 成 简单 的 "webgl"。 如 果 浏 览 器 不 支持 WebGL， 
那么 取得 该 上 下 文 时 会 返回 nul1。 在 使 用 WebGL 上 下 文 时 ,务必 先 检测 一 下 返回 值 。 


Var drawing = document .getElementById("drawing"); 











/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)t{ 


var gl = drawing.getContext ("experimental-webgl"); 
if (g1)t 

// 使 用 WebGL 
} 


WebGLExample01.htm 


一 般 都 把 WebGL 上 下 文 对 象 命名 为 g1。 大 多 数 WebGL 应 用 和 示例 都 遵守 这 一 约定 ,因为 OpenGL 
ES 2.0 规定 的 方法 和 值 通常 都 以 "g1 "开头 。 这 样 做 也 可 以 保证 JavaScript 代码 与 OpenGL 程序 更 相近 。 
取得 了 WebGL 上 下 文 之 后 ， 就 可 以 开始 3D 绘图 了 。 如 前 所 述 ，WebGL 是 OpenGL ES 2.0 的 Web 
版 ， 因 此 本 节 讨 论 的 概念 实际 上 就 是 OpenGL 概念 在 JavaScript 中 的 实现 。 
通过 给 getcontext () 传递 第 二 个 参数 ， 可 以 为 WebGL 上 下 文 设置 一 些 选 项 。 这 个 参数 本 身 是 一 
个 对 象 ， 可 以 包含 下 列 属性 。 
口 alpha: 值 为 true， 表 示 为 上 下 文 创建 一 个 Alpha 通道 缓冲 区 ; 默认 值 为 true。 
口 dqepth: 值 为 true， 表 示 可 以 使 用 16 位 深 缓 冲 区 ; 默认 值 为 true。 
口 stencil: 值 为 true， 表示 可 以 使 用 8 位 模板 缓冲 区 ; 默认 值 为 false。 
口 antialias: 值 为 true， 表 示 将 使 用 默认 机 制 执行 抗 锯齿 操作 ; 默认 值 为 true。 
口 premultipliedAlpha: 值 为 true， 表 示 绘 图 缓冲 区 有 预 有 Alpha 值 ; 默认 值 为 true。 
口 preserveDrawingBuffer: 值 为 true, 表示 在 绘图 完成 后 保留 绘图 缓冲 区 ; 默认 值 为 false。 
建议 确实 有 必要 的 情况 下 再 开启 这 个 值 ， 因 为 可 能 影响 性 能 。 
传递 这 个 选项 对 象 的 方式 如 下 : 


var drawing = dqocument .getElementById("drawing"); 






















































































监 怠 


// 确 定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)t{ 


var gl = drawing.getContext ("experimental-webgl", { alpha: false}); 


if (g1){ 
// 使 用 WebGL 
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大 多 数 上 下 文选 项 只 在 高 级 技巧 中 使 用 。 很 多 时 候 ， 各 个 选项 的 默认 值 就 能 满足 我 们 的 要 求 。 
如 果 getcontext () 无 法 创建 WebGL 上 下 文 ， 有 的 浏览 器 会 抛 出 错误 。 为 此 ， 最 好 把 调用 封装 到 
一 个 try-catch 块 中 。 





Insert IconMargin [downloadlvar drawing = document .getElementById("drawing"), 
gl; 


/ /确定 浏览 器 支持 <canvas> 元 素 
if (drawing.getContext)f{ 
try { 
gl = drawing.getContext ("experimental-webgl"); 
} catch (ex) { 





// 什 么 也 不 做 
} 
if (Ol) 

// 使 用 WebGL 
} else { 


alert ("WebGL context could not be created."); 


} 


WebGLExample01.htm 

1. 常量 

如 果 你 熟悉 OpenGL， 那 肯定 会 对 各 种 操作 中 使 用 非常 多 的 常量 印象 深刻 。 这 些 常量 在 OpenGL 中 
都 带 前 缀 cL_。 在 WebGL 中 ， 保 存在 上 下 文 对 象 中 的 这 些 常 量 都 没有 GL_ 前 级 。 比 如 说 ， 
GL_COLOR_BUFFER_BIT 常量 在 WebGL 上 下 文中 就 是 g1 .COLOR_BUFFER_BIT。WebGL 以 这 种 方式 文 
持 大 多 数 OpenGL 常量 ( 有 一 部 分 常量 是 不 支持 的 )。 

2. 方法 命名 

OpenGL (以 及 WebGL ) 中 的 很 多 方法 都 试图 通过 名 字 传 达 有 关 数 据 类 型 的 信息 。 如 果 某 方法 可 以 
接收 不 同类 型 及 不 同 数量 的 参数 ， 看 方法 名 的 后 缀 就 可 以 知道 。 方 法 名 的 后 级 会 包含 参数 个 数 (1 到 4) 
和 接收 的 数据 类 型 (于 表示 浮 点 数 ，i 表示 整数 ),。 例 如，g1 .uniform4f () 意味 着 要 接收 4 个 浮 点 数 ， 
而 gl.uniform3i() 则 表示 要 接收 3 个 整数 。 

也 有 很 多 方法 接收 数组 参数 而 非 一 个 个 单独 的 参数 。 这 样 的 方法 其 名 字 中 会 包含 字母 v ( 即 vector， 
矢量 ) 因此，gl.uniform3iv() 可 以 接收 一 个 包含 3 个 值 的 整数 数组 。 请 大 家 记 住 以 上 命名 约定 ， 这 
样 对 理解 后 面 关 于 WebGL 的 讨论 很 有 帮助 。 

3. 准备 绘图 

在 实际 操作 WebGL 上 下 文 之 前 ， 一 般 都 要 使 用 某 种 实 色 清 除 <canvas>， 为 绘图 做 好 准备 。 为 此 ， 
首先 必须 使 用 clearcolor () 方 法 来 指定 要 使 用 的 颜色 值 , 该 方法 接收 4 个 参数 : 红 、 绿 、 蓝 和 透明 度 。 
每 个 参数 必须 是 一 个 0 到 1 之 间 的 数值 ， 表 示 每 种 分 量 在 最 终 颜色 中 的 强度 。 来 看 下 面 的 例子 。 


vlcClearcolor (0 0 0 7) //black 
gl.clear (gl .COLOR BUFFER_ BIT); 
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以 上 代码 把 清理 颜色 缓冲 区 的 值 设置 为 黑色 , 然后 调用 了 clear () 方 法 , 这 个 方法 与 OpenGL 中 的 
glClear () 等 价 。 传 人 的 参数 g1 .COLOR_BUFFER_BIT 告诉 WebGL 使 用 之 前 定义 的 颜色 来 填充 相应 区 
域 。 一 般 来 说 ， 都 要 先 清理 缓冲 区 ， 然 后 再 执行 其 他 绘图 操作 。 

4. 视 口 与 坐标 

开始 绘图 之 前 , 通常 要 先 定义 WebGL 的 视 口 (viewport )。 默 认 情 况 下 , 视 口 可 以 使 用 整个 <canvas> 
区 域 。 要 改变 视 口 大 小 ， 可 以 调用 viewport () 方 法 并 传人 4 个 参数 :( 视 口 相对 于 <canvas> 元 素 的 ) 
x 坐标 、y 坐标 、 宽 度 和 高 度 。 例 如 ， 下 面 的 调用 就 使 用 了 <canvas> 元 素 : 

gl.viewport(0, 0, drawing.width, drawing.height); 

视 口 坐标 与 我 们 通常 熟悉 的 网 页 坐标 不 一 样 。 视 口 坐标 的 原点 (0,0) 在 <canvas> 元 素 的 左下 角 , x 
轴 和 yy 轴 的 正方 向 分 别 是 向 右 和 向 上 ， 可 以 定义 为 (width-1, height-1)， 如 图 15-15 所 示 。 


<canvas> (width—1, height—1) 



















































































(0,0) 





图 15-15 

















知道 怎么 定义 视 口 大 小 ， 就 可 以 只 在 <canvas> 元 素 的 部 分 区 域 中 绘图 。 来 看 下 面 的 例子 。 


vb 





// 视 口 是 <canvas> 左 下 角 的 四 分 之 一 区 域 
gl.viewport(0, 0, drawing.width/2, drawing.height/2); 


// 视 口 是 <canvas> 左 上 角 的 四 分 之 一 区 域 
gl.viewport(0, drawing.height/2, drawing.width/2, drawing.height/2); 


// 视 口 是 <canvas> 右 下 角 的 四 分 之 一 区 域 
gl.viewport (drawing.width/2, 0, drawing.width/2, drawing.height/2); 


另外 ,， 视 口内 部 的 坐标 系 与 定义 视 口 的 坐标 系 也 不 一 样 。 在 视 口 内 部 ， 坐 标 原 点 (0,0) 是 视 口 的 中 心 
点 ， 因 此 视 口 左 下 角 坐 标 为 (-1, -1)， 而 右上 角 坐 标 为 (1,1)， 如 图 15-16 所 示 。 


视 

















(1,1) 





。(0.0) 








(1 一 1) 








图 15-16 


如 果 在 视 口内 部 绘图 时 使 用 视 口 外 部 的 坐标 ,结果 可 能 会 被 视 口 剪 切 。 比 如 ,要 绘制 的 形状 有 一 个 
顶点 在 (1.2)， 那 么 该 形状 在 视 口 右 侧 的 部 分 会 被 剪 切 掉 。 


5. 缓冲 区 
顶点 信息 保存 在 JavaScript 的 类 型 化 数组 中 ,使 用 之 前 必须 转换 到 WebGL 的 缓冲 区 。 要 创建 缓冲 区 ， 
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可 以 调用 gl .createBuffer ()， 然 后 使 用 gl1 .bingdBuffer () 绑 定 到 WebGL 上 下 文 。 这 两 步 做 完 之 
后 ， 就 可 以 用 数据 来 填充 缓冲 区 了 。 例 如 ; 
Var buffer = gl.createBuffer(); 


9g9l.bindBuffer (gl .ARRAY_ BUFFER, buffer); 
gl .bufferData(g]l.ARRAY BUFFER, new Float32Array([0, 0.5, 1]), gl.STATIC DRAW); 


调用 gl1 .bindBuffer() 可 以 将 buffer 设置 为 上 下 文 的 当前 缓冲 区 。 此 后 ， 所 有 缓冲 区 操作 都 
直接 在 buffer 中 执行 。 因此, 调用 gl1 .pbufferData() 时 不 需要 明确 传人 buffer 也 没有 问题 。 最 后 
一 行 代码 使 用 Float32Array 中 的 数据 初始 化 了 buffer (一 般 都 是 用 Float32Array 来 保存 顶点 信 
息 )。 如 果 想 使 用 drawElements () 输 出 缓冲 区 的 内 容 ， 也 可 以 传人 g1 .ELEMENT_ARRAY_BUFFER。 

gl .bufferData() 的 最 后 一 个 参数 用 于 指定 使 用 缓冲 区 的 方式 ， 取 值 范 围 是 如 下 几 个 常量 。 
口 g1 .STATIC_DRAW: 数据 只 加 载 一 次 ， 在 多 次 绘图 中 使 用 。 

口 g1 .STREAM_DRAW: 数据 只 加 载 一 次 ， 在 几 次 绘图 中 使 用 。 
口 gl1 .DYNAMIC_DRAW: 数据 动态 改变 ， 在 多 次 绘图 中 使 用 。 

如 果 不 是 非常 有 经 验 的 OpenGL 程序 员 ， 多 数 情况 下 将 缓冲 区 使 用 方式 设置 为 g1 .STATIC_DRAW 
即 可 。 

在 包含 缓冲 区 的 页 面 重 载 之 前 , 缓冲 区 始终 保留 在 内 存 中 。 如 果 你 不 想 要 某 个 缓冲 区 了 ， 可 以 直接 
调用 g1 .qeleteBuffer() 释 放 内 存 : 

gl.deleteBuffer (buffer); 

6. 错误 

JavaScript 与 WebGL 之 间 的 一 个 最 大 的 区 别 在 于 ，WebGL 操作 一 般 不 会 抛 出 错误 。 为 了 知道 是 否 
有 错误 发 生 ， 必 须 在 调用 某 个 可 能 出 错 的 方法 后 ， 手 工 调用 gl .getError () 方 法 。 这 个 方法 返回 一 个 
表示 错误 类 型 的 常量 。 可 能 的 错误 常量 如 下 。 

口 gl .NO_ERROR: 上 一 次 操作 没有 发 生 错误 〈 值 为 0 )。 

口 gl1 .INVALID_ENUM: 应 该 给 方法 传人 WebGL 常量 ， 但 却 传 错 了 参数 。 

口 g1.INVALID_VALUE: 在 需要 无 符号 数 的 地 方 传 人 了 负 值 。 

口 gl1 .INVALID_OPERATION: 在 当前 状态 下 不 能 完成 操作 。 

口 g1.0UT_oF_MEMORY: 没有 足够 的 内 存 完 成 操作 。 

口 gl1 .CONTEXT_LOST_WEBGL: 由 于 外 部 事件 ( 如 设备 断 电 ) 干扰 丢失 了 当前 WebGL 上 下 文 。 

每 次 调用 gl .getError () 方 法 返回 一 个 错误 值 。 第 一 次 调用 后 ， 后 续 对 gl .getError () 的 调用 
可 能 会 返回 另 一 个 错误 值 。 如 果 发 生 了 多 个 错误 ， 需 要 反复 调用 gl1.getError() 直至 它 返 回 
gl1 .NO_ERROR。 在 执行 了 很 多 操作 的 情况 下 ， 最 好 通过 一 个 循环 来 调用 getError() ， 如 下 所 示 : 

Var errorCode = gl.getError(); 

while(errorCode){ 


Console.log("Error occurred: " + errorCode); 
errorCode = gl.getError(); 
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} 

如 有 果 WebGL 脚本 输出 不 正确 ， 那 在 脚本 中 放 几 行 gl .getError() 有 助 于 找 出 问题 所 在 。 

7. 着 色 器 

着 色 器 (shader ) 是 OpenGL 中 的 另 一 个 概念 。WebGL 中 有 两 种 着 色 器 : 顶点 着 色 器 和 片段 (或 像 
素 ) 着 色 器 。 顶 点 着 色 器 用 于 将 3D 顶点 转换 为 需要 泻 染 的 2D 点 。 片 段 着 色 器 用 于 准确 计算 要 绘制 的 
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每 个 像素 的 颜色 。WebGL 着 色 右 的 独特 之 处 也 是 其 难点 在 于 ,它们 并 不 是 用 JavaScript 写 的 。 这 些 着 色 
需 是 使 用 GLSL ( OpenGL Shading Language，OpenGL 着 色 语言 ) 写 的 ，GLSL 是 一 种 与 C 和 JavaScript 
完全 不 同 的 语言 。 

8. 编写 着 色 器 

GLSL 是 一 种 类 C 语言 ,专门 用 于 编写 OpenGL 着 色 器 。 因 为 WebGL 是 OpenGL ES 2.0 的 实现 ,所 
以 OpenGL 中 使 用 的 着 色 器 可 以 直接 在 WebGL 中 使 用 。 这样 就 方便 了 将 桌面 图 形 应 用 移植 到 浏览 器 中 。 
每 个 着 色 器 都 有 一 个 main () 方 法 ,该 方法 在 绘图 期 间 会 重复 执行 。 为 着 色 器 传递 数据 的 方式 有 两 
种 : Attribute 和 Uniform。 通 过 Attribute 可 以 向 顶点 着 色 器 中 传人 顶点 信息 ， 通 过 Uniform 可 以 向 任何 
着 色 器 传人 常量 值 。Attribute 和 Uniform 在 main () 方 法 外 部 定义 ， 分 别 使 用 关键 字 attribute 和 
uniform。 在 这 两 个 值 类 型 关键 字 之 后 ， 是 数据 类 型 和 变量 名 。 下 面 是 一 个 简单 的 顶点 着 色 器 的 例子 。 

//OpenGL 着 色 语 言 

// 着 色 器 ， 作 者 Bartek Drozdz， 摘 自 他 的 文章 


//http://ww.netmagazine.com/tutorials/get-started-webgl-draw-square 
attribute vec2 aVertexPosition; 









































void main() { 
gl1_Position = vec4(aVvertexPosition, 0.0, 1.0); 


} 
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这 个 顶点 着 色 咒 定义 了 一 个 名 为 avertexPosition 的 Attribute， 这 个 Attribute 是 一 个 数组 , 包含 
两 个 元 素 ( 数据 类 型 为 vec2 )， 表示 x 和 yy 坐标。 即使 愉 接 收 到 两 个 坐标 ,顶点 着 色 带 也 必须 把 一 个 包 
含 四 方面 信息 的 顶点 赋值 给 特殊 变量 gl1_Position。 这 里 的 着 色 列 创建 了 一 个 新 的 包含 四 个 元 素 的 数 
组 (vec4 )， 填 补缺 失 的 坐标 ， 结 果 是 把 2D 坐标 转换 成 了 3D 坐标 。 

除了 只 能 通过 Uniform 传人 数据 外 ， 片 段 着 色 器 与 顶点 着 色 器 类 似 。 以 下 是 片段 着 色 器 的 例子 。 

//OpenGL 着 色 语 言 

// 着 色 器 ， 作 者 Bartek Drozdz， 摘 自 他 的 文章 


//http://ww.netmagazine.com/tutorials/get-started-webgl-draw-square 
uniform vec4 uColor; 











void main() { 
gl_FragColor = uColor; 
} 
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片段 着 色 器 必须 返回 一 个 值 ， 赋 给 变量 g1_Fragcolor， 表 示 绘 图 时 使 用 的 颜色 。 这 个 着 色 器 定义 
了 一 个 包含 四 方面 信息 ( vec4 ) 的 统一 的 颜色 ucolor。 从 以 上 代码 看 ， 这 个 着 色 器 除了 把 传人 的 值 赋 
给 gl1_FragColor 什么 也 没 做 。ucolor 的 值 在 这 个 着 色 器 内 部 不 能 改变 。 













OpenGL 着 色 语 言 比 这 里 看 到 的 还 要 复杂 。 专 门 讲解 这 门 语言 的 书 有 很 多 ， 本 节 
只 是 从 辅助 使 用 WebGL 的 角度 简要 介绍 一 下 该 语言 。 要 了 解 更 多 信息 , 请 参考 Randi 
J. Rost 编著 的 OpenGL Shading Language ( Addison-Wesley,2006 ) 。 
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9. 编写 着 色 器 程序 











浏览 器 不 能 理解 GLSL 程序 ， 因 此 必须 准备 好 字符 串 形式 的 GLSL 程序 ， 以 便 编 译 并 链接 到 着 色 需 
程序 。 为 便于 使 用 ,通常 是 把 着 色 器 包含 在 页 面 的 <script> 标 签 内 ,并 为 该 标签 指定 一 个 自 定 义 的 type 





属性 。 由 于 无 法 识别 type 属 怕 














的 代码 。 例 如 : 


E 值 ， 浏 览 器 不 会 解析 <script> 标 签 中 的 内 容 ， 但 这 不 影响 你 读 写 其 中 15 


<script type="x-webgl/x-vertex-shader" id="vertexShader"> 
attribute vec2 aVertexPosition; 


voiqd main() { 


gl_Position = vec4(aVertexPosition, 0.0, 1.0); 


. 


</script> 


<script type="x-webgl/x-fragment-shader" id="fragmentShader"> 


uniform vec4 uColor; 


void main() { 


gl1_FragColor = uColor; 


} 


</script> 
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然后 ， 可 以 通过 text 属性 提取 出 <script> 元 素 的 内 容 : 


Var vertexGlsl = document .getElementById("vertexShader") .text, 
fragmentGlsl = document .getElementById("fragmentShader") .text; 


复杂 一 些 的 WebGL 应 用 可 能 会 通过 Ajax ( 详 见 第 21 章 ) 动态 加 载 着 色 器 。 而 使 用 着 色 融 的 关键 是 


本 





要 有 字符 串 形式 的 GLSL 程序 。 











取得 了 GLSL 字符 串 之 后 , 接 下 来 就 是 创建 着 色 器 对 象 。 要 创建 着 色 器 对 象 , 可 以 调用 gl1 .create- 
shader () 方 法 并 传人 要 创建 的 着 色 器 类 型 ( g1 .VERTEX_SHADER 或 gl .FRAGMENT_SHADER )。 编 译 着 色 


器 使 用 的 是 gl .compileShader 









































() 。 请 看 下 面 的 例子 。 











Var vertexShader = gl.createShader (gl .VERTEX SHADER); 
gl.shaderSource (vertexShader, vertexGls]1); 
gl.compileShader (vertexShader); 


Var fragmentShader = gl.createShader (gl .FRAGMENT_ SHADER); 
gl.shaderSource(fragmentShader, fragmentGlsl1); 
gl .compileShader (fragmentShader); 


以 上 代码 创建 了 两 个 着 色 器 
用 下 列 代 码 ， 可 以 把 这 两 个 对 象 








Var program = gl.createProgram(); 


gl.attachShader (program, 
gl.attachShader (program, 
gl.linkProgram(program); 


WebGLExample02.htm 
， 并 将 它们 分 别 保 存在 vertexshader 和 fragmentshader 中 。 而 使 
链接 到 着 色 器 程序 中 。 
vertexShader); 
fragmentShader); 
WebGLExample02.htm 
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第 一 行 代码 创建 了 程序 ,然后 调用 attachshader () 方 法 又 包含 了 两 个 着 色 器 。 最 后 调用 g1 .1ink- 
Program() 则 把 两 个 着 色 需 封装 到 了 变量 


里 


program 中 ,链接 完 程序 之 后 ,就 可 以 通过 gl .useProgram() 
方法 通知 WebGL 使 用 这 个 程序 了 。 





gl .useProgram (program); 





调用 gl .useProgram() 方 法 后 ， 所 有 后 续 的 绘图 操作 都 将 使 用 这 个 程序 。 
10. 为 着 色 器 传 入 值 


前 面 定义 的 着 色 带 都 必须 接收 一 个 值 才 能 工作 。 为 了 给 着 色 器 传人 这 个 值 ， 必 须 先 找到 要 接收 这 个 
值 的 变量 。 








对 于 Uniform 变量 , 可 以 使 用 gl .getUniformLocation()， 这 个 方法 返回 一 个 对 象 ， 表 示 
Uniform 变量 在 内 存 中 的 位 置 。 然 后 可 以 基于 变量 的 位 置 来 赋值 。 例 如 : 
































var uColor = gl.getUniformLocation(program, "uColor"); 
三 ) gl.uniform4fv(uColor, [0, 0, 0, 1]); 
WebGLExample02.htm 
第 一 行 代码 从 program 中 找到 Uniform 变量 ucolor, 返回 了 它 在 内 存 中 的 位 置 。 第 二 行 代 码 使 用 
gl.uniform4fv() 给 ucolor 赋值 。 














对 于 顶点 着 色 器 中 的 Attribute 变量 ,也 是 差不多 的 赋值 过 程 。 要 找到 Attribute 变量 在 内 存 中 的 位 置 ， 
可 以 调用 gl .getAttripbLocation()。 取 得 了 位 置 之 后 ， 就 可 以 像 下 面 这 样 赋值 了 : 
Var aVertexPosition = gl.getAttribLocation (program, 


"aVertexPosition"); 
gl .enableVertexAttribArray (aVertexPosition); 
gl .vertexAttribpointer 








aVertexPosition, itemSize, gl.FLOAT, false, 0, 0); 


WebGLExample02.htm 
门 取得 了 aVertexPosition 的 位 置 ， 然 后 又 通过 gl .enableVertexAttribArray () 
启用 它 。 最 后 一 行 创建 了 指针 ， 指 向 由 gl.binqBuffer() 指 定 的 缓冲 区 ， 并 将 其 保存 在 
aVertexPosition 中 ， 以 便 顶 点 着 色 器 使 用 。 
11. 调试 着 色 器 和 程序 


与 WebGL 中 的 其 他 操作 一 样 ， 着 色 需 操作 也 可 能 会 失败 ， 而 且 


月 安 
器 或 程序 执行 中 是 否 发 生 了 错误 ， 必 须 亲 自 询问 WebGL 上 下 文 。 


对 于 着 色 器 ， 可 以 在 操作 之 后 调 月 


在 此 ， 我 1 






































也 是 静默 失败 。 如 果 你 想 知道 着 色 























日 gl .getshadqerParameter() ， 取 得 着 色 器 的 编译 状态 : 
主 笃 


(!gl .getShaderpParameter (vertexShader, gl1.COMPILE STATUS))T{ 
CY) alert (gl .getShaderIinfoLog (vertexShader)); 
} 

















WebGLExample02.htm 
这 个 例子 检测 了 vertexshader 的 编译 状态 。 如 果 着 色 吕 编译 成 功 ， 调 用 gl .getSshader- 
Parameter () 会 返回 true。 如 果 返 回 的 是 false, 说 明 编译 期 间 发 生 了 错误 ,此 时 调用 g] .getshader- 
InfoLog () 并 传人 相应 的 着 色 克 就 可 以 取得 错误 消息 。 错误 消息 就 是 一 个 表示 问题 所 在 的 字符 串 。 无 论 
是 顶点 着 色 器 ,还 是 片段 着 色 器 ,都 可 以 使 用 gl.getShaderParameter() 和 gl.getShaderInfoLog () 
方法 。 
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程序 也 可 能 会 执行 失败 ， 因 此 也 有 类 似 的 方法 一 一 gl .getProgramParameter() ， 可 以 用 来 检测 
执行 状态 。 最 常见 的 程序 失败 发 生 在 链接 过 程 中 ， 要 检测 链接 错误 ， 可 以 使 用 下 列 代码 。 
if (!gl.getProgramParameter (program, gl.LINK STATUS)){ 


alert (gl .getProgramIinfoLog (program) ); 
} 


WebGLExample02.htm 


与 91L.getShadqerParameter () 类 似 ， gl.getProgramParameter () 返 回 true 表示 链接 成 功 ， 
返回 false 表示 链接 失败 。 同 样 ， 也 有 一 个 gl .getProgramInfoLog () 方 法 ， 用 于 捕获 程序 失败 的 

以 上 介绍 的 这 些 方法 主要 在 开发 过 程 中 用 于 调试 。 只 要 没有 依赖 外 部 代码 ， 就 可 以 放心 地 把 它们 从 
产品 代码 中 删除 。 

12. 绘图 

WebGL 只 能 绘制 三 种 形状 : 点 、 线 和 三 角 。 其 他 所 有 形状 都 是 由 这 三 种 基本 形状 合成 之 后 ， 再 绘 
制 到 三 维 空间 中 的 。 执 行 绘图 操作 要 调用 gl .drawArrays () 或 gl1.drawElements () 方 法 ， 前 者 用 于 
数组 缓冲 区 ， 后 者 用 于 元 素数 组 缓冲 区 。 

gl.drawArrays () 或 91L.dqrawElements ( ) 的 第 一 个 参数 都 是 一 个 常量 ， 表示 要 绘制 的 形状 。 可 





























































































































取 值 的 常量 范围 包括 以 下 这 些 。 

口 g1 .POINTS: 将 每 个 顶点 当成 一 个 点 来 绘制 。 

口 g1 .LINES: 将 数组 当成 一 系列 顶点 ， 在 这 些 顶 点 间 画 线 。 每 个 顶点 既是 起 点 也 是 终点 ， 因 此 数 
组 中 必须 包含 偶数 个 顶点 才能 完成 绘制 。 

口 g1 .LINE_LOOP: 将 数组 当成 一 系列 顶点 , 在 这 些 顶点 间 画 线 。 线 条 从 第 一 个 顶点 到 第 二 个 顶点 ， 
再 从 第 二 个 顶点 到 第 三 个 顶点 ， 依 此 类 推 ， 直 至 最 后 一 个 顶点 。 然 后 再 从 最 后 一 个 顶点 到 第 一 
个 顶点 画 一 条 线 。 结 果 就 是 一 个 形状 的 轮廓 。 

口 g1 .LINE_STRIP: 除了 不 画 最 后 一 个 顶点 与 第 一 个 顶点 之 间 的 线 之 外 ， 其 他 与 g1 .LINE_LOOP 
相同 。 


口 g1 .TRIANGLES: 将 数组 当成 一 系列 顶点 , 在 这 些 顶 点 间 绘 制 三 角形 。 除 非 明确 指定 ， 每 个 三 角 

形 都 单独 绘制 ， 不 与 其 他 三 角形 共享 顶点 。 

口 gl .TRIANGLES_STRIP: 除了 将 前 三 个 顶点 之 后 的 顶点 当 作 第 三 个 顶点 与 前 两 个 顶点 共同 构成 
一 个 新 三 角形 外 ， 其 他 都 与 gl1 .TRIANGLES 相同 。 例 如 ， 如 果 数 组 中 包含 A、B、C、 DD 四 个 项 
点 ， 则 第 一 个 三 角形 连接 ABC， 而 第 二 个 三 角形 连接 BCD。 

口 gl1. TRIANGLES_FAN: 除了 将 前 三 个 顶点 之 后 的 顶点 当 作 第 三 个 顶点 与 前 一 个 顶点 及 第 一 个 顶 
点 共同 构成 一 个 新 三 角形 外 , 其 他 都 与 g1 .TRIANGLES 相同 。 例如 ， 如果 数组 中 包含 A、B、C、 
D 四 个 顶点 ， 则 第 一 个 三 角形 连接 ABC， 而 第 二 个 三 角形 连接 ACD。 
gl .drawArrays() 方 法 接收 上 面 列 出 的 常量 中 的 一 个 作为 第 一 个 参数 ， 接 收 数组 缓冲 区 中 的 起 始 
索引 作为 第 二 个 参数 ， 接 收 数组 缓冲 区 中 包含 的 顶点 数 ( 点 的 集合 数 ) 作为 第 三 个 参数 。 下 面 的 代码 使 
用 gl1.drawarrays () 在 画布 上 绘制 了 一 个 三 角形 。 


/ /假设 已 经 使 用 本 节 前 面 定 义 的 着 色 器 清除 了 视 口 





































































































// 定 义 三 个 顶点 以 及 每 个 顶点 的 x 和 Yy 坐标 
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Var vertices = new Float32Array([ 0, 1, 1, -1, -1, -1 ]), 
buffer = gl.createBuffer(), 


vertexSetSize = 2， 


vertexSetCount = vertices.length/vertexSetSize, 


uColor, aVertexPosition; 


/7/ 把 数据 放 到 缓冲 区 


9lL.bindBuffer(g1.ARRAY_ BUFFER, buffer); 
gl .bufferDatal(gl.ARRAY_ BUFFER, vertices, gl1.STATIC_ DRAW); 





// 为 片段 着 色 器 传 入 颜色 值 
uColor = gl.getUniformLocati 
gl uniformfvy(uColor, [0; 0 


// 为 着 色 器 传 入 顶点 信息 


on(program, "uColor"); 
a 0 省 有 


aVertexPosition = gl.getAttribLocation (program, "aVertexPosition"); 
gl .enableVertexAttribArray (aVertexPosition); 


gl .vertexAttribpointer (aVert 


/ /绘制 三 角形 
gl .drawArrays (gl .TRIANGLES, 





exPosition, vertexSetSize, gl.FLOAT, false, 0, 0); 


0, vertexSetCount); 


WebGLExample02.htm 


这 个 例子 定义 了 一 个 Float32Array， 包含 三 组 顶点 ( 每 个 顶点 由 两 点 表示 )。 这 里 关键 是 要 知道 


顶点 的 大 小 及 数量 ， 以 便 将 来 计算 





时 使 用 。 把 vertexsetsize 设置 为 2 之 后 ， 就 可 以 计算 出 











vezrtexSetcount 的 值 。 把 顶点 的 信 





息 保 存在 缓冲 区 中 后 ， 又 把 颜色 信息 传 给 了 片段 着 色 器 。 





接 下 来 ， 给 顶点 着 色 器 传人 顶点 大 小 以 及 g1.FLOAT， 后 者 表示 顶点 坐标 是 浮 点 数 。 传 入 的 第 四 个 
参数 是 一 个 布尔 值 ，false 在 此 表示 坐标 不 是 标准 化 的 。 第 五 个 参数 是 步 长 值 (stride value )， 表 示 取 
得 下 一 个 值 的 时 候 ， 要 跳 过 多 少 个 数组 元 素 。 除 非 你 真 需 要 跳 过 数组 元 素 ，, 否则 传 入 0 即 可 。 最 后 一 个 





参数 是 起 点 偏 移 量 ， 值 为 0 表示 从 第 一 个 元 素 开 始 。 
最 后 一 步 就 是 使 用 gl .drawArrays () 绘 制 三 角形 。 传 人 g1 .TRIANGLES 作为 第 一 个 参数 , 表示 在 



































(0.1)、(L-D 和 (-1-D 点 之 间 绘 制 三 角形 ， 并 使 用 传 给 片段 着 色 需 的 颜色 来 填充 它 。 第 二 个 参数 是 缓冲 
区 中 的 起 点 偏 移 量 ， 最 后 一 个 参数 是 要 读 取 的 顶点 总 数 。 这 次 绘图 操作 的 结果 如 图 15-17 所 示 。 



































图 15-17 
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通过 修改 gl .drawArrays () 的 第 一 个 参数 ， 可 以 修改 绘制 三 角形 的 方式 。 图 15-18 展示 了 传人 不 
同 的 参数 后 可 能 得 到 的 结 

















gl1 .LINE_ LOOP gl1 .LINE_SET 








图 15-18 


13. 纹理 

WebGL 的 纹理 可 以 使 用 DOM 中 的 图 像 。 要 创建 一 个 新 纹理 ， 可 以 调用 gl .createTexture ()， 
然后 再 将 一 幅 图 像 绑 定 到 该 纹理 。 如 果 图 像 尚未 加 载 到 内 存 中 ， 可 能 需要 创建 一 个 Image 对 象 的 实例 ， 
以 便 动 态 加 载 图 像 。 图 像 加 载 完成 之 前 ， 纹 理 不 会 初始 化 ， 因 此 ， 必 须 在 1oad 事件 触发 后 才能 设置 纹 
理 。 例 如 : 


Var image = new Image(), 
texture; 
image.src = "smile.gif"; 
image.onload = function()f{ 
texture = gl.createTexture(); 
gl.bindTexture (gl .TEXTURE 2D, texture); 
gl .pixelStorei (gl] .UNPACK FLIP Y WEBGL, true); 












































gl .texImage2D (gl .TEXTURE 2D, 0, gl.RGBA, gl .RGBA, gl .UNSIGNED BYTE, image); 
gl.texParameteri (gl .TEXTURE 2D, gl .TEXTURE MAG FILTER, gl .NEAREST); 
gl.texParameteri (gl .TEXTURE_ 2D, gl .TEXTURE MIN_FILTER, gl1.NEAREST); 




































































/ /清除 当前 纹理 
gl .bindTexture (gl .TEXTURE 2D, null); 








} 


除了 使 用 DOM 中 的 图 像 之 外 ， 以 上 步骤 与 在 OpenGL 中 创建 纹理 的 步骤 相同 。 最 大 的 差异 是 使 用 
gl .pixelSstorel () 设 置 像素 存储 格式 。g1 .UNPACK_FLIP_Y_WEBGL 是 WebGL 独 有 的 常量 ， 在 加 载 
Web 中 的 图 像 时 ， 多 数 情况 下 都 必须 使 用 这 个 常量 。 这 主要 是 因为 GIF、JPEG 和 PNG 图 像 与 WebGL 
使 用 的 坐标 系 不 一 样 ， 如 果 没 有 这 个 标志 ， 解 析 图 像 时 就 会 发 生 混乱 。 
用 作 纹 理 的 图 像 必须 与 包含 页 面 来 自 同一 个 域 ,或 者 是 保存 在 启用 了 CORS ( Cross-Origin Resource 
Sharing， 跨 域 资源 共享 ) 的 服务 器 上 。 第 21 章 将 讨论 CORS。 


























图 像 、 加 载 到 <video> 元 素 中 的 视频 ,甚至 其 他 <canvas> 元 素 都 可 以 用 作 纹 理 。 


跨 域 资源 限制 同样 适用 于 视频 。 





14. 读 取 像素 
与 2D 上 下 文 类 似 , 通过 WebGL 上 下 文 也 能 读 取 像素 值 。 读 取 像 素 值 的 方法 *eadPixels () 与 
OpenGL 中 的 同名 方法 只 有 一 点 不 同 ， 即 最 后 一 个 参数 必须 是 类 型 化 数组 。 像 素 信息 是 从 帧 缓冲 区 读 取 
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中 





的 ， 然 后 保存 在 类 型 化 数组 中 。readPixels () 方 法 的 参数 有 : x、y、 宽 度 、 高 度 、 图 像 格 式 、 数 据 类 
型 和 类 型 化 数组 。 前 4 个 参数 指定 读 取 哪 个 区 域 中 的 像素 。 图像 格式 参数 几乎 总 是 g1 .RGBA。 数据 类 型 
参数 用 于 指定 保存 在 类 型 化 数组 中 的 数据 的 类 型 ， 但 有 以 下 限制 。 

口 如 果 类 型 是 g1 .UNSIGNED_BYTE， 则 类 型 化 数组 必须 是 Uint8Array。 

口 如 果 类 型 是 g1 .UNSIGNED_SHORT 5 6 _5 .gl1.UNSIGNED_SHORT 4 4 4_4 或 gl .UNSIGNED_ 


SHORT_ 5_5_5_1， 则 类 型 化 数组 必须 是 Uint16Array。 


下 面 是 一 个 简单 的 例子 。 


Var pixels = new Uint8Array (25*25); 
gl.readPixels(0, 0, 25, 25, gl.RGBA, gl .UNSIGNED BYTE, pixels); 


以 上 代码 从 帧 缓冲 区 中 读 取 了 25x25 像素 的 区 域 ， 将 读 取 到 的 像素 信息 保存 到 了 pixels 数组 中 。 
其 中 ， 每 个 像素 的 颜色 由 4 个 数组 元 素 表示 ， 分 别 代 表 红 、 绿 、 蓝 和 透明 度 。 每 个 数组 元 素 的 值 介 于 0 
到 255 之 间 (包含 0 和 255 )。 不 要 忘 了 根据 返回 的 数据 大 小 初始 化 类 型 化 数组 。 

在 浏览 器 绘制 更 新 的 WebGL 图 像 之 前 调用 readPixels () 不 会 有 什么 意外 。 绘 制 发 生 后 ， 帧 缓冲 
区 会 恢复 其 原始 的 干净 状态 ， 而 调用 readPixels () 返 回 的 像素 数据 反映 的 就 是 清除 缓冲 区 后 的 状态 。 
如 果 你 想 在 绘制 发 生 后 读 取 像素 数据 ， 那 在 初始 化 WebGL 上 下 文 时 必须 传人 适当 的 


preserveDrawingBuffer 选项 (前 面 讨 论 过 )。 




















































































































var gl = drawing.getContext ("experimental-webgl", { preserveDrawingBuffer: true; }); 
设置 这 个 标志 的 意思 是 让 帧 缓冲 区 在 下 一 次 绘制 之 前 ,保留 其 最 后 的 状态 。 这 个 选项 会 导致 性 能 损 
失 ， 因 此 能 不 用 最 好 不 要 用 。 


15.3.3 ”支持 


Firefox 4+ 和 Chrome 都 实现 了 WebGL API。Safari 5.1 也 实现 了 WebGL， 但 默认 是 禁用 的 。WebGL 
比较 特别 的 地 方 在 于 ， 某 个 浏览 器 的 某 个 版 本 实现 了 它 ， 并 不 一 定 意味 着 就 真能 使 用 它 。 某 个 浏览 器 支 
持 WebGL， 至 少 意味 着 两 件 事 : 首先 ， 浏览 器 本 身 必须 实现 了 WebGL API; 其 次 ,计算 机 必须 升级 显 
示 驱 动 程序 。 运 行 Windows XP 等 操作 系统 的 一 些 老 机 器 ， 其 驱动 程序 一 般 都 不 是 最 新 的 。 因 此 ， 这 些 
计算 机 中 的 浏览 器 都 会 禁用 WebGL。 从 稳妥 的 角度 考虑 , 在 使 用 WebGL 之 前 ,最 好 检测 其 是 否 得 到 了 
支持 ， 而 不 是 只 检测 特定 的 浏览 器 版 本 。 

大 家 别 忘 了 ，WebGL 还 是 一 个 正在 制定 和 发 展 中 的 规范 。 不 管 是 函数 名 、 孙 数 签名 ， 还 是 数据 类 
型 ， 都 有 可 能 改变 。 可 以 说 ，WebGL 目前 只 适合 实验 性 地 学 习 ， 不 适合 真正 开发 和 应 用 。 



















































































15.4 ”小 结 


HTML5 的 <canvas> 元 素 提供 了 一 组 JavaScript API, 让 我 们 可 以 动态 地 创建 图 形 和 图 像 。 图 形 是 在 一 
个 特定 的 上 下 文中 创建 的 ， 而 上 下 文 对 象 目前 有 两 种 。 第 一 种 是 2D 上 下 文 ， 可 以 执行 原始 的 绘图 操作 ， 
比如 : 



































口 设置 填充 、 描 边 颜 色 和 模式 
口 绘制 矩形 
口 绘制 路 径 
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口 绘制 文本 
口 创建 渐变 和 模式 

第 二 种 是 3D 上 下 文 , 即 WebGL 上 下 文 。WebGL 是 从 OpenGL ES 2.0 移植 到 浏览 器 中 的 ,而 OpenGL 
ES 2.0 是 游戏 开发 人 员 在 创建 计算 机 图 形 图 像 时 经 常 使 用 的 一 种 语言 。WebGL 支持 比 2D 上 下 文 更 丰富 
和 更 强大 的 图 形 图 像 处 理 能 力 ， 比 如 : 
口 用 GLSL (OpenGL Shading Language，OpenGL 着 色 语 言 ) 编写 的 顶点 和 片段 着 色 器 
口 支持 类 型 化 数组 ， 即 能 够 将 数组 中 的 数据 限定 为 某 种 特定 的 数值 类 型 
口 创建 和 操作 纹理 
目前 ， 主 流 浏 览 器 的 较 新 版 本 大 都 已 经 支持 <canvas> 标 签 。 同 样 地 ， 这 些 版 本 的 浏览 器 基本 上 也 
都 支持 2D 上下文。 但 对 于 WebGL 而 言 ， 目 前 还 只 有 Firefox 4+ 和 Chrome 支持 它 。 
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本 章 内 容 

口 使 用 跨 文档 消息 传递 
口 拖 放 API 

口 音频 与 视频 























书 前 面 讨论 过 ，HTML5 规范 定义 了 很 多 新 HTML 标记 。 为 了 配合 这 些 标记 的 变化 ，HTML5 
规范 也 用 显著 篇 幅 定 义 了 很 多 JavaScript API。 定 义 这 些 API 的 用 意 就 是 简化 此 前 实现 起 来 困 
难 重 重 的 任务 ， 最 终 简 化 创建 动态 Web 界面 的 工作 。 


16.1 ” 跨 文 档 消息 传递 


跨 文 档 消息 传送 ( cross-document messaging )， 有 时 候 简称 为 XDM， 指 的 是 在 来 自 不 同 域 的 页 面 间 
传递 消息 。 例 如 ，www.wrox.com 域 中 的 页 面 与 位 于 一 个 内 骸 框 架 中 的 p2p.wrox.com 域 中 的 页 面 通信 。 
在 XDM 机 制 出 现 之 前 ， 要 稳妥 地 实现 这 种 通信 需要 花 很 多 工夫 。XDM 把 这 种 机 制 规范 化 ， 让 我 们 能 
既 稳 受 又 简单 地 实现 跨 文档 通信 。 

XDM 的 核心 是 postMessage () 方 法 。 在 HTML5 规范 中 ， 除 了 XDM 部 分 之 外 的 其 他 部 分 也 会 提 
到 这 个 方法 名 ， 但 都 是 为 了 同一 个 目的 : 向 男 一 个 地 方 传递 数据 。 对 于 XDM 而 言 ,，“ 男 一 个 地 方 ” 指 的 
是 包含 在 当前 页 面 中 的 <iframe> 元 素 , 或 者 由 当前 页 面 弹出 的 窗口 。 

postMessage () 方 法 接收 两 个 参数 : 一 条 消息 和 一 个 表示 消息 接收 方 来 自 哪 个 域 的 字符 串 。 第 二 
个 参数 对 保障 安全 通信 非常 重要 ， 可 以 防止 浏览 器 把 消息 发 送 到 不 安全 的 地 方 。 来 看 下 面 的 例子 。 

// 注 意 : 所 有 支持 XDM 的 浏览 器 也 支持 iframe 的 contentWindow 属性 


Var iframeWindow = document .getElementById("myframe") .contentWindow; 
iframeWindow.postMessage("A secret", "http://www.wrox.com"); 


最 后 一 行 代 码 尝 试 向 内 般 框 架 中 发 送 一 条 消息 ， 并 指定 框架 中 的 文档 必须 来 源 于 "http:// 
www.wrox.com" 域 。 如 果 来 源 匹 配 ， 消 息 会 传递 到 内 骨 框 架 中 ; 否则 ，postMessage () 什 么 也 不 做 。 
这 一 限制 可 以 避免 窗口 中 的 位 置 在 你 不 知情 的 情况 下 发 生 改 变 。 如 果 传 给 postMessage () 的 第 二 个 参 
数 是 "*"， 则 表示 可 以 把 消息 发 送 给 来 自任 何 域 的 文档 ， 但 我 们 不 推荐 这 样 做 。 

接收 到 XDM 消息 时 , 会 触发 window 对 象 的 message 事件 。 这 个 事件 是 以 异步 形式 触发 的 , 因此 
从 发 送 消息 到 接收 消息 ( 触发 接收 窗口 的 message 事件 ) 可 能 要 经 过 一 段 时间 的 延迟 。 触 发 message 
事件 后 ， 传 递 给 onmessage 处 理 程序 的 事件 对 象 包含 以 下 三 方面 的 重要 信息 。 

口 aata: 作为 postMessage () 第 一 个 参数 传人 的 字符 串 数 据 。 
口 origin: 发 送 消息 的 文档 所 在 的 域 ， 例 如 "http://www.wrox.com"。 
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口 source: 发 送 消息 的 文档 的 window 对 象 的 代理 。 这 个 代理 对 象 主要 用 于 在 发 送 上 一 条 消息 的 
窗口 中 调用 postMessage() 方 法 。 如 果 发 送 消 息 的 窗口 来 自 同 一 个 域 ， 那 这 个 对 象 就 是 
Windowo 

接收 到 消息 后 验证 发 送 窗口 的 来 源 是 至 关 重 要 的 。 就 像 给 postMessage () 方 法 指定 第 二 个 参数 ， 

以 确保 浏览 器 不 会 把 消息 发 送 给 未 知 页 面 一 样 ， 在 onmessage 处 理 程序 中 检测 消息 来 源 可 以 确保 传人 
的 消息 来 自己 知 的 页 面 。 基 本 的 检测 模式 如 下 。 


EventUtil.addHandler (window，"messagde"，function(event){ 





















































// 确 保 发 送 消息 的 域 是 已 知 的 域 


if (event .origin == "http://www.wrox.com")t 


// 处 理 接收 到 的 数据 
processMessage (event .data); 


// 可 选 : 向 来 源 窗口 发 送 回执 
event .Source.DpostMessage("Recelived!"， "http://p2p.wrox.com"); 
} 
上 ) 


还 是 要 提醒 大 家 ， event .source 大 多 数 情况 下 只 是 window 对 象 的 代理 , 并非 实际 的 window 对 
象 。 换 句 话说， 不 能 通过 这 个 代理 对 象 访问 window 对 象 的 其 他 任何 信息 。 记 住 ， 只 通过 这 个 代理 调用 
postMessage () 就 好 ， 这 个 方法 永远 存在 ， 永 远 可 以 调用 。 

XDM 还 有 一 些 怪 异 之 处 。 首 先 ，postMessage() 的 第 一 个 参数 最 早 是 作为 “永远 都 是 字符 串 ? 来 实 
现 的 。 但 后 来 这 个 参数 的 定义 改 了 , 改 成 允许 传人 任何 数据 结构 。 可 是 ,并 非 所 有 浏览 器 都 实现 了 这 一 
变化 。 为 保险 起 见 ， 使 用 postMessage () 时 ， 最 好 还 是 只 传 字符 串 。 如 果 你 想 传人 结构 化 的 数据 ， 最 
佳 选 择 是 先 在 要 传人 的 数据 上 调用 JsoN.stringify(), 通过 postMessage () 传 人 得 到 的 字符 串 ， 然 
后 再 在 onmessage 事件 处 理 程 序 中 调用 JSsoN.parse() 。 

在 通过 内 藤 框 架 加 载 其 他 域 的 内 容 时 ， 使 用 XDM 是 非常 方便 的 。 因 此 ,在 混搭 ( mashup ) 和 社交 
网 络 应 用 中 , 这 种 传递 消息 的 方法 极为 常用 。 有 了 XDM, 包含 <iframe> 的 页 面 可 以 确保 自身 不 受 恶 意 
内 容 的 侵扰 ， 因 为 它 只 通过 XDM 与 嵌入 的 框架 通信 。 而 XDM 也 可 以 在 来 自 相 同 域 的 页 面 间 使 用 。 

支持 XDM 的 浏览 器 有 IE8+ 、Firefox 3.5+、Safari 4+、Opera、Chrome 、iOS 版 Safari 及 Android 版 
WebKit 。XDM 已 经 作为 一 个 规范 独立 出 来 ， 现 在 它 的 名 字 叫 Web Messaging ， 官 方 页 面 是 
http:/dev.w3.org/htmlS/postmsg/。 


16.2 原生 拖 放 


最 早 在 网 页 中 引入 JavaScript 拖 放 功能 的 是 IE4。 当 时 ， 网 页 中 只 有 两 种 对 象 可 以 拖 放 : 图 像 和 某 
些 文本 。 拖 动 图 像 时 ， 把 鼠标 放 在 图 像 上 ， 按 住 鼠 标 不 放 就 可 以 拖 动 它 。 拖 动 文本 时 ， 要 先 选 中 文本 ， 
然后 可 以 像 拖 动 图 像 一 样 拖 动 被 选中 的 文本 。 在 IE4 中 ， 唯 一 有 效 的 放置 目标 是 文本 框 。 到 了 IE5, 拖 
放 功 能 得 到 扩展 ， 添 加 了 新 的 事件 ， 而 且 几 乎 网 页 中 的 任何 元 素 都 可 以 作为 放置 目标 。IE5.5 更 进一步 ， 
让 网 页 中 的 任何 元 素 都 可 以 拖 放 。( IE6 同样 也 支持 这 些 功能 。) HTML5 以 IE 的 实例 为 基础 制定 了 拖 放 
规范 。Firefox 3.5、Safari 3+ 和 Chrome 也 根据 HTMLS 规范 实现 了 原生 拖 放 功能 。 

说 到 拖 放 ，, 最 有 意思 的 铠 怕 就 是 能 够 在 框架 间 、 窗 口 间 ， 甚 至 在 应 用 间 拖 放 网 页 元 素 了 。 浏览 右 对 
拖 放 的 支持 为 实现 这 些 功能 提供 了 便利 。 
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16.2.1 ” 拖 放 事件 


通过 拖 放 事件 ， 可 以 控制 拖 放 相 关 的 各 个 方面 。 其 中 最 关键 的 地 方 在 于 确定 哪里 发 生 了 拖 放 事件 ， 
有 些 事 件 是 在 被 拖 动 的 元 素 上 触发 的 ， 而 有 些 事件 是 在 放置 目标 上 触发 的 。 拖 动 某 元 素 时 , 将 依次 触发 
下 列 事件 : 

(1) dragstart 

(2) drag 

(3) dragend 

按 下 鼠标 键 并 开始 移动 鼠标 时 , 会 在 被 拖 放 的 元 素 上 触发 aragstart 事件 。 此 时 光标 变 成 “不 能 放 ” 
符号 ( 圆 环 中 有 一 条 反 斜 线 )， 表 示 不 能 把 元 素 放 到 自己 上 面 。 拖 动 开 始 时 ， 可 以 通过 ondragstart 
事件 处 理 程序 来 运行 JavaScript 代码 。 

触发 aragstart 事件 后 ， 随 即 会 触发 arag 事件 ， 而 且 在 元 素 被 拖 动 期 间 会 持续 触发 该 事件 。 这 
个 事件 与 mousemove 事件 相似 , 在 鼠标 移动 过 程 中 , mousemove 事件 也 会 持续 发 生 。 当 拖 动 停止 时 (无 
论 是 把 元 素 放 到 了 有 效 的 放置 目标 ， 还 是 放 到 了 无 效 的 放置 目标 上 ), 会 触发 aragend 事件 。 

上 述 三 个 事件 的 目标 都 是 被 拖 动 的 元 素 。 默认 情 况 下 ,浏览 器 不 会 在 拖 动 期 间 改变 被 拖 动 元 素 的 外 
观 , 但 你 可 以 自己 修改 。 不过， 大 多 数 浏 览 器 会 为 正 被 拖 动 的 元 素 创 建 一 个 半 透 明 的 副本 ,这 个 副本 始 
终 跟随 着 光标 移动 。 

当 某 个 元 素 被 拖 动 到 一 个 有 效 的 放置 目标 上 时 ， 下 列 事件 会 依次 发 生 : 


(1) dragenter 















































(2) dragover 

(3) aragleave 或 drop 

只 要 有 元 素 被 拖 动 到 放置 目标 上 ， 就 会 触发 daragenter 事件 ( 类似 于 mouseover 事件 )。 紧 随 其 
后 的 是 dragover 事件 , 而 且 在 被 拖 动 的 元 素 还 在 放置 目标 的 范围 内 移动 时 ,就 会 持续 触发 该 事件 。 如 
果 元 素 被 拖 出 了 放置 目标 ，dragover 事件 不 再 发 生 ， 但 会 触发 aragleave 事件 (类似 于 mouseout 
居 件 )。 如 果 元 素 被 放 到 了 放置 目标 中 ， 则 会 触发 arop 事件 而 不 是 dragleave 事件 。 上 述 三 个 事件 的 
目标 都 是 作为 放置 目标 的 元 素 。 


16.2.2 ” 自 定义 放置 目标 


在 拖 动 元 素 经 过 某 些 无 效 放 置 目标 时 ， 可 以 看 到 一 种 特殊 的 光标 ( 圆 环 中 有 一 条 反 斜 线 )， 表 示 不 
能 放置 。 虽然 所 有 元 素 都 支持 放置 目标 事件 , 但 这 些 元 素 默认 是 不 允许 放置 的 。 如 果 拖 动 元 素 经 过 不 允 
许 放置 的 元 素 ， 无 论 用 户 如 何 操作 ， 都 不 会 发 生 drop 事件 。 不 过 ,你 可 以 把 任何 元 素 变 成 有 效 的 放置 
日 标 , 方法 是 重 写 dragenter 和 dragover 事件 的 默认 行为 。 例 如 ,假设 有 一 个 ID 为 "droptarget" 
的 <aiv> 元 素 ， 可 以 用 如 下 代码 将 它 变 成 一 个 放置 目标 。 


Var droptarget = document .getElementById("droptarget"); 










































































山中 
























































EventUtil.addHandler (droptarget, "dragover", function(event)t 
EventUtil.preventDefault (event); 


人 
EventUtil.addHandler (droptarget, "dragenter", function(event)t{ 


EventUtil.preventDefault (event); 


的 了 
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以 上 代码 执行 后 ,你 就 会 发 现 当 拖 动 着 元 素 移动 到 放置 目标 上 时 ,光标 变 成 了 允许 放置 的 符号 。 当 
然 ， 释放 鼠标 也 会 触发 arop 事件 。 

在 Firefox 3.5+ 中 ， 放 置 事件 的 默认 行为 是 打开 被 放 到 放置 目标 上 的 URL。 换 句 话 说， 如 果 是 把 图 
像 拖 放 到 放置 目标 上 , 页面 就 会 转向 图 像 文件 ; 而 如 果 是 把 文本 拖 放 到 放置 目标 上 , 则 会 导致 无 效 URL 
错误 。 因 此 ， 为 了 让 Firefox 支持 正常 的 拖 放 ， 还 要 取消 arop 事件 的 默认 行为 ,阻止 它 打开 URL: 


EventUtil.addHandler (droptarget, "drop", function(event)t 
EventUtil.preventDefault (event); 





























})s 
16.2.3 dataTransfer 对 象 


只 有 简单 的 拖 放 而 没有 数据 变化 是 没有 什么 用 的 。 为 了 在 拖 放 操 作 时 实现 数据 交换 ,IE 5 引入 了 
dataTransfer 对 象 , 它 是 事件 对 象 的 一 个 属性 ,用 于 从 被 拖 动 元 素 向 放置 目标 传递 字符 串 格 式 的 数据 。 
因为 它 是 事件 对 象 的 属性 ， 所 以 只 能 在 拖 放 事 件 的 事件 处 理 程序 中 访问 aataTransfer 对 象 。 在 事件 
处 理 程序 中 ， 可 以 使 用 这 个 对 象 的 属性 和 方法 来 完善 拖 放 功能 。 目 前 ，HIML5 规范 草案 也 收入 了 
dataTransfer 对 象 。 

dataTransfer 对 象 有 两 个 主要 方法 : getData() 和 setData() 。 不 难 想象 ，getData() 可 以 取 
得 由 setData() 保 存 的 值 。setpata() 方 法 的 第 一 个 参数 ， 也 是 getData() 方 法 唯一 的 一 个 参数 ， 是 
一 个 字符 串 ， 表 示 保 存 的 数据 类 型 ， 取 值 为 "text" 或 "URL" ， 如 下 所 示 : 

/ /设置 和 接收 文本 数据 


event .dataTransfer.setData("text", "some text"); 
Var text = event.dataTransfer.getData("text"); 




































































/ /设置 和 接收 URL 
event .dataTransfer.setData("URL", "http://www.wrox.com/"); 
Var Url = event.dataTransfer.getData("URL"); 


契 只 定义 了 "text" 和 "URL" 两 种 有 效 的 数据 类 型 ,而 HTML5 则 对 此 加 以 扩展 ,允许 指定 各 种 MIME 
类 型 。 考 虑 到 向 后 兼容 ，HTMLS 也 支持 "text" 和 "URL"， 但 这 两 种 类 型 会 被 映射 为 "text/plain" 和 
"text/uri-list"。 

实际 上 ，dataTransfer 对 象 可 以 为 每 种 MIME 类 型 都 保存 一 个 值 。 换 句 话 说 ， 同 时 在 这 个 对 象 
中 保存 一 段 文本 和 一 个 URL 不 会 有 任何 问题 。 不过, 保存 在 dataTransfer 对 象 中 的 数据 只 能 在 drop 
事件 处 理 程序 中 读 取 。 如 果 在 ondrop 处 理 程序 中 没有 读 到 数据 ， 那 就 是 dataTransfer 对 象 已 经 被 
销毁 ， 数 据 也 丢失 了 。 

在 拖 动 文本 框 中 的 文本 时 ， 浏 览 器 会 调用 setData () 方 法 ， 将 拖 动 的 文本 以 "text" 格 式 保存 在 
dataTransfer 对 象 中 。 类 似 地 ， 在 拖 放 链接 或 图 像 时 ， 会 调用 setData() 方 法 并 保存 URL。 然 后 ， 
在 这 些 元 素 被 拖 放 到 放置 目标 时 ， 就 可 以 通过 getData() 读 到 这 些 数 据 。 当 然 ， 作 为 开发 人 员 ， 你 也 
可 以 在 aragstart 事件 处 理 程序 中 调用 setData()， 手工 保存 自己 要 传输 的 数据 ， 以 便 将 来 使 用 。 

将 数据 保存 为 文本 和 保存 为 URL 是 有 区 别 的 。 如 果 将 数据 保存 为 文本 格式 ， 那 么 数据 不 会 得 到 任 
何 特殊 处 理 。 而 如 果 将 数据 保存 为 URL, 浏览 器 会 将 其 当成 网 页 中 的 链接 。 换 句 话说， 如 果 你 把 它 放 置 
到 另 一 个 浏览 器 窗口 中 ， 浏览 絮 就 会 打开 该 URL。 

Firefox 在 其 第 5 个 版 本 之 前 不 能 正确 地 将 "url" 和 "text" 上 映射 为 "text/uri-list" 和 
"text/plain"。 但 是 却 能 把 "Text" (工大 写 ) 映射 为 "text/plain"。 为 了 更 好 地 在 跨 浏 览 器 的 情况 
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下 从 dataTransfer 对 象 取得 数据 ， 最 好 在 取得 URL 数据 时 检测 两 个 值 ， 而 在 取得 文本 数据 时 使 用 


"Textn 








Var dataTransfer = event.dataTransfer; 


// 读 取 URL 
var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list"); 


// 读 取 文 本 
Var text = dataTransfer.getData("Text"); 


DataTransferExample01.htm 


注意 ， 一 定 要 把 短 数据 类 型 放 在 前 面 ， 因 为 IE 10 及 之 前 的 版 本 仍然 不 支持 扩展 的 MIME 类 型 名 ， 
而 它们 在 遇 到 无 法 识别 的 数据 类 型 时 ， 会 抛 出 错误 。 























16.2.4 aropEffect 与 effectRLLowed 


利用 qataTransfer 对 象 ， 可 不 光 是 能 够 传输 数据 ， 还 能 通过 它 来 确定 被 拖 动 的 元 素 以 及 作为 放 
置 目标 的 元 素 能 够 接收 什么 操作 。 为 此 ， 需 要 访问 aataTransfer 对 象 的 两 个 属性 : dropEffect 和 
effectAllowed。 

其 中 ， 通 过 dropEffect 属性 可 以 知道 被 拖 动 的 元 素 能 够 执行 哪 种 放置 行为 。 这 个 属性 有 下 列 4 
个 可 能 的 值 。 

口 "none" : 不 能 把 拖 动 的 元 素 放 在 这 里 。 这 是 除 文本 框 之 外 所 有 元 素 的 默认 值 。 

口 "move" : 应 该 把 拖 动 的 元 素 移动 到 放置 目标 。 
口 "copy" : 应 该 把 拖 动 的 元 素 复制 到 放置 目标 。 
口 "link": 表示 放置 目标 会 打开 拖 动 的 元 素 ( 但 拖 动 的 元 素 必须 是 一 个 链接 ， 有 URL )。 

在 把 元 素 拖 动 到 放置 目标 上 时 ， 以 上 每 一 个 值 都 会 导致 光标 显示 为 不 同 的 符号 。 然 而 ,要 怎样 实现 
光标 所 指示 的 动作 完全 取决 于 你 。 换 句 话 说 ， 如 果 你 不 介入 ,没有 什么 会 自动 地 移动 、 复 制 ， 也 不 会 打 
开 链 接 。 总 之 ,浏览 器 只 能 帮 你 改变 光标 的 样式 ， 而 其 他 的 都 要 靠 你 自己 来 实现 。 要 使 用 dropEffect 
属性 ， 必 须 在 ondragenter 事件 处 理 程序 中 针对 放置 目标 来 设置 它 。 

dropEffect 属性 只 有 搭配 effectAllowed 属性 才 有 用 。effectAllowed 属性 表示 允许 拖 动 元 
素 的 哪 种 dqropEffect，effectAllowed 属性 可 能 的 值 如 下 。 

D "uninitialized": 没有 给 被 拖 动 的 元 素 设置 任何 放置 行为 。 
"none";: 被 拖 动 的 元 素 不 能 有 任何 行为 。 

"copy": 只 人 允许 值 为 "copy" 的 dropEffect。 

"Link": 只 允许 值 为 "link" 的 dropEffect。 

"move": 只 人 允许 值 为 "move" 的 dropEffect。 

"copyLink": 人 允许 值 为 "copy" 和 "1link" 的 dropEffect。 
"CopyMove": 允许 值 为 "copy" 和 "move" 的 dropEffect, 
"1inkMove": 允许 值 为 "link" 和 "move" 的 dropEffect。 
mal Ly 人 允许 任意 dropEffect。 

必须 在 ondragstart 事件 处 理 程序 中 设置 effectAllowed 属性 。 
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假设 你 想 允 许 用 户 把 文本 框 中 的 文本 拖 放 到 一 个 <aiv> 元 素 中 。 首 先 ， 必 须 将 dropEffect 和 
effectAllowed 设置 为 "move"。 但是， 由 于 <div> 元 素 的 放置 事件 的 默认 行为 是 什么 也 不 做 ， 所 以 文 
本 不 可 能 自动 移动 。 重 写 这 个 默认 行为 ， 就 能 从 文本 框 中 移 走 文本 。 然 后 你 就 可 以 自己 编写 代码 将 文本 
插入 到 <aiv> 中 , 这 样 整个 拖 放 操 作 就 完成 了 。 如 果 你 将 aropEffect 和 effectAllowed 的 值 设 置 为 
"copy" ， 那 就 不 会 自动 移 走 文本 框 中 的 文本 。 























Firefox 5 及 之 前 的 版 本 在 处 理 effectAllowed 属性 时 有 一 个 问题 ， 即 如 果 你 在 


代码 中 设置 了 这 个 属性 的 值 ， 那 不 一 定 会 触发 drop 事件 。 





16.2.5 ”可 拖 动 


默认 情况 下 ,图像 、 链 接 和 文本 是 可 以 拖 动 的 ,也 就 是 说 ,不 用 额外 编写 代码 ， 用 户 就 可 以 拖 动 它 
们 。 文 本 只 有 在 被 选中 的 情况 下 才能 拖 动 ， 而 图 像 和 链接 在 任何 时 候 都 可 以 拖 动 。 

让 其 他 元 素 可 以 拖 动 也 是 可 能 的 。HTML5 为 所 有 HTML 元 素 规定 了 一 个 draggable 属性 , 表 
示 元 素 是 否 可 以 拖 动 。 图 像 和 链接 的 araggable 属性 自动 被 设置 成 了 true， 而 其 他 元 素 这 个 属性 
的 默认 值 都 是 false。 要 想 让 其 他 元 素 可 拖 动 ,或 者 让 图 像 或 链接 不 能 拖 动 ， 都 可 以 设置 这 个 属性 。 
例如 : 


<!-- 让 这 个 图 像 不 可 以 拖 动 --> 
<img src="smile.gif" draggable="false" alt="Smiley face"> 


























<!-- 让 这 个 元 素 可 以 拖 动 --> 

<div draggable="true'">...</div> 

支持 draggable 属性 的 浏览 器 有 IE 10+、Firefox 4+、Safari 5+ 和 Chrome。Opera 11.5 及 之 前 的 版 
本 都 不 支持 HTML5 的 拖 放 功能 。 另外 , 为 了 让 Firefox 支持 可 拖 动 属性 , 还 必须 添加 一 个 ondragstart 
事件 处 理 程序 ， 并 在 dataTransfer 对 象 中 保存 一 些 信息 。 











在 IE9 及 更 早 版 本 中 ， 通 过 mousedown 事件 处 理 程序 调用 dragDrop() 能 够 让 
任何 元 素 可 拖 动 。 而 在 Safari 4 及 之 前 版 本 中 ， 必 须 额 外 给 相应 元 素 设置 CSS 样式 


-khtml-user-drag: element,。 






16.2.6 ”其 他 成 员 


HTMLS5 规范 规定 dataTransfer 对 象 还 应 该 包含 下 列 方法 和 属性 。 





口 adgElement (element) : 为 拖 动 操作 添加 一 个 元 素 。 添加 这 个 元 素 只 影响 数据 ( 即 增加 作为 拖 
动 源 而 响应 回调 的 对 象 ), 不 会 影响 拖 动 操作 时 页 面 元 素 的 外 观 。 在 写作 本 书 时 ,只 有 Firefox 3.5+ 
实现 了 这 个 方法 。 





口 clearData (format) :清除 以 特定 格式 保存 的 数据 ,实现 这 个 方法 的 浏览 器 有 IE、Fireforx 3.5+、 
Chrome 和 Safari 4+。 
口 setDragImage (element，x，y) : 指定 一 幅 图 像 ， 当 拖 动 发 生 时 ， 显 示 在 光标 下 方 。 这 个 方 
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法 接收 的 三 个 参数 分 别 是 要 显示 的 HTML 元 素 和 光标 在 图 像 中 的 x、y 坐标 。 其 中 ，HTML 元 素 
可 以 是 一 幅 图 像 ， 也 可 以 是 其 他 元 素 。 是 图 像 则 显示 图 像 ， 是 其 他 元 素 则 显示 泻 染 后 的 元 素 。 
实现 这 个 方法 的 浏览 器 有 Firefox 3.5+、Safari 4+ 和 Chrome。 

口 types: 当前 保存 的 数据 类 型 。 这 是 一 个 类 似 数组 的 集合 ， 以 "text" 这 样 的 字符 串 
数据 类 型 。 实 现 这 个 属性 的 浏览 磊 有 IE10+、Firefox 3.5+ 和 Chrome。 


16.3 ”媒体 元 素 


随 着 音频 和 视频 在 Web 上 的 迅速 流行 ， 大 多 数 提供 富 媒 体内 容 的 站 点 为 了 保证 跨 浏览 器 兼容 性 ， 
不 得 不 选择 使 用 Flash。HTMLS5 新 增 了 两 个 与 媒体 相关 的 标签 ,让 开发 人 员 不 必 依赖 任何 插件 就 能 在 网 
页 中 秋 人 路 j 览 器 的 音频 和 视频 内 容 。 这 两 个 标签 就 是 <audio> 和 <video>。 
这 两 个 标签 除了 能 让 开发 人 员 方 便 地 租 入 媒体 文件 之 外 ， 都 提供 了 用 于 实现 常 
API， 人 允许 为 媒体 创建 自 定义 的 控件 。 这 两 个 元 素 的 用 法 如 下 。 


<1-- 误 入 视频 --> 
<video src="conference.mpg" 






































形式 保存 着 






































] 功 能 





的 JavaScript 





id="myVideo">Video player not available.</video> 


<!-- 嵌入 音频 --> 


<audio src="song.mp3" 


id="myAudio">Audio player not available.</audio> 





使 用 这 两 个 元 素 时 ， 至 少 要 在 标签 中 包含 src 属性 ， 指 向 要 加 载 的 媒体 文件 。 还 可 以 设置 wiath 
和 height 属性 以 指定 视频 播放 器 的 大 小 , 而 为 poster 属性 指定 图 像 的 URI 可 以 在 加 载 视频 内 容 期 间 
显示 一 幅 图 像 。 另 外 ， 如 果 标 签 中 有 controls 属性 ， 则 意味 着 浏览 器 应 该 显示 UI 控 件 ， 以 便 用 户 直 
接 操 作 媒体 。 位 于 开始 和 结束 标签 之 间 的 任何 内 容 都 将 作为 后 备 内 容 , 在 浏览 器 不 支持 这 两 个 媒体 元 素 
























































的 情况 下 显示 。 


因为 并 非 所 有 浏览 器 都 支持 所 有 媒体 格式 ， 所 以 可 以 指定 多 个 不 同 的 媒体 来 源 。 为 此 ,不 














盟 性 ， 而 是 要 像 下 面 这 样 


[E: 


中 指定 src 


<!1-- 网 入 视频 

<video id="myVideo"> 
<source src=" 
<source src=" 
<source src=" 
Video player 

</video> 


一 一 > 


<!-- 嵌入 音频 --> 

<audio id="myAudio"> 
<source src="song.ogg" 
<source src="song.mp3" 


conference.webm" 
conference.ogv" 
conference.mpg"> 
not available. 








用 在 标签 











使 用 一 一 或 多 个 <source> 元 素 。 





vorbis'"> 
vorbis'"> 


type="video/webm; 
type="video/ogg; 


Codecs='vp8, 
codecs='theora, 


type="audio/ogg"> 
type="audio/mpeg"> 


Audio player not available. 


</audio> 


关于 视频 和 音频 编 解码 絮 的 内 容 超 出 了 本 书 讨论 的 范围 。 作 者 在 此 


持 不 同 的 编 解码 器 , 因此 一 般 来 说 指定 
IE9+、Firefox 3.$+、Safari 4+、 
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Opera 10.5+、Chrome、 


日 相 告 


ZN 心口 





诉 大 家 , 不 同 的 浏览 需 支 
多 种 格式 的 媒体 来 源 是 必需 的 。 支 持 这 两 个 媒体 元 素 的 浏览 器 有 


iOS 版 Safari 和 Android 版 WebKit。 
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16.3.1 属性 


<video> 和 <audio> 元 素 都 提供 了 完善 的 JavaScript 接口 。 下 表 列 出 了 这 两 个 元 素 共 有 的 属性 ， 通 
过 这 些 属 性 可 以 知道 媒体 的 当前 状态 。 

































































































































































































































































属 性 数据 类 型 说 明 

autoplay 布尔 值 取得 或 设置 autoplay 标 志 

buffered 时 间 范 围 表示 已 下 载 的 缓冲 的 时 间 范 围 的 对 象 

bufferedBytes 字 节 范围 表示 已 下 载 的 缓冲 的 字 节 范围 的 对 象 

bufferingRate 整数 下 载 过 程 中 每 秒 钟 平均 接收 到 的 位 数 

bufferingThrottled 布尔 值 表示 浏览 器 是 否 对 缓冲 进行 了 节 流 

controls 布尔 值 取得 或 设置 controls 属 性 ， 用 于 显示 或 隐藏 浏 览 嚣 内置 的 控件 

currentLoop 整数 媒体 文件 已 经 循环 的 次 数 

currentsrc 字符 串 当前 播放 的 媒体 文件 的 URL 

currentTime 浮 点 数 已 经 播放 的 秒 数 

defaultPlaybackRate 浮 点 数 取得 或 设置 默认 的 播放 速度 。 默 认 值 为 1.0 秒 

duration 浮 点 数 媒体 的 总 播放 时 间 ( 秒 数 ) 

ended 布尔 值 表示 媒体 文件 是 否 播 放 完 成 

loop 布尔 值 取得 或 设置 媒体 文件 在 播放 完成 后 是 否 再 从 头 开 始 播放 

muted 布尔 值 取得 或 设置 媒体 文件 是 否 静 音 

networkstate 整数 表示 当前 媒体 的 网 络 连接 状态 : 0 表示 空 ，1 表 示 正 在 加 载 ，2 表 示 
正在 加 载 元 数据 ，3 表 示 已 经 加 载 了 第 一 帧 ，4 表 示 加 载 完成 

paused 布尔 值 表示 播放 器 是 否 暂停 

playbackRate 浮 点 数 取得 或 设置 当前 的 播放 速度 。 用 户 可 以 改变 这 个 值 ， 让 媒体 播放 速 
度 变 快 或 变 慢 ， 这 与 defaultPlaybackRate 只 能 由 开发 人 员 修 改 
的 defaultPlaybackRate 不 同 

played 时 间 范 围 到 目前 为 止 已 经 播放 的 时 间 范 围 

readyState 整数 表示 媒体 是 否 已 经 就 绪 (可 以 播放 了 ) 。0 表 示 数 据 不 可 用 ，1 表 示 
可 以 显示 当前 帧 ，2 表 示 可 以 开始 播放 ，3 表 示 媒 体 可 以 从 头 到 尾 播放 

seekable 时 间 范 围 可 以 搜索 的 时 间 范 围 

seeking 布尔 值 表示 播放 器 是 否 正 移动 到 媒体 文件 中 的 新 位 置 

SS 字符 串 媒体 文件 的 来 源 。 任 何 时 候 都 可 以 重 写 这 个 属性 

start 浮 点 数 取得 或 设置 媒体 文件 中 开始 播放 的 位 置 ， 以 秒表 示 

totalBytes 整数 当前 资源 所 需 的 总 字 节 数 

videoHeight 整数 返回 视频 ( 不 一 定 是 元 素 ) 的 高 度 。 只 适用 于 <video> 

videoWwidth 整数 返回 视频 ( 不 一 定 是 元 素 ) 的 宽度 。 只 适用 于 <video> 

volume 浮 点 数 取得 或 设置 当前 音量 ， 值 为 0.0 到 1.0 




















! 很 多 属性 也 可 以 直接 在 <audio> 和 <video> 元 素 中 设置 。 











和 
4 
| 
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16.3.2 事件 


除了 大 量 属性 之 外 ,这 两 个 媒体 元 素 还 可 以 触发 很 多 事件 。 这 些 事件 监控 着 不 同 的 属性 的 变化 ， 这 
些 变化 可 能 是 媒体 播放 的 结果 ， 也 可 能 是 用 户 操作 播放 器 的 结果 。 下 表 列 出 了 媒体 元 素 相关 的 事件 。 







































































事 件 触发 时 机 
abort 下 载 中 断 
canplay 可 以 播放 时 ; readyState 值 为 2 
canplaythrough 播放 可 继续 ， 而 且 应 该 不 会 中 断 ; readyState 值 为 3 
canshowcurrentframe 当前 帧 已 经 下 载 完 成 ;readyState 值 为 1 
dataunavailable 因为 没有 数据 而 不 能 播放 ; readyState 值 为 0 
durationchange qduration 属 性 的 值 改变 
emptied 网 络 连 接 关闭 
empty 发 生 错误 阻止 了 媒体 下 载 
ended 媒体 已 播放 到 末尾 ， 播 放 停止 
error 下 载 期 间 发 生 网 络 错误 
load 所 有 媒体 已 加 载 完 成 。 这 个 事件 可 能 会 被 上 废弃， 建议 使 用 canplaythrough 
loadeddata 媒体 的 第 一 帧 已 加 载 完成 
loadedmetadata 媒体 的 元 数据 已 加 载 完成 
loadstart 下 载 已 开始 
pause 播放 已 暂停 
play 媒体 已 接收 到 指令 开始 播放 
playing 媒体 已 实际 开始 播放 
progress 正在 下 载 
ratechange 播放 媒体 的 速度 改变 
Seeked 搜索 结束 
Seeking 正 移动 到 新 位 置 
stalled 浏览 器 尝试 下 载 ,但 未 接收 到 数据 
timeupdate currentTime 被 以 不 合理 或 意外 的 方式 更 新 
volumechange volume 属 性 值 或 muted 属 性 值 已 改变 
waiting 播放 和 暂停， 等 待 下 载 更 多 数据 








这 些 事件 之 所 以 如 此 具体 ， 就 是 为 了 让 开发 人 员 只 使 用 少 
片 相 比 ) 即 可 编写 出 自 定 义 的 音频 /视频 播放 吉 。 


16.3.3 ” 自 定义 媒体 播放 器 


使 用 <audio> 和 <video> 元 素 的 play () 和 pause() 方 法 ,可 以 手工 控制 媒体 文件 的 播放 。 组 合 使 
用 属性 、 事 件 和 这 两 个 方法 ， 很 容易 创建 一 个 自 定义 的 媒体 播放 器 ， 如 下 面 的 例子 所 示 。 





和 


HTML 和 JavaScript ( 与 创建 Flash 影 
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<div class="mediaplayer"> 
<div class="video"> 
<video id="player" src="movie.mov" poster="mymovie.jpg" 
width="300" height="200"> 
Video player not available. 
</video> 
</div> 
<div class="controls"> 
<input type="button" value="Play" id="video-btn"> 
<span id="curtime">0</span>/<span id="duration">0</span> 
</div> 
</div> 


VideoPlayerExample01.htm 


以 上 基本 的 HTML 再 加 上 一 些 JavaScript 就 可 以 变 成 一 个 简单 的 视频 播放 器 。 以 下 就 是 JavaScript 
代码 。 


/ /取得 元 素 的 引用 

Var player = document .getElementBylId("player"), 
btn = document .getElementById("video-btn"), 
curtime = document.getElementById("curtime"), 
duration = document .getElementById("duration"); 














// 更 新 播放 时 间 


duration.innerHTML = player.duration; 


/ /为 按钮 添加 事件 处 理 程序 
EventUtil.addHandler (btn, "click", function(event)t 
if (player.paused)t{ 
player.play (); 





btn.value = "Pause"; 
} else { 
player .pause(); 
btn.value = "Play"; 
} 
3 
// 定 时 更 新 当前 时 间 


setInterval (function(){ 
curtime.innerHTML = player.currentTime; 
}y. 250)3 


VideoPlayerExample01.htm 

以 上 JavaScript 代码 给 按钮 添加 了 一 个 事件 处 理 程序 ， 单 击 它 能 让 视频 在 暂停 时 播放 ， 在 播放 时 暂 

停 。 通 过 <video> 元 素 的 10ad 事件 处 理 程序 ， 设置 了 加 载 完 视频 后 显示 播放 时 间 。 最 后 ,设置 了 一 个 

计时 右 ， 以 更 新 当前 显示 的 时 间 。 你 可 以 进一步 扩展 这 个 视频 播放 右 ， 监 听 更 多 事件 ， 利 用 更 多 属性 。 
而 同样 的 代码 也 可 以 用 于 <audio> 元 素 ， 以 创建 自 定义 的 音频 播放 器 。 


16.3.4 ”检测 编 解码 器 的 支持 情况 


如 前 所 述 ,， 并 非 所 有 浏览 器 都 支持 <video> 和 <augio> 的 所 有 编 解码 器 ， 而 这 基本 上 就 意味 着 你 必 
须 提供 多 个 媒体 来 源 。 不 过 ， 也 有 一 个 JavaScript API 能 够 检测 浏览 器 是 否 支 持 某 种 格式 和 编 解码 器 。 
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这 两 个 媒体 元 素 都 有 一 个 canPlayType() 方法， 该 方法 接收 一 种 格式 / 编 解码 器 字符 串 ， 返 回 
"probably"、"maybe" 或 ""( 空 字 符 串 )。 空 字符 串 是 假 值 ， 因 此 可 以 像 下 面 这 样 在 if 语句 中 使 用 
CanPlayType() : 



































ma 














if (audio.canPlayType("audio/mpeg") ){ 
// 进 一 步 处 理 

} 

而 "probably" 和 "maybe" 都 是 真 值 ， 因 此 在 if 语句 的 条 件 测试 中 可 以 转换 成 true。 

如 果 给 canPlayType () 传 人 了 一 种 MIME 类 型 ， 则 返回 值 很 可 能 是 "maybe" 或 空 字 符 串 。 这 是 因 
为 媒体 文件 本 身 只 不 过 是 音频 或 视频 的 一 个 容器 ， 而 真正 决定 文件 能 否 播 放 的 还 是 编码 的 格式 。 在 同时 
传人 MIME 类 型 和 编 解码 器 的 情况 下 ， 可 能 性 就 会 增加 ， 返 回 的 字符 串 会 变 成 "probably"。 下 面 来 看 
几 个 例子 。 


var audio = document .getElementById("audio-player"); 










































































// 很 可 能 "maybe" 
if (audio.canPplayType ("audio/mpeg"))t{ 


/ /进一步 处 理 

} 

// 可 能 是 "probably" 

if (audio.canPlayType ("audio/ogg; codecs=\"vorbis\""))t{ 
/ /进一步 处 理 

} 

















注意 ， 编 解码 需 必 须 用 引号 引起 来 才 行 。 下 表 列 出 了 已 知 的 已 得 到 支持 的 音频 格式 和 编 解码 需 。 














音 频 字 符 串 支持 的 浏览 曙 

AAC audio/mp4; codecs="mp4a.40.2" IE9+、Safari 4+ 、iOS 版 Safari 

MP3 audio/mpeg IE9+、Chrome 

Vorbis audio/ogg; codecs="vorbis" Firefox 3.5+、Chrome、QOpera 10.5+ 
WAV audio/wav; codecs="1" Firefox 3.5+、Opera 10.5+、Chrome 








当然 ， 也 可 以 使 用 canPlayType() 来 检测 视频 格式 。 下 表 列 出 了 已 知 的 已 得 到 支持 的 音频 格式 和 




















视频 字 符 串 支持 的 浏览 器 
H.264 video/mp4; codecs="avcl .42E01E, mp4a.40.2" IE9+、Safari 4+、iOS 版 Safari、Android 
版 WebKit 
Theora video/ogg; codecs="theora" Firefox 3.5+、Opera 10.5、Chrome 
WebM video/webm; codecs="vp8, vorbis" Firefox 4+、 Opera 10.6、Chrome 


16.3.5 ”Auqdio 类 型 


<audio> 元 素 还 有 一 个 原生 的 JavaScript 构造 函数 Audio, 可 以 在 任何 时 候 播放 音频 。 从 同 为 DOM 
元 素 的 角度 看 , Audio 与 Image 很 相似 , 但 Audio 不 用 像 Image 那样 必须 插入 到 文档 中 。 只 要 创建 一 
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个 新 实例 ， 并 传人 音频 源 文件 即 可 。 


var audio = new Audio("sound.mp3"); 
EventUtil.addHandler (audio, "canplaythrough", function(event)t{ 
audio.play(); 





3 

创建 新 的 Audio 实例 即 可 开始 下 载 指 定 的 文件 。 下 载 完 成 后 ， 调 用 play () 就 可 以 播放 音频 。 

在 iOS 中 ,调用 play () 时 会 弹出 一 个 对 话 框 ， 得 到 用 户 的 许可 后 才能 播放 声音 。 如 果 想 在 一 段 音 
频 播放 后 再 播放 另 一 段 音 频 ， 必 须 在 onfinish 事件 处 理 程序 中 调用 play () 方 法 。 


16.4 ”历史 状态 管理 


历史 状态 管理 是 现代 Web 应 用 开发 中 的 一 个 难点 。 在 现代 Web 应 用 中 ， 用 户 的 每 次 操作 不 一 定 会 
打开 一 个 全 新 的 页 面 , 因此 “后 退 ” 和“ 前进” 按钮 也 就 失去 了 作用 ,导致 用 户 很 难 在 不 同 状 态 间 切 换 。 
要 解决 这 个 问题 , 首选 使 用 hashchange 事件 (第 13 章 曾 讨论 过 ), HTML5 通过 更 新 history 对 象 为 
管理 历史 状态 提供 了 方便 。 

通过 hashchange 事件 ， 可 以 知道 URL 的 参数 什么 时 候 发 生 了 变化 ， 即 什么 时 候 该 有 所 反应 。 而 
通过 状态 管理 API ， 能 够 在 不 加 载 新 页 面 的 情况 下 改变 浏览 器 的 URL 。 为 此 ， 需 要 使 用 
history.pushState() 方 法 , 该 方法 可 以 接收 三 个 参数 : 状态 对 象 、 新 状态 的 标题 和 可 选 的 相对 URL。 
例如 : 

history.pushState({name:"Nicholas"}, "Nicholas' page"， "nicholas.html"); 

执行 pushSstate() 方 法 后 ， 新 的 状态 信息 就 会 被 加 入 历史 状态 栈 ， 而 浏览 器 地 址 栏 也 会 变 成 新 的 
相对 URL。 但 是 , 浏览 器 并 不 会 真 的 向 服务 器 发 送 请 求 ,即使 状态 改变 之 后 查询 1ocation .href 也 会 
返回 与 地 址 栏 中 相同 的 地 址 。 另 外 ,第 二 个 参数 目前 还 没有 浏览 器 实现 ,因此 完全 可 以 只 传人 一 个 空 字 
符 串 ， 或 者 一 个 短 标题 也 可 以 。 而 第 一 个 参数 则 应 该 尽 可 能 提供 初始 化 页 面 状态 所 需 的 各 种 信息 。 
因为 pushState () 会 创建 新 的 历史 状态 ， 所 以 你 会 发 现 “后 退 ” 按 钮 也 能 使 用 了 。 按 下 “后 退 ” 
按钮 ， 会 触发 window 对 象 的 popstate 事件 。popstate 事件 的 事件 对 象 有 一 个 state 属性 ， 这 个 
属性 就 包含 着 当初 以 第 一 个 参数 传递 给 pushstate() 的 状态 对 象 。 

EventUtil.addHandler (window, "popstate", function(event){ 
var state = event.state; 


if (state){  ”// 第 一 个 页 面 加 载 时 state 为 空 
processState(state); 














































































































} 
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得 到 这 个 状态 对 象 后 ,必须 把 页 面 重 置 为 状态 对 象 中 的 数据 表示 的 状态 ( 因为 浏览 器 不 会 自动 为 你 
做 这 些 )。 记 住 ,浏览 器 加 载 的 第 一 个 页 面 没 有 状态 ， 因 此 单 击 “ 后 退 ” 按 钮 返回 浏览 右 加 载 的 第 一 个 
页 面 时 ，event .state 值 为 null。 

要 更 新 当前 状态 ， 可 以 调用 replacestate()， 传人 的 参数 与 pushstate() 的 前 两 个 参数 相同 。 
调用 这 个 方法 不 会 在 历史 状态 栈 中 创建 新 状态 ， 只 会 重 写 当前 状态 。 











GD popstate 事件 发 生 后 ， 事 件 对 象 中 的 状态 对 象 (event .state ) 是 当前 状态 。 
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history.replaceState({name:"Greg"}, "Greg's page"); 


支持 HTML5 历史 状态 管理 的 浏览 右 有 Firefox 4+、Safari 5+、Opera 11.5+ 和 Chrome。 在 Safari 和 
Chrome 中 ， 传 递 给 pushstate() 或 replaceState() 的 状态 对 象 中 不 能 包含 DOM 元 素 。 而 Firefox 
支持 在 状态 对 象 中 包含 DOM 元 素 。Opera 还 支持 一 个 history .state 属性 ， 它 返回 当前 状态 的 状态 
对 象 。 










在 使 用 HTMLS5 的 状态 管理 机 制 时 ,请 确保 使 用 pushState () 创 造 的 每 一 个 " 假 ” 
URL， 在 Web 服务 器 上 都 有 一 个 真 的 、 实 际 存在 的 URL 与 之 对 应 。 否 则 ， 单 击 “ 刷 
新 ”按钮 会 导致 404 错误 。 


16.5 小结 


HTML5 除了 定义 了 新 的 标记 规则 ， 还 定义 了 一 些 JavaScript API。 这 些 API 是 为 了 让 开发 人 员 创 建 

出 更 好 的 、 能 够 与 桌面 应 用 媲美 的 用 户 界 面 而 设计 的 。 本 章 讨论 了 如 下 API。 
口 路 文 代 消息 传递 API 能 够 让 我 们 在 不 降低 同 源 策略 安全 性 的 前 提 下 ， 在 来 自 不 同 域 的 文档 间 传 
递 消息 。 
口 原生 拖 放 功 能 让 我 们 可 以 方便 地 指定 某 个 元 素 可 拖 动 ， 并 在 操作 系统 要 放置 时 做 出 响应 。 
以 创建 自 定义 的 可 拖 动 元 素 及 放置 目标 。 
口 新 的 媒体 元 素 <audio> 和 <video> 拥 有 自己 的 与 音频 和 视频 交互 的 API。 并 非 所 有 浏览 器 支持 所 
有 的 媒体 格式 ， 因 此 应 该 使 用 canPlayType () 检 查 浏览 器 是 否 支持 特定 的 格式 。 
口 历 史 状 态 管理 让 我 们 不 必 印 载 当 前 页 面 即 可 修改 浏览 器 的 历史 状态 栈 。 有 了 这 种 机 制 ， 用 户 就 

可 以 通过 “后 退 ” 和 “前 进 ” 按 钮 在 页 面 状态 间 切 换 ， 而 这 些 状 态 完全 由 JavaScript 进行 控制 。 
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本 章 内 容 

口 理解 浏览 需 报 告 的 错误 
口 处 理 错误 

口 调试 JavaScript 代码 








于 JavaScript 本 身 是 动态 语言 , 而且 多 年 来 一 直 没 有 固定 的 开发 工具 ,因此 人 们 普遍 认为 它 是 
一 种 最 难于 调试 的 编程 语言 。 脚 本 出 错时 , 浏览 器 通常 会 给 出 类 似 于 “object expected”( 缺少 
对 象 ) 这 样 的 消息 ， 没 有 上 下 文 信息 ， 让 人 摸 不 着 头脑 。ECMAScript 第 3 版 致力 于 解决 这 个 问题 ， 专 
门 引 入 了 try-catch 和 throw 语句 以 及 一 些 错误 类 型 ， 意 在 让 开发 人 员 能 够 适当 地 处 理 错误 。 几 年 之 
后 ，Web 浏览 器 中 也 出 现 了 一 些 JavaScript 调试 程序 和 工具 。2008 年 以 来 , 大 多 数 Web 浏览 器 都 已 经 具 
备 了 一 些 调试 JavaScript 代码 的 能 
在 有 了 语言 特性 和 工具 支持 之 后 , 现在 的 开发 人 员 已 经 能 够 适当 地 实现 错误 处 理 , 并 且 能 够 找到 错 
误 的 根源 。 


17.1 浏览 器 报告 的 错误 


人 琅 、Firefox、Safari、Chrome 和 Opera 等 主流 浏览 器 ， 都 具有 某 种 向 用 户 报 告 JavaScript 错误 的 机 
制 。 默 认 情 况 下 ， 所 有 浏览 器 都 会 隐藏 此 类 信息 ， 毕 竟 除 了 开发 人 员 之 外 ， 很 少 有 人 关心 这 些 内 容 。 
因此 ， 在 基于 浏览 器 编写 JavaScript 脚本 时 ， 别 忘 了 启用 浏览 器 的 JavaScript 报告 功能 ， 以 便 及 时 收 到 
错误 通知 。 


17.1.1 IE 


耻 是 唯一 一 个 在 浏览 器 的 界面 窗 体 ( chrome ) 中 显示 JavaScript 错误 信息 的 浏览 器, 在 发 生 JavaScript 
错误 时 ,浏览 器 左下 角 会 出 现 一 个 黄色 的 图 标 ， 图 标 旁边 则 显示 着 "Error on page" (页面 中 有 错误 )。 
自如 不 是 存心 去 看 的 话 ， 你 很 可 能 不 会 注意 这 个 图 标 。 双 击 这 个 图 标 ， 就 会 看 到 一 个 包含 错误 消息 的 对 
话 框 ,其 中 还 包含 诸如 行 号 、 字 符 数 、 错 误 代 码 及 文件 名 ( 其 实 就 是 你 在 查看 的 页 面 的 URL ) 等 相关 信 
息 。 图 17-1 展示 了 IE 的 错误 消息 对 话 框 。 

这 些 信息 对 于 一 般 用 户 还 算 说 得 过 去 ,但 对 Web 开发 来 说 就 远 远 不 够 了 。 可 以 通过 设置 让 错误 对 
话 框 一 发 生 错 误 就 显示 出 来 。 为 此 , 要 打开 “Tools”( 工具 ) 菜单 中 的 “Internet Options”( Internet 选项 ) 
对 话 框 ,切换 到 “Advanced”( 高 级 ) 选项 卡 ， 选 中 “Display a notification about every script error”( 显 
示 每 个 脚本 错误 的 通知 ) 复 选 框 (参见 图 17-2 )。 单 击 “OK”( 确定 ) 按钮 保存 设置 。 
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四 This webpage conlains errors 
Problems with this webpage might prevent it from displaying or working correctly. Double- 
click the warning icon displayed in the status bar to see this message in the future. 








Show details >> | Copy details to clipboard | | OK | 





口 Always show this message for webpage errors 











Temist Options “EY 
| Goneral | Security | Privacy | content | Connections | Programs | advanced | 
Settings 
ey 可 





Aways expand ALT text for inagas | 

Mnve syshem ra 了 weh Fnrbusjsnjertinn rhanges 上 IE 
Reset text size to medium tor new windows and tabs 

[| Reset text see to medium while zo0ommna” 

四] Reset zoom hevel to 100% fur new widows aird Labs 

Drowsing 

Automatically check For Intornet Exploror updatecs 

Cose unused folders in History and Favorites* 

vw] Disable script debuggng (Internet Explorer) 

加 Disahle srrip dahuoging (Other) 

由 EPE SOUFCSUOT SOU very spt eno 

回 

| 




















四 





























Enable FTP folder view (outside of Internet Explorer) 
Enable pauye Uansiiors 
4] T EE 
*Takes cffect aftor you restart Internet Explorer 
Restore advanced settings 
Reset INternet Explorer settings EEC 


Deletes al temporary files, disables browser Reset, 
cd-ors, qd resets all Ure dhanged setlings, 一 


MYnu shnt 归 nnly uce thi< 让 your hrnwwser is in an Unmusahle shake 























OK Cancel apply 
图 17-2 


保存 了 设置 之 后 ， 通 常 要 双击 黄色 图 标 才 会 显示 的 对 话 ”ee 一 一 一 
框 ， 就 会 变 成 一 有 错误 发 生 随即 自动 显示 出 来 。 Te 
另外 , 如果 启 用 了 脚本 调试 功能 的 话 ( 默认 是 禁用 的 ), 那 


么 在 发 生 错 误 时 ， 你 不 仅 会 显示 错误 通知 ， 而 且 还 会 看 到 另 一 “| 5 一 一 一 一 
个 对 话 杠 ， 询 问 是 否 想 要 调试 错误 (参见 图 17-3 )。 
要 启用 脚本 调试 功能 ， 必 须要 在 IE 中 安装 某 种 脚本 调试 


器 。( IE8 和 IE9 自 带 调试 器 。) 本 章 后 面 会 单独 讨论 调试 需 。 图 17-3 





































在 IE7 及 更 早 版 本 中 ， 如 果 错 误 发 生 在 位 于 外 部 文件 的 脚本 中 ， 行 号 通常 会 与 
错误 所 在 的 行 号 差 1。 如 果 是 吝 入 在 页 面 中 的 脚本 发 生 错 误 , 则 行 号 0 





17.1.2 Firefox 
默认 情况 下 ，Firefox 在 JavaScript 发 生 错误 时 不 会 通过 浏览 器 界面 给 出 提示 。 但 它 会 在 后 台 将 错误 
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记录 到 错误 控制 台中 。 单 击 “Tools”( 工具 ) 菜单 中 的 “Error Console”( 错误 控制 台 ) 可 以 显示 错误 控 
制 台 ( 见 图 17-4 )。 你 会 发 现 ， 错误 控制 台中 实际 上 还 包含 与 JavaScript、CSS 和 HTML 相关 的 警告 
信息 ， 可 以 通过 筛选 找到 错误 。 

二 Enor Console “EE 


面 | al @En: 人 wamings Messages 淡 clear 


Code: Evaluate 





bin.attachEvent is not a function 
Mle MH. /My 20vYriting My %20Buoks/Prufessivnal%20JaraScrip/ Srv und%20Edilivn/E, 























图 17-4 


在 发 生 JavaScript 错误 时 ,Firefox 会 将 其 记录 为 一 个 错误 , 包括 错误 消息 、 引 发 错误 的 URL 和 错误 
所 在 的 行 号 等 信息 。 单 击 文件 名 即 可 以 只 读 方 式 打开 发 生 错 误 的 脚本 ， 发 生 错误 的 代码 行 会 突出 显示 。 

目前 ， 最 流行 的 Firefox 插件 Firebug， 已 经 成 为 开发 人 员 必 备 的 JavaScript 纠 错 工具 。 这 个 可 以 从 
www.getfirebug.com 下 载 到 的 插件 ,会 在 Firefox 状态 栏 的 右 下 角 区 域 添加 一 个 图 标 。 默 认 情 况 下 ， 右 下 
角 区 域 显示 的 是 一 个 绿色 对 色 图 标 。 在 有 JavaScript 错误 发 生 时 ， 图 标 会 变 成 红 又 ， 同 时 旁边 显示 错误 
的 数量 。 单 击 这 个 红 又 会 打开 Firebug 控制 台 ， 其 中 显示 有 错误 消息 、 错 误 所 在 的 代码 行 (不 包含 上 下 
文 ) 错误 所 在 的 URL 以 及 行 号 (参见 图 17-5 )。 


File Edit View History Bookmarks Tools Help 
Throwing Erors Example [+ 

















€ DO ||) fle/W/My Wiriting/My Books/Professional JavaScript/Third EditiovEx 含 ~ | |- Googh 月 | 会 | 四 | 














[| consoie™ | Wm css seript DOM iet [2 jae9 
Profile | Al| Erors Warnings Info Debug Info 
an array, 











cess(): Argment must be an array."}; Throwi..e0t.htm (line 11) 
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图 17-5 
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在 Firebug 中 单 击 导 致 错误 的 代码 行 , 将 在 一 个 新 Firebug 视图 中 打开 整个 脚本 , 该 代码 行 在 其 中 突 


除了 显示 错误 之 外 ，Firebug 还 有 更 多 的 用 处 。 实 际 上 ， 它 还 是 针对 Firefox 的 成 


熟 的 调试 环境 ， 为 调试 JavaScript、CSS、DOM 和 网 络 连接 错误 提供 了 诸多 功能 。 





17.1.3 Safari 


Windows 和 Mac OS 平台 的 Safari 在 默认 情况 下 都 会 隐藏 全 部 JavaScript 错误 。 为 了 访问 到 这 些 信 
息 ， 必 须 启 用 “Develop”( 开发 ) 菜单 。 为 此 ， 需 要 单 击 “Edit”( 编辑 ) 菜单 中 的 “Preferences”( 偏 
好 设置 )， 然 后 在 “Advanced”( 高 级 ) 选项 卡 中 ,选中 “Show develop menu in menubar”( 在 菜单 栏 中 
显示 “开发 ”菜单 )。 启 用 此 项 设置 之 后 ， 就 会 在 Safari 的 菜单 栏 中 看 到 一 个 “Develop” 菜 单 (参见 
图 17-6 )。 
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“Develop” 菜 单 中 提供 了 一 些 与 调试 有 关 的 选项 ， 还 有 一 些 选项 可 以 影响 当前 加 载 的 页 面 。 单 击 
“Show Error Console”( 显示 错误 控制 台 ) 选项 ， 将 会 看 到 一 组 JavaScript 及 其 他 错误 。 控 制 台 中 显示 着 
错误 消息 、 错 误 的 URL 及 错误 的 行 号 (参见 图 17-7 )。 

单 击 控制 台中 的 错误 消息 ， 就 可 以 打开 导致 错误 的 源 代码 。 除 了 被 输出 到 控制 台 之 外 ，JavaScript 
错误 不 会 影响 Safari 窗口 的 外 观 。 
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©@ Error: process(): Argument must be an array. ThrowinaErrorsExample0l.hrtm:11 
> | 








17.1.4 Opera 


Opera 在 默认 情况 下 也 会 隐藏 JavaScript 错误 ， 所 有 错误 都 会 被 记录 到 错误 控制 台中 。 要 打开 错误 
控制 台 , 需要 单 击 “Tools”( 工具 ) 菜单 , 在 “Advanced”( 高 级 ) 子 菜单 项 下 面 再 单 击 “Error Console” 
(错误 控制 台 )。 与 Firefox 一 样 ，Opera 的 错误 控制 台中 也 包含 了 除 JavaScript 错误 之 外 的 很 多 来 源 (如 
HTML、CSS、XML、XSLT 等 ) 的 错误 和 警告 信息 。 要 分 类 查看 不 同 来 源 的 消息 ， 可 以 使 用 左下 角 的 
下 拉 选 择 框 〈 参 见 图 17-8 )。 

错误 消息 中 显示 着 导致 错误 的 URL 和 错误 所 在 的 线程 。 有 时 候 ， 还 会 有 栈 跟踪 信息 。 除 了 错误 控 
制 台 中 显示 的 信息 之 外 ， 没 有 其 他 途径 可 以 获得 更 多 信息 。 

也 可 以 让 Opera 一 发 生 错 误 就 弹出 错误 控制 台 。 为 此 ,要 在 “Tools”( 工具 ) 菜 单 中 单 击 “Preferences” 
(首选 项 ), 再 单 击 “Advanced”( 高 级 ) 选 项 卡 , 然后 从 左 侧 菜单 中 选择 “Content”( 内 容 ), 单 击 “JavaScrip 
Options”( JavaScript 选项 ) 按钮 ， 显 示 选 项 对 话 框 ( 如 图 17-9 所 示 )。 

在 这 个 选项 对 话 框 中 ， 选 中 “Open console on error”( 出 错时 打开 控制 台 )， 单 击 “OK”( 确定 ) 
按钮 。 这 样 ， 每 当 发 生 JavaScript 错误 时 ， 就 会 弹出 错误 控制 台 。 另 外 ， 还 可 以 针对 特定 的 站 点 来 作 
此 设置 ， 方 法 是 单 击 “Tools”( 工具 ) “Quick Preferences”( 快速 参数 )、“Edit Site Preferences”( 编 
辑 站 点 首选 项 )， 选 择 “Scripting”( 脚本 ) 选项 卡 ， 最 后 选中 “Open console on error”( 出 错时 打开 
控制 台 )。 
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J Error Console 


Expand All 


7 @ Javascript - file://localhost/1:/Nys20Writing/ Nys20Dooks/Profcssional,... 
Event thread: 
Error:; 


Collapse All 


click 


nome; Error 
message; NOT SUPPORTED ERR 
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Error: 
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Error: 
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Imessage; NOT_SUPPORTED ERR 
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| Alow script to receive right clicks 
™ Allow script to hide address bar 


~ Open console on error 


User JavaScript fles 








17-8 


17.1.5 Chrome 





图 17-9 


与 Safari 和 Opera 一 样 ，Chrome 在 默认 情况 下 也 会 隐藏 JavaScript 错误 。 所 有 错误 都 将 被 记录 到 
Web Inspector 控制 台中 。 要 查看 错误 消息 ， 必 须 打 开 Web Inspector。 为 此 ， 要 单 击 位 于 地 址 栏 右 侧 的 
“Control this page”( 控制 当前 页 ) 按 钮 , 选择 “Developer”( 开发 人 员 ) “JavaScript console”( JavaScript 


控制 台 )， 参 见 图 17-10。 


图 Throwing Erors Example x 


© ©ifileiMy%20Writingivy%20Books/Professional%20JavaScripyThird%20Edition/Examples/Ch17/ThrowingErrorsEx; 穷 Ey 
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图 17-10 
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打开 的 Web Inspector 中 包含 着 有 关 页 面 的 信息 和 JavaScript 控制 台 。 控 制 台 中 显示 着 错误 消息 、 错 
误 的 URL 和 错误 的 行 号 ( 参见 图 17-11 )。 








3 Developer Tools - file:///l:/My%20Writing/My%20Books/Professional%20JavaScript/Thir.. 一 口 Xx 


[ES 


Elements | Resources Network Scripts Timeline Profiles Audits Console Search Elements 











bp Computed Style 口 Show'inherited 


Styles 
element.style { 
Pp <script type="text/ 
Javascrip-"»>..</script> 证 
</body> | 
<Ahtm1> Matched CSS Rules 
body { user agent stylesheet 
display: block; 
pmargin: 8px; 


bp Metrics 
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a mr = 
@ Uncaught Error : process(): Argument must be an array。 IhrowinqgErrorsExamo21eol.htm:1ll 
>| 





器 站 Q@IE | Erors warnings Logs 





图 17-11 
单 击 JavaScript 控制 台中 的 错误 ， 就 可 以 定位 到 导致 错误 的 源 代码 行 。 


17.2 ”错误 处 理 


错误 处 理 在 程序 设计 中 的 重要 性 是 勿 庸 蜀 颖 的。 任何 有 影响 力 的 Web 应 用 程序 都 需要 一 套 完善 的 
错误 处 理 机 制 ， 当 然 ， 大 多 数 佼佼 者 确实 做 到 了 这 一 点 ,但 通常 只 有 服务 器 端 应 用 程序 才能 做 到 如 此 。 
实际 上 ， 服 务 器 端 团 队 往 往 会 在 错误 处 理 机 制 上 投入 较 大 的 精力 ,通常 要 考虑 按照 类 型 、 频 率 , 或 者 其 
他 重要 的 标准 对 错误 进行 分 类 。 这 样 一 来 , 开发 人 员 就 能 够 理解 用 户 在 使 用 简单 数据 库 查 询 或 者 报告 生 
成 脚本 时 ， 应 用 程序 可 能 会 出 现 的 问题 。 
虽然 客户 端 应 用 程序 的 错误 处 理 也 同样 重要 ， 但 真正 受到 重视 ， 还 是 最 近 几 年 的 事 。 实 际 上 , 我们 
要 面 对 这 样 一 个 不 争 的 事实 : 使 用 Web 的 绝 大 多 数 人 都 不 是 技术 高 手 ， 其 中 甚至 有 很 多 人 根本 就 不 明 
白 浏览 器 到 底 是 什么 , 更 不 用 说 让 他 们 说 喜欢 哪 一 个 了 。 本章 前 面 讨论 过 , 每 个 浏览 器 在 发 生 JavaScript 
错误 时 的 行为 都 或 多 或 少 有 一 些 差异 。 有 的 会 显示 小 图 标 , 有 的 则 什么 动静 也 没有 , 浏览 器 对 JavaScript 
错误 的 这 些 默 认 行 为 对 最 终 用 户 而 言 ， 毫 无 规律 可 循 。 最 理想 的 情况 下 ， 用 户 遇 到 错误 搞 不 清 为 什么 ， 
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他 们 会 再 试 着 重 做 一 次 ; 最 糟糕 的 情况 下 ， 用 户 会 恼 善 成 翁 ， 一 去 不 复 返 了 。 良 好 的 错误 处 理 机 制 可 以 
让 用 户 及 时 得 到 提醒 ， 知 道 到 底 发 生 了 什么 事 ， 因 而 不 会 惊 悍 失 措 。 为 此 ， 作 为 开发 人 员 ， 我 们 必须 理 
解 在 处 理 JavaScript 错误 的 时 候 ， 都 有 哪些 手段 和 工具 可 以 利用 。 
































17.2.1 try-catch 语 句 


ECMA-262 第 3 版 引入 了 try-catch 语句 , 作为 JavaScript 中 处 理 异 常 的 一 种 标准 方式 。 基 本 的 语 
法 如 下 所 示 ， 显 而 易 见 ， 这 与 Java 中 的 try-catch 语句 是 完全 相同 的 。 
tzY{ 
// 可 能 会 导致 错误 的 代码 
} catch(error)t{ 
// 在 错误 发 生 时 怎么 处 理 
} 
也 就 是 说 , 我 们 应 该 把 所 有 可 能 会 抛 出 错误 的 代码 都 放 在 try 语句 块 中 , 而 把 那些 用 于 错误 处 理 的 
代码 放 在 catch 块 中 。 例 如 : 
try { 
window.someNonexistentFunction(); 
} catch (error)f{ 


alert ("An error happened!"); 


} 

如 果 try 块 中 的 任何 代码 发 生 了 错误 ， 就 会 立即 退出 代码 执行 过 程 ， 然 后 接着 执行 catch 块 。 此 
时 ，catch 块 会 接收 到 一 个 包含 错误 信息 的 对 象 。 与 在 其 他 语言 中 不 同 的 是 ， 即 使 你 不 想 使 用 这 个 错误 
对 象 , 也 要 给 它 起 个 名 字 。 这 个 对 象 中 包含 的 实际 信息 会 因 浏 览 器 而 异 ,但 共同 的 是 有 一 个 保存 着 错误 
消息 的 message 属性 。 ECMA-262 还 规定 了 一 个 保存 错误 类 型 的 name 属性 ; 当前 所 有 浏览 器 都 支持 这 
个 属性 (Opera 9 之 前 的 版 本 不 支持 这 个 属性 )。 因 此 ,在 发 生 错 误 时 ， 就 可 以 像 下 面 这 样 实事 求 是 地 显 
示 浏 览 需 给 出 的 消息 。 




































































try { 
号 window.someNonexistentFunction(); 
} catch (error)t{ 
alert (error.message); 


} 


TryCatchExample01.htm 


这 个 例子 在 向 用 户 显 示 错 误 消 息 时 , 使 用 了 错误 对 象 的 message 属性 。 这 个 message 属性 是 唯一 
一 个 能 够 保证 所 有 浏览 絮 都 支持 的 属性 ， 除 此 之 外 ，IE、Firefox、Safari、Chrome 以 及 Opera 都 为 事 人 
对 象 添 加 了 其 他 相关 信息 。 正 添加 了 与 message 属性 完全 相同 的 description 属性 ， 还 添加 了 保存 
着 内 部 错误 数量 的 number 属性 。Firefox 添加 了 fileName 、1ineNumber 和 stack( 包含 栈 跟踪 信息 ) 
属性 。Safari 添加 了 line (表示 行 号 )、sourceId ( 表示 内 部 错误 代码 ) 和 sourceURL 属性 。 当 然 ， 
在 跨 浏览 器 编程 时 ， 最 好 还 是 只 使 用 message 属性 。 

1. finally 子 句 

虽然 在 try-catch 语句 中 是 可 选 的 , 但 finally 子 句 一 经 使 用 ， 其 代码 无 论 如 何 都 会 执行 。 换 句 
话说 ，try 语句 块 中 的 代码 全 部 正常 执行 ，finally 子 句 会 执行 ; 如 果 因 为 出 错 而 执行 了 catch 语句 
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块 ，finally 子 句 照样 还 会 执行 。 只 要 代码 中 包含 finally 子 句 ， 则 无 论 try 或 catch 语句 块 中 包 
含 什么 代码 一 一 其 至 return 语句 ， 都 不 会 阻止 finally 子 句 的 执行 。 来 看 下 面 这 个 函数 。 
function testFinally(){ 
9 bry 
return 2; 
} catch (error){ 
return 1; 
} finally { 
return 0; 


} 


TryCatchExample02.htm 


这 个 函数 在 try-catch 语句 的 每 一 部 分 都 放 了 一 条 return 语句 。 表 面 上 看 ， 调 用 这 个 函数 会 返 
回 2， 因 为 返回 2 的 return 语句 位 于 try 语句 块 中 ， 而 执行 该 语句 又 不 会 出 错 。 可 是 ， 由 于 最 后 还 有 
一 个 finally 子 句 , 结果 就 会 导致 该 return 语句 被 忽略 ; 也 就 是 说 , 调用 这 个 函数 只 能 返回 0。 如 果 
把 finally 子 句 拿 掉 ， 这 个 函数 将 返回 2。 

如 果 提 供 finally 子 句 ， 则 catch 子 句 就 成 了 可 选 的 (catch 或 finally 有 一 个 即 可 )。IE7 及 
更 早 版 本 中 有 一 个 bug: 除非 有 catch 子 句 ， 否 则 finally 中 的 代码 永远 不 会 执行 。 如 果 你 仍然 要 考 
虑 正 的 早期 版 本 ， 那 就 只 好 提供 一 个 catch 子 句 ， 哪 怕 里 面 什么 都 不 写 。IE8 修复 了 这 个 bug。 









































请 读者 务必 要 记 住 ， 只 要 代码 中 包含 finally 子 句 ， 那 么 无 论 try 还 是 catch 语句 块 
中 的 return 语句 都 将 被 忽略 。 因 此 ， 在 使 用 finally 子 句 之 前 , 一 定 要 非常 清楚 你 想 让 代 
码 怎么 样 。 






2. 错误 类 型 
执行 代码 期 间 可 能 会 发 生 的 错误 有 多 种 类 型 。 每 种 错误 都 有 对 应 的 错误 类 型 ， 而 当 错 误 发 生 时 ， 就 
会 抛 出 相应 类 型 的 错误 对 象 。ECMA-262 定义 了 下 列 7 种 错误 类 型 


口 Error 

















EvalError 








RangeError 











口 

口 

口 ReferenceError 
口 syntaxError 

口 





TypeError 





DQ URIError 

其 中 ，Error 是 基 类 型 ， 其 他 错误 类 型 都 继承 自 该 类 型 。 因 此 ,所 有 错误 类 型 共享 了 一 组 相同 的 属 
性 (错误 对 象 中 的 方法 全 是 默认 的 对 象 方法 )。Error 类 型 的 错误 很 少见 ， 如 果 有 也 是 浏览 器 抛 出 的 ; 

这 个 基 类 型 的 主要 目的 是 供 开 发 人 员 抛 出 自 定 义 错误 。 

EvalError 类 型 的 错误 会 在 使 用 eval () 函数 而 发 生 异 常 时 被 抛 出 。ECMA-262 中 对 这 个 错误 有 如 
下 描述 :“ 如 果 以 非 直接 调用 的 方式 使 用 eval 属性 的 值 ( 换 句 话 说， 没有 明确 地 将 其 名 称 作为 一 个 
Identifier， 即 用 作 callExpression 中 的 MemberExpression )， 或 者 为 eval 属性 赋值 。” 简单 
地 说 ， 如 果 没有 把 eval () 当成 函数 调用 ， 就 会 抛 出 错误 ， 例 如 : 
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new eval (); 
eval = foo; 


// 抛 出 EvalError 
// 抛 出 EvalError 














在 实践 中 ， 浏 览 需 不 一 定 会 在 应 该 抛 出 错误 时 就 抛 出 EvalError。 例 如 ，Firefox 4+ 和 下 8 对 第 一 
种 情况 会 抛 出 TypeError， 而 第 二 种 情况 会 成 功 执行 ， 不 发 生 错误 。 有 鉴于 此 ， 加 上 在 实际 开发 中 极 
少 会 这 样 使 用 eval () ， 所 以 遇 到 这 种 错误 类 型 的 可 能 性 极 小 。 





RangeError 























类 型 的 错误 会 在 数值 超出 相应 范围 时 触发 。 例如， 在 定义 数组 时 ， 如 果 指 定 了 数组 不 


支持 的 项 数 ( 如 -20 或 NumberMAX VALUE )， 就 会 触发 这 种 错误 。 下 面 是 具体 的 例子 。 


Var itemsl = new Array(-20); // 抛 出 RangeError 
Var items2 = new Array (Number .MAX VALUE ) ; // 抛 出 RangeError 


JavaScript 中 经 常会 出 现 这 种 范围 错误 。 
在 找 不 到 对 象 的 情况 下 , 会 发 生 ReferenceError ( 这 种 情况 下 , 会 直接 导致 人 所 共 知 的 "object 
expected" 浏 览 器 错误 )。 通 常 ， 在 访问 不 存在 的 变量 时 ， 就 会 发 生 这 种 错误 ， 例 如 : 























Var obj = x; // 在 Xx 并 未 声明 的 情况 下 抛 出 ReferenceError 

至 于 SyntaxError， 当 我 们 把 语法 错误 的 JavaScript 字符 串 传 人 eval () 函数 时 ， 就 会 导致 此 类 错 
误 。 例 如 : 

eval ("a ++ b"); // 抛 出 SyntaxError 


如 果 语 法 错误 的 代码 出 现在 eval () 函数 之 外 , 则 不 太 可 能 使 用 syntaxError, 因为 此 时 的 语法 错 
误会 导致 JavaScript 代码 立即 停止 执行 。 

TypeError 类 型 在 JavaScript 中 会 经 常用 到 , 在 变量 中 保存 着 意外 的 类 型 时 , 或 者 在 访问 不 存在 的 
方法 时 ， 都 会 导致 这 种 错误 。 错 误 的 原因 虽然 多 种 多 样 ,但 归根 结 底 还 是 由 于 在 执行 特定 于 类 型 的 操作 
时 ， 变 量 的 类 型 并 不 符合 要 求 所 致 。 下 面 来 看 几 个 例子 。 






































var o = new 10; // 抛 出 TypeError 
alert ("name" in true); // 抛 出 TypeError 
Function.prototype.toString.call ("name"); // 抛 出 TypeError 





最 常 发 生 类 型 








错误 的 情况 ， 就 是 传递 给 函数 的 参数 事先 未 经 检查 ， 结 果 传 人 类 型 与 预期 类 型 不 相符 。 





在 使 用 encodeURI () 或 decodeURI ()， 而 URI 格 式 不 正确 时 ， 就 会 导致 URIError 错误 。 这 种 








错误 也 很 少见 ， 因 为 前 面 说 的 这 两 个 函数 的 容错 性 非常 高 。 
利用 不 同 的 错误 类 型 ， 可 以 获悉 更 多 有 关 蜡 常 的 信息 ， 从 而 有 助 于 对 错误 作出 恰当 的 处 理 。 要 想 知 
道 错误 的 类 型 ， 可 以 像 下 面 这 样 在 try-catch 语句 的 catch 语句 中 使 用 instanceof 操作 符 。 


try { 




















someFunction(); 
} catch (error){ 

if (error instanceof TypeError)t{ 
/ /处理 类 型 错误 

} else if (error instanceof ReferenceError)t{ 
// 处 理 引 用 错误 

} else { 
/ /处理 其 他 类 型 的 错误 


} 
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在 跨 浏览 器 编程 中 ， 检 查 错误 类 型 是 确定 处 理 方式 的 最 简便 途径 ; 包含 在 message 属性 中 的 错误 
消息 会 因 浏 览 器 而 异 。 

3. 合理 使 用 try-catch 

当 try-catch 语句 中 发 生 错 误 时 ， 浏 览 器 会 认为 错误 已 经 被 处 理 了 ， 因 而 不 会 通过 本 章 前 面 讨论 
的 机 制 记录 或 报告 错误 。 对 于 那些 不 要 求 用 户 懂 技术 ， 也 不 需要 用 户 理 解 错误 的 Web 应 用 程序 ， 这 应 
该 说 是 个 理想 的 结果 。 不 过 ，try-catch 能 够 让 我 们 实现 自己 的 错误 处 理 机 制 。 
使 用 try-catch 最 适合 处 理 那 些 我 们 无 法 控制 的 错误 。 假 设 你 在 使 用 一 个 大 型 JavaScript 库 中 的 
函数 ,该 函数 可 能 会 有 意 无 意 地 抛 出 一 些 错误 。 由 于 我 们 不 能 修改 这 个 库 的 源 代 码 ， 所 以 大 可 将 对 该 函 
数 的 调用 放 在 try-catch 语句 当中 ， 万 一 有 什么 错误 发 生 ， 也 好 恰当 地 处 理 它 们 。 

在 明明 白白 地 知道 自己 的 代码 会 发 生 错误 时 ， 再 使 用 try-catch 语句 就 不 太 合适 了 。 人 例如， 如果 
传递 给 函数 的 参数 是 字符 串 而 非 数值 ， 就 会 造成 函数 出 错 ， 那么 就 应 该 先 检 查 参 数 的 类 型 ， 然 后 再 决定 
如 何 去 做 。 在 这 种 情况 下 ， 不 应 用 使 用 try-catch 语句 。 


17.2.2 ” 抛 出 错误 


与 try-catch 语句 相配 的 还 有 一 个 throw 操作 符 ， 用 于 随时 抛 出 自 定义 错误 。 抛 出 错误 时 ,必须 
要 给 throw 操作 符 指定 一 个 值 ， 这 个 值 是 什么 类 型 ， 没 有 要 求 。 下 列 代码 都 是 有 效 的 。 

throw 12345; 

throw "Hello world!"; 


throw true; 
throw { name: "JavaScript"}; 


在 遇 到 throw 操作 符 时 ,代码 会 立即 停止 执行 。 仅 当 有 try-catch 语句 捕获 到 被 抛 出 的 值 时 , 代 
码 才 会 继续 执行 。 

通过 使 用 某 种 内 置 错 误 类 型 ， 可 以 更 真实 地 模拟 浏览 器 错误 。 每 种 错误 类 型 的 构造 函数 接收 一 个 参 
数 ， 即 实际 的 错误 消息 。 下 面 是 一 个 例子 。 
throw new Error("Something bad happened."); 
这 行 代码 抛 出 了 一 个 通用 错误 ， 带 有 一 条 自 定义 错误 消息 。 浏 览 器 会 像 处 理 自己 生成 的 错误 一 样 ， 
来 处 理 这 行 代码 抛 出 的 错误 。 换 句 话说 ,浏览 器 会 以 常规 方式 报告 这 一 错误 ,并且 会 显示 这 里 的 自 定义 


错误 消息 。 像 下 面 使 用 其 他 错误 类 型 ， 也 可 以 模拟 出 类 似 的 浏览 器 错误 。 


throw new SyntaxError("I don’t like your syntax."); 

throw new TypeError ("What type of variable do you take me for?"); 
throw new RangeError ("Sorry, you just don’t have the range."); 

throw new EvalError("That doesn’t evaluate."); 

throw new URIError ("Uri, is that you?"); 

throw new ReferenceError("You didn’'t cite your references properly."); 


在 创建 自 定义 错误 消息 时 最 常用 的 错误 类 型 是 Error、 RangeError、ReferenceError 和 TypeErroro 

另外 , 利用 原型 链 还 可 以 通过 继承 Error 来 创建 自 定 义 错误 类 型 ( 原型 链 在 第 6 章 中 介绍 ),。 此 时 ， 
需要 为 新 创建 的 错误 类 型 指定 name 和 message 属性 。 来 看 一 个 例子 。 

function CustomError (message){ 


this.name = "CustomError"; 
this.message = message; 







































































































































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 





504 第 17 章 ”错误 处 理 与 调试 








CustomError.prototype = new Error(); 


throw new CustomError("My message"); 


ThrowingErrorsExample01.htm 


浏览 器 对 待 继承 自 Error 的 自 定义 错误 类 型 ， 就 像 对 待 其 他 错误 类 型 一 样 。 如 果 要 捕获 自己 抛 出 
的 错误 并 且 把 它 与 浏览 器 错误 区 别 对 竺 的话 ， 创 建 自 定义 错误 是 很 有 用 的 。 






























IE 只 有 在 抛 出 Error 对 象 的 时 候 才 会 显示 自 定 义 错 误 消 息 。 对 于 其 他 类 型 ， 它 
都 无 一 例外 地 显示 "exception thrown and not caught" ( 抛 出 了 异常 ， 且 未 被 
捕获 ) 。 


1. 抛 出 错误 的 时 机 

要 针对 函数 为 什么 会 执行 失败 给 出 更 多 信息 , 抛 出 自 定义 错误 是 一 种 很 方便 的 方式 。 应 该 在 出 现 某 
种 特定 的 已 知 错误 条 件 ， 导致 函 数 无 法 正常 执行 时 抛 出 错误 。 换 句 话 说 , 浏览 器 会 在 某 种 特定 的 条 件 下 
执行 函数 时 抛 出 错误 。 例 如 ， 下 面 的 函数 会 在 参数 不 是 数组 的 情况 下 失败 。 


C9 function process (values)t{ 
values.sort (); 





for (var i=0, len=values.length; i < len; I++){ 
if (values[i] > 100){ 
return values[i]; 
} 
} 


return -1; 


ThrowingErrorsExample02.htm 


如 果 执 行 这 个 函数 时 传 给 它 一 个 字符 串 参 数 ， 那 么 对 sort () 的 调用 就 会 失败 。 对 此 ， 不 同 浏览 
会 给 出 不 同 的 错误 消息 ,但 都 不 是 特别 明确 ， 如 下 所 示 。 
口 IE: 属性 或 方法 不 存在 。 
口 Firefox: values .sort () 不 是 函数 。 
口 Safari: 值 undefined (表达 式 values .sort 的 结果 ) 不 是 对 象 。 
口 Chrome: 对 象 名 没有 方法 'sort'。 
口 Opera: 类 型 不 匹配 (通常 是 在 需要 对 象 的 地 方 使 用 了 非 对 象 值 )。 

尽管 Firefox、Chrome 和 Safari 都 明确 指出 了 代码 中 导致 错误 的 部 分 ， 但 错误 消息 并 没有 清楚 地 告 
诉 我 们 到 底 出 了 什么 问题 ， 该 怎么 修复 问题 。 在 处 理 类 似 前 面 例子 中 的 那个 函数 时 ， 通 过 调试 处 理 这 些 
错误 消息 没有 什么 困难 。 但 是 ,在 面 对 包 含 数 千 行 JavaScript 代码 的 复杂 的 Web 应 用 程序 时 ， 要 想 查找 
错误 来 源 就 没有 那么 容易 了 。 这 种 情况 下 ， 带 有 适当 信息 的 自 定义 错误 能 够 显著 提升 代码 的 可 维护 性 。 
来 看 下 面 的 例子 。 
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function process (values) 1{ 


if (!(values instanceof Array)){ 
throw new Error("process(): Argument must be an array."); 
} 


values.sort (); 


for (var i=0, len=values.length; i < len; i++){ 
if (values[i] > 100){ 
return values[i]; 
} 
} 


return -1; 


ThrowingErrorsExample02.htm 


在 重 写 后 的 这 个 函数 中 ， 如 果 values 参数 不 是 数组 ， 就 会 抛 出 一 个 错误 。 错 误 消 息 中 包含 函数 
的 名 称 ， 以 及 为 什么 会 发 生 错误 的 明确 描述 。 如 果 一 个 复杂 的 Web 应 用 程序 发 生 了 这 个 错误 ， 那 么 查 
找 问题 的 根源 也 就 容易 多 了 。 

建议 读者 在 开发 JavaScript 代码 的 过 程 中 ， 重 点 关注 函数 和 可 能 导致 函数 执行 失败 的 因素 。 良 好 的 
错误 处 理 机 制 应 该 可 以 确保 代码 中 只 发 生 你 自己 抛 出 的 错误 。 














在 多 框架 环境 下 使 用 instanceof 来 检测 数组 有 一 些 问 题 。 详 细 内 容 请 参考 


2 机 





2. 抛 出 错误 与 使 用 try-catch 

关于 何 时 该 抛 出 错误 ,而 何 时 该 使 用 try-catch 来 捕获 它们 ,是 一 个 老生 常 谈 的 问题 。 一 般 来 说 ， 
应 用 程序 架构 的 较 低 层次 中 经 常会 抛 出 错误 , 但 这 个 层次 并 不 会 影响 当前 执行 的 代码 ,因而 错误 通常 得 
不 到 真正 的 处 理 。 如 果 你 打算 编写 一 个 要 在 很 多 应 用 程序 中 使 用 的 JavaScript 库 ， 甚 至 只 编写 一 个 可 能 
会 在 应 用 程序 内 部 多 个 地 方 使 用 的 辅助 函数 ,我 都 强烈 建议 你 在 抛 出 错误 时 提供 详尽 的 信息 。 然 后 ， 即 
可 在 应 用 程序 中 捕获 并 适当 地 处 理 这 些 错 误 。 

说 到 抛 出 错误 与 捕获 错误 , 我 们 认为 只 应 该 捕获 那些 你 确切 地 知道 该 如 何 处 理 的 错误 。 捕 获 错误 的 
目的 在 于 避免 浏览 器 以 默认 方式 处 理 它们 ; 而 抛 出 错误 的 目的 在 于 提供 错误 发 生 具 体 原因 的 消息 。 

































































17.2.3 错误 (error) 事件 


任何 没有 通过 try-catch 处 理 的 错误 都 会 触发 window 对 象 的 error 事件 ,这 个 事件 是 Web 浏览 
器 最 早 支 持 的 事件 之 一 , IE、Firefox 和 Chrome 为 保持 向 后 兼容 , 并 没有 对 这 个 事件 作 任 何 修改 ( Opera 
和 Safari 不 支持 error 事件 ), 在 任何 Web 浏览 器 中 ,onerror 事件 处 理 程序 都 不 会 创建 event 对 象 ， 
但 它 可 以 接收 三 个 参数 : 错误 消息 、 错 误 所 在 的 URL 和 行 号 。 多 数 情况 下 ， 只 有 错误 消息 有 用 ， 因 为 
URL 只 是 给 出 了 文档 的 位 置 ， 而 行 号 所 指 的 代码 行 既 可 能 出 自 艇 入 的 JavaScript 代码 ， 也 可 能 出 自 外 部 
的 文件 。 要 指定 onerror 事件 处 理 程序 ， 必 须 使 用 如 下 所 示 的 DOMO0 级 技术 ， 它 没有 遵循 “DOM2 级 
事件 ”的 标准 格式 。 
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window.onerror = function(message, url, line)f{ 
alert (message); 


3 


只 要 发 生 错误 ， 无 论 是 不 是 浏览 器 生成 的 ， 都 会 触发 error 事件 ， 并 执行 这 个 事件 处 理 程序 。 
后 ， 浏览 器 默认 的 机 制 发 挥 作用 ， 像 往常 一 样 显示 出 错误 消息 。 像 下 面 这 样 在 事件 处 理 程序 中 返 
false， 可 以 阻止 浏览 需 报 告 错误 的 默认 行为 。 
































人 window.onerror = function(message, url, line)f{ 


2 


alert (message); 
return false; 


OnErrorExample01.htm 


通过 返回 false， 这 个 函数 实际 上 就 充当 了 整个 文档 中 的 try-catch 语句 ， 可 以 捕获 所 有 无 代码 
处 理 的 运行 时 错误 。 这 个 事件 处 理 程序 是 避免 浏览 器 报告 错误 的 最 后 一 道 防线 ， 理 想 情况 下 ， 只 要 可 能 
就 不 应 该 使 用 它 。 只 要 能 够 适当 地 使 用 try-catch 语句 ， 就 不 会 有 错误 交 给 浏览 器 ， 也 就 不 会 触发 
局 下 王 日 工 事件 。 

















浏览 器 在 使 用 这 个 事件 处 理 错误 时 的 方式 有 明显 不 同 。 在 下 中 ,即使 发 生 error 
事件 ， 代 码 仍 然 会 正常 执行 ; 所 有 变量 和 数据 都 将 得 到 保留 ， 因 此 能 在 onerror 事 
件 处 理 程序 中 访问 它们 。 但 在 Firefox 中 ， 常 规 代 码 会 停止 执行 ， 事 件 发 生 之 前 的 所 
有 变量 和 数据 都 将 被 销毁 ， 因 此 几乎 就 无 法 判断 错误 了 。 













图 像 也 支持 error 事件 。 只 要 图 像 的 src 特性 中 的 URL 不 能 返回 可 以 被 识别 的 图 像 格式 , 就 会 触 
发 error 事件 。 此 时 的 error 事件 遵循 DOM 格式 , 会 返回 一 个 以 图 像 为 日 标的 event 对 象 。 下面 是 
一 个 例子 。 


Var image = new Image(); 

EventUtil.addHandler (image, "load", function(event)t{ 
alert("Image loaded!"); 

过 

EventUtil.addHandler (image, "error", function(event)t 
alert("Image not loaded!"); 

于 这 

image.src = "smilex.gif"; // 指 定 不 存在 的 文件 


OnErrorExample02.htm 
在 这 个 例子 中 ， 当 加 载 图 像 失败 时 就 会 显示 一 个 警告 框 。 需 要 注意 的 是 ,发 生 error 事件 时 , 图 
像 下 载 过 程 已 经 结束 ， 也 就 是 说 不 能 再 重新 下 载 了 。 
17.2.4 “处理 错误 的 策略 


过 去 ， 所 谓 Web 应 用 程序 的 错误 处 理 策略 仅 限于 服务 器 端 。 在 谈 到 错误 与 错误 处 理 时 ， 通 常 要 考 
虑 很 多 方面 , 涉及 一 些 工 具 , 例如 记录 和 监控 系统 。 这 些 工 具 的 用 途 在 于 分 析 错 误 模 式 , 追查 错误 原因 ， 
同时 帮助 确定 错误 会 影响 到 多 少 用 户 。 
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在 Web 应 用 程序 的 JavaScript 这 一 端 ， 错 误 处 理 策略 也 同样 重要 。 由 于 任何 JavaScript 错误 都 可 能 
导致 网 页 无 法 使 用 ， 因 此 搞 清 楚 何 时 以 及 为 什么 发 生 错 误 至 关 重 要 。 绝 大 多 数 Web 应 用 程序 的 用 户 都 
不 懂 技术 ， 遇 到 错误 时 很 容易 心烦 意 乱 。 有 时 候 ， 他 们 可 能 会 刷新 页 面 以 期 解决 问题 ， 而 有 时 候 则 会 放 
弃 努 力 。 作 为 开发 人 员 ， 必 须要 知道 代码 何 时 可 能 出 错 , 会 出 什么 错 ， 同 时 还 要 有 一 个 跟踪 此 类 问题 的 
系统 。 


17.2.5 ”常见 的 错误 类 型 


错误 处 理 的 核心 ， 是 首先 要 知道 代码 里 会 发 生 什 么 错误 。 由 于 JavaScript 是 松散 类 型 的 ， 而 且 也 不 
会 验证 函数 的 参数 ， 因 此 错误 只 会 在 代码 运行 期 间 出 现 。 一 般 来 说 ， 需 要 关注 三 种 错误 : 
口 类 型 转换 错误 
口 数据 类 型 错误 
口 通信 错误 

以 上 错误 分 别 会 在 特定 的 模式 下 或 者 没有 对 值 进行 足够 的 检查 的 情况 下 发 生 。 

1. 类 型 转换 错误 

类 型 转换 错误 发 生 在 使 用 某 个 操作 符 ， 或 者 使 用 其 他 可 能 会 自动 转换 值 的 数据 类 型 的 语言 结构 时 。 
在 使 用 相等 (== ) 和 不 相等 (!= ) 操作 符 , 或 者 在 if 、for 及 while 等 流 控 制 语句 中 使 用 非 布尔 值 时 ， 
最 常 发 生 类 型 转换 错误 。 

第 3 章 讨论 的 相等 和 不 相等 操作 符 在 执行 比较 之 前 会 先 转换 不 同类 型 的 值 。 由 于 在 非 动态 语言 中 ， 
开发 人 员 都 使 用 相同 的 符号 执行 直观 的 比较 , 因此 在 JavaScript 中 往往 也 会 以 相同 方式 错误 地 使 用 它们 。 
多 数 情况 下 ， 我 们 建议 使 用 全 等 (= 一 ) 和 不 全 等 ( ! 一 ) 操作 符 ， 以 避免 类 型 转换 。 来 看 一 个 例子 。 










































































alert(5 == "5"); //true 
alert(5 === "5"); //false 
alert(1 == true); //true 
alert(1 === true):; //false 


这 里 使 用 了 相等 和 全 等 操作 符 比 较 了 数值 5 和 字符 串 "5"。 相 等 操作 符 首先 会 将 数值 5 转换 成 字符 
串 "5" ， 然 后 再 将 其 与 另 一 个 字符 串 "5 "进行 比较 ， 结 果 是 true。 全 等 操作 符 知道 要 比较 的 是 两 种 不 同 
的 数据 类 型 ， 因 而 直接 返回 false。 对 于 1 和 true 也 是 如 此 : 相等 操作 符 认 为 它们 相等 ， 而 全 等 操作 
符 认为 它们 不 相等 。 使 用 全 等 和 非 全 等 操作 符 , 可 以 避免 发 生 因 为 使 用 相等 和 不 相等 操作 符 引 发 的 类 型 
转换 错误 ， 因 此 我 们 强烈 推荐 使 用 。 
容易 发 生 类 型 转换 错误 的 另 一 个 地 方 , 就 是 流 控 制 语句 。 像 if 之 类 的 语句 在 确定 下 一 步 操作 之 前 ， 
会 自动 把 任何 值 转换 成 布尔 值 。 尤 其 是 i£ 语句 ， 如 果 使 用 不 当 ， 最 容易 出 错 。 来 看 下 面 的 例子 。 
function concat (Str1，Str2，Str3){ 
var result = strl + str2; 
if (Stz3){ / /绝对 不 要 这 样 ! 1 1! 
result += str3; 
} 


return result; 


} 

这 个 函数 的 用 意 是 拼接 两 或 三 个 字符 串 ， 然后 返回 结果 。 其 中 ,第 三 个 字符 串 是 可 选 的 ， 因 此 必须 
要 检查 。 第 3 章 曾 经 介绍 过 , 未 使 用 过 的 命名 变量 会 自动 被 赋予 undefined 值 而 undefined 值 可 以 
被 转换 成 布尔 值 false， 因 此 这 个 函数 中 的 i£ 语句 实际 上 只 适用 于 提供 了 第 三 个 参数 的 情况 。 问 题 在 
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于 ， 并 不 是 只 有 undefined 才 会 被 转换 成 false， 也 不 是 只 有 字符 串 值 才 可 以 转换 为 true。 例 如 ， 
假设 第 三 个 参数 是 数值 0， 那 么 if 语句 的 测试 就 会 失败 ， 而 对 数值 1 的 测试 则 会 通过 。 

在 流 控 制 语句 中 使 用 非 布尔 值 ， 是 极为 常见 的 一 个 错误 来 源 。 为 避免 此 类 错误 ， 就 要 做 到 在 条 件 比 
较 时 切实 传 入 布尔 值 。 实 际 上 ， 执行 某 种 形式 的 比较 就 可 以 达到 这 个 目的 。 例 如 ,我 们 可 以 将 前 面 的 函 
数 重 写 如 下 。 

function concat (strl, str2, str3){ 

Var result = strl + str2; 


if (typeof str3 == "string")t{ // 恰 当 的 比较 
result += str3; 





} 
return result; 


} 

在 这 个 重 写 后 的 函数 中 ，if 语句 的 条 件 会 基于 比较 返回 一 个 布尔 值 。 这 个 函数 相对 可 靠 得 多 ,不 
容易 受 非 正常 值 的 影响 。 

2. 数据 类 型 错误 

JavaScript 是 松散 类 型 的 ， 也 就 是 说 ， 在 使 用 变量 和 函数 参数 之 前 ， 不 会 对 它们 进行 比较 以 确保 它 
们 的 数据 类 型 正确 ,为 了 保证 不 会 发 生 数 据 类 型 错误 , 只 能 依靠 开发 人 员 编写 适当 的 数据 类 型 检测 代码 。 
在 将 预料 之 外 的 值 传递 给 函数 的 情况 下 ， 最 容易 发 生 数据 类 型 错误 。 

在 前 面 的 例子 中 ， 通 过 检测 第 三 个 参数 可 以 确保 它 是 一 个 字符 串 ， 但 是 并 没有 检测 另外 两 个 参数 。 
如 果 该 函数 必须 要 返回 一 个 字符 串 , 那么 只 要 给 它 传人 两 个 数值 ， 忽 略 第 三 个 参数 ， 就 可 以 轻易 地 导致 
它 的 执行 结果 错误 。 类 似 的 情况 也 存在 于 下 面 这 个 函数 中 。 

/ /不 安全 的 汐 数 ,任何 非 字符 串 值 都 会 导致 错误 

function getQueryString (url)t{ 

Var pos = url.indexOf ("?"); 


if (pos > -1)f{ 
return url.substring(pos +1); 



































} 
return "" 


} 

这 个 函数 的 用 意 是 返回 给 定 URL 中 的 查询 字符 串 。 为 此 ， 它 首先 使 用 indqexof () 寻找 字符 串 中 的 
问号 。 如 果 找 到 了 ， 利 用 substring () 方 法 返回 问号 后 面 的 所 有 字符 串 。 这 个 例子 中 的 两 个 函数 只 能 
操作 字符 串 ,， 因 此 只 要 传人 其 他 数据 类 型 的 值 就 会 导致 错误 。 而 添加 一 条 简单 的 类 型 检测 语句 ， 就 可 以 
确保 函数 不 那么 容易 出 错 。 

function getQueryString (url)t{ 

if (typeof url == "string"){ // 通 过 检查 类 型 确保 安全 
Var pos = url.indexOf ("?"); 


if (pos > -1)f{ 
return url.substring (pos +1); 












































} 
} 
etn "3 


} 
重 写 后 的 这 个 函数 首先 检查 了 传人 的 值 是 不 是 字符 串 。 这 样 ， 就 确保 了 函数 不 会 因为 接收 到 非 字 符 
串 值 而 导致 错误 。 
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前 一 节 提 到 过 ,在 流 控 制 语句 中 使 用 非 布尔 值 作为 条 件 很 容易 导致 类 型 转换 错误 。 同样， 这样 做 也 
经 常会 导致 数据 类 型 错误 。 来 看 下 面 的 例子 。 
// 不 安全 的 函数 ， 任 何 非 数 组 值 都 会 导致 错误 


function reverseSort (values){ 
if (values)t // 绝 对 不 要 这 样 1!! 
Values.Sott () ; 
Values .feverse() ; 





} 

} 

这 个 reverseSort () 限 数 可 以 将 数组 反 向 排序 , 其 中 用 到 了 sort () 和 reverse() 方 法 。 对 于 让 
语句 中 的 控制 条 件 而 言 ， 任 何 会 转换 为 true 的 非 数 组 值 都 会 导致 错误 。 男 一 个 常见 的 错误 就 是 将 参数 
与 null 值 进行 比较 ， 如 下 所 示 。 

// 不 安全 的 函数 ， 任 何 非 数 组 值 都 会 导致 错误 


function reverseSort (Values) 1{ 
if (values != null)t{ // 绝 对 不 要 这 样 151 
Values .Sott () ; 
values.reverse(); 








} 
} 
与 null 进行 比较 只 能 确保 相应 的 值 不 是 null 和 undefined (这 就 相当 于 使 用 相等 和 不 相等 操 
作 )。 要 确保 传人 的 值 有 效 ， 仅 检测 nul1 值 是 不 够 的 ; 因此 ， 不 应 该 使 用 这 种 技术 。 同 样 ， 我 们 也 不 
推荐 将 某 个 值 与 undefined 作 比 较 。 
另 一 种 错误 的 做 法 ， 就 是 只 针对 要 使 用 的 某 一 个 特性 执行 特性 检测 。 来 看 下 面 的 例子 。 
// 还 是 不 安全 ， 任 何 非 数组 值 都 会 导致 错误 
function reverseSort (values) 1 
if (typeof values .sort == "function")t{ // 绝 对 不 要 这 样 !!1 1! 


values.sort(); 
values.reverse(); 






































} 
} 
在 这 个 例子 中 ， 代 码 首先 检测 了 参数 中 是 否 存在 sort () 方法。 这 样 ， 如 果 传 人 一 个 包含 sort () 
方法 的 对 象 ( 而 不 是 数组 ) 当然 也 会 通过 检测 ， 但 在 调用 reverse() 函数 时 可 能 就 会 出 错 了 。 在 确切 
知道 应 该 传人 什么 类 型 的 情况 下 ， 最 好 是 使 用 instanceof 来 检测 其 数据 类 型 ， 如 下 所 示 。 


// 安 全 ， 非 数组 值 将 被 忽略 
function reverseSort (values){ 
if (values instanceof Array){ // 问 题解 决 了 
values.sort(); 
values.reverse(); 















































} 
} 


最 后 一 个 reverseSort () 函数 是 安全 的 : 它 检测 了 values， 以 确保 这 个 参数 是 Array 类 型 的 实 
例 。 这 样 一 来 ， 就 可 以 保证 函数 忽略 任何 非 数 组 值 。 

大 体 上 来 说 ,基本 类 型 的 值 应 该 使 用 typeof 来 检测 , 而 对 象 的 值 则 应 该 使 用 instanceof 来 检测 。 
根据 使 用 函数 的 方式 ， 有 时 候 并 不 需要 逐个 检测 所 有 参数 的 数据 类 型 。 但 是 ,面向 公众 的 API 则 必须 无 
条 件 地 执行 类 型 检查 ， 以 确保 函数 始终 能 够 正常 地 执行 。 
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3. 通信 错误 

随 着 Ajax 编程 的 兴起 ( 第 21 章 讨论 Ajax )，Web 应 用 程序 在 其 生命 周期 内 动态 加 载 信息 或 功能 ， 
已 经 成 为 一 件 司空 见 惯 的 事 。 不 过 ，JavaScript 与 服务 器 之 间 的 任何 一 次 通信 ， 都 有 可 能 会 产生 错误 。 

第 一 种 通信 错误 与 格式 不 正确 的 URL 或 发 送 的 数据 有 关 。 最 常见 的 问题 是 在 将 数据 发 送 给 服务 器 
之 前 , 没有 使 用 encodeURIComponent () 对 数据 进行 编码 。 例 如 , 下面 这 个 URL 的 格式 就 是 不 正确 的 : 


http://www.yourdomain.com/?redir=http://www.someotherdomain.com?a=b&c=d 












































日 


针对 "redir=" 后 面 的 所 有 字符 串 调 用 encodeURIComponent () 就 可 以 解决 这 个 问题 ,结果 将 产生 
如 下 字符 串 : 

http://ww.yourdomain.com/?redir=http%$3A%2F%2Fwww.someotherdomain.com%3Fa%3Db%26c%3Dd 

对 于 查询 字符 串 ， 应 该 记 住 必须 要 使 用 encodeURIComponent () 方 法 。 为 了 确保 这 一 点 ， 有 了 时候 
可 以 定义 一 个 处 理 查 询 字 符 串 的 函数 ， 例 如 : 


function addQueryStringArg (url, name, value)t 











iE (UrlL. TndexOFf("?") ss: lL) 
Url er Vo 
} else { 
Url += "&"; 
} 
url += encodeURIComponent (name) + "=" + encodeURIComponent (value); 


return url; 


} 

这 个 函数 接收 三 个 参数 : 要 追加 查询 字符 串 的 URL 、 参 数 名 和 参数 值 。 如 果 传人 的 URL 不 包含 问 
号 ， 还 要 给 它 添加 问号 ; 否则 ， 就 要 添加 一 个 和 号 ， 因 为 有 问号 就 意味 着 有 其 他 查询 字符 串 。 然 后 ， 再 
将 经 过 编码 的 查询 字符 串 的 名 和 值 添加 到 URL 后 面 。 可 以 像 下 面 这 样 使 用 这 个 函数 : 








Var url = "http://www.somedomain.com"; 
Var newUrl = addQueryStringArg (url, "redir", 
"http://www.someotherdomain.com?a=b&c=d"); 


alert (newUr]1); 

使 用 这 个 函数 而 不 是 手工 构建 URL， 可 以 确保 编码 正确 并 避免 相关 错误 。 

另外 ,在 服务 器 响应 的 数据 不 正确 时 ， 也 会 发 生 通 信和 错误 。 第 10 章 曾 经 讨论 过 动态 加 载 脚本 和 动 
态 加 载 样式 , 运用 这 两 种 技术 都 有 可 能 遇 到 资源 不 可 用 的 情况 。 在 没有 返回 相应 资源 的 情况 下 , Firefox、 
Chrome 和 Safari 会 默默 地 失败 ，IE 和 Opera 则 都 会 报错 。 然 而 ， 对 于 使 用 这 两 种 技术 产生 的 错误 ， 很 
难 判断 和 处 理 。 在 某 些 情 况 下 ， 使 用 Ajax 通信 可 以 提供 有 关 错 误 状 态 的 更 多 信息 。 









































在 使 用 Ajax 通信 的 情况 下 ， 也 可 能 会 发 生 通信 和 错误。 相关 的 问题 和 错误 将 在 第 


21 章 讨论 。 





17.2.6 ”区 分 致命 错误 和 非 致 命 错误 
任何 错误 处 理 策略 中 最 重要 的 一 个 部 分 ， 就 是 确定 错误 是 否 致 命 。 对 于 非 致 命 错误 ,可 以 根据 下 列 
一 或 多 个 条 件 来 确定 : 
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口 不 影响 用 户 的 主要 任务 ; 
口 只 影响 页 面 的 一 部 分 ; 
口 可 以 恢复 ; 
口 重复 相同 操作 可 以 消除 错误 。 

本 质 上 ， 非 致命 错误 并 不 是 需要 关注 的 问题 。 例 如 ，Yahoo! Mail ( http://mail.yahoo.com ) 有 一 项 功 
能 , 允许 用 户 在 其 界面 上 发 送 手 机 短信 。 如 果 由 于 某 种 原因 , 发 不 了 手机 短信 了 , 那 也 不 算是 致命 错误 ， 
因为 并 不 是 应 用 程序 的 主要 功能 有 问题 。 用 户 使 用 Yahoo! Mail 主要 是 为 了 查收 和 撰写 电子 邮件 。 只 在 
这 个 主要 功能 正常 ， 就 没有 理由 打 断 用 户 。 没 有 必要 因为 发 生 了 非 致 命 错误 而 对 用 户 给 出 提示 一 一 可 以 
把 页 面 中 受到 影响 的 区 域 蔡 换 掉 ,， 比 如 替换 成 说 明 相 应 功能 无 法 使 用 的 消息 。 但 是 , 如 果 因 此 打 断 用 户 ， 
那 确实 没有 必要 。 

致命 错误 ， 可 以 通过 以 下 一 或 多 个 条 件 来 确定 : 
口 应 用 程序 根本 无 法 继续 运行 ; 
口 错误 明显 影响 到 了 用 户 的 主要 操作 ; 
口 会 导致 其 他 连带 错误 。 

要 想 采取 适当 的 措施 ， 必 须要 知道 JavaScript 在 什么 情况 下 会 发 生 致命 错误 。 在 发 生 致 命 错误 时 ， 
应 该 立即 给 用 户 发 送 一 条 消息 ,告诉 他 们 无 法 再 继续 手头 的 事情 了 。 假如 必须 刷新 页 面 才能 让 应 用 程序 
正常 运行 ， 就 必须 通知 用 户 ， 同 时 给 用 户 提 供 一 个 点 击 即 可 刷新 页 面 的 按钮 。 

区 分 非 致命 错误 和 致命 错误 的 主要 依据 ， 就 是 看 它们 对 用 户 的 影响 。 设 计 良 好 的 代码 ,可 以 做 到 应 
用 程序 某 一 部 分 发 生 错 误 不 会 不 必要 地 影响 另 一 个 实际 上 毫 不 相干 的 部 分 。 例 如 ，My Yahoo! 
( http://my.yahoo.com ) 的 个 性 化 主页 上 包含 了 很 多 互 不 依赖 的 模块 。 如 果 每 个 模块 都 需要 通过 JavaScript 
调用 来 初始 化 ， 那 么 你 可 能 会 看 到 类 似 下 面 这 样 的 代码 : 

for (var i=0, len=mods.length; i < len; i++){ 

mods[i] .init(); // 可 能 会 导致 致命 错误 

} 

表面 上 看 , 这 些 代 码 没什么 问题 :依次 对 每 个 模块 调用 init () 方 法 ,问题 在 于 ,任何 模块 的 init () 
方法 如 果 出 错 ， 都 会 导致 数组 中 后 续 的 所 有 模块 无 法 再 进行 初始 化 。 从 逻辑 上 说 ,这样 编 写 代 码 没有 什 
么 意义 。 毕 竟 ， 每 个 模块 相互 之 间 没 有 依赖 关系 ,各 自 实 现 不 同 功能 。 可 能 会 导致 致命 错误 的 原因 是 代 
码 的 结构 。 不 过 ， 经 过 下 面 这 样 修改 ， 就 可 以 把 所 有 模块 的 错误 变 成 非 致命 的 : 

for (var i=0, len=mods.length; i < len; i++){ 
try { 

mods[i].init(); 


} catch (ex) { 
// 在 这 里 处 理 错 误 




















































































































} 
} 


通过 在 for 循环 中 添加 try-catch 语句 ， 任 何 模块 初始 化 时 出 错 ， 都 不 会 影响 其 他 模块 的 初始 化 。 
在 以 上 重 写 的 代码 中 ， 如 果 有 错误 发 生 ， 相 应 的 错误 将 会 得 到 独立 的 处 理 ， 并 不 会 影响 到 用 户 的 体验 。 


17.2.7 ”把 错误 记录 到 服务 器 
开发 Web 应 用 程序 过 程 中 的 一 种 常见 的 做 法 ， 就 是 集中 保存 错误 日 志 ， 以 便 查找 重要 错误 的 原因 。 
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例如 数据 库 和 服务 器 错误 都 会 定期 写 人 日 志 ， 而 且 会 按照 常用 API 进行 分 类 。 在 复杂 的 Web 应 用 程序 
中 ,我 们 同样 推荐 你 把 JavaScript 错误 也 回 写 到 服务 器 。 换 名 话说 ， 也 要 将 这 些 错 误 写 人 到 保存 服务 器 
端 错 误 的 地 方 , 只 不 过 要 标明 它们 来 自前 端 。 把 前 后 端的 错误 集中 起 来 , 能 够 极 大 地 方便 对 数据 的 分 析 。 

要 建立 这 样 一 种 JavaScript 错误 记录 系统 ， 首 先 需要 在 服务 器 上 创建 一 个 页 面 (或 者 一 个 服务 器 人 
口 点 )， 用 于 处 理 错 误 数据 。 这 个 页 面 的 作用 无 非 就 是 从 查询 字符 串 中 取得 数据 ， 然 后 再 将 数据 写 入 错 
误 日 志 中 。 这 个 页 面 可 能 会 使 用 如 下 所 示 的 函数 : 

function logError(sev, msg)t{ 

Var img = new Image(); 


img.src = "log.php?sev=" + encodeURIComponent (sev) + "&msg=" + 
encodeURIComponent (msg); 
































} 
这 个 logError () 函数 接收 两 个 参数 : 表示 严重 程度 的 数值 或 字符 串 ( 视 所 用 系统 而 异 ) 及 错误 消 
息 。 其 中 ,使 用 了 Image 对 象 来 发 送 请 求 ， 这 样 做 非常 灵活 ， 主 要 表现 如 下 几 方 面 。 
口 所 有 浏览 器 都 支持 Image 对 象 ， 包 括 那 些 不 文 持 XMLHttpRequest 对 象 的 浏览 器 。 
口 可 以 避免 跨 域 限制 。 通 常 都 是 一 台 服 务 器 要 负责 处 理 多 台 服 务 器 的 错误 ， 而 这 种 情况 下 使 用 
XMLHLtpRedquest 是 不 行 的 。 
口 在 记录 错误 的 过 程 中 出 问题 的 概率 比较 低 。 大 多 数 Ajax 通信 都 是 由 JavaScript 库 提供 的 包 半 函 
数 来 处 理 的， 如 果 库 代码 本 身 有 问题 ， 而 你 还 在 依赖 该 库 记 录 错 误 ， 可 想 而 知 ， 错 误 消 息 是 不 
可 能 得 到 记录 的 。 
只 要 是 使 用 try-catch 语句 ， 就 应 该 把 相应 错误 记录 到 日 志 中 。 来 看 下 面 的 例子 。 
for (var i=0, len=mods.length; i < len; I++){ 
try { 
mods[i].init(); 


} catch (ex){ 
logError("nonfatal", "Module init failed: " + ex.message); 

































































} 
} 


在 这 里 ,一旦 模块 初始 化 失败 ， 就 会 调用 1ogError () 。 第 一 个 参数 是 "nonfatal" ( 非 致 命 ), 表 
示 错 误 的 严重 程度 。 第 二 个 参数 是 上 下 文 信息 加 上 真正 的 JavaScript 错误 消息 。 记 录 到 服务 器 中 的 错误 
消息 应 该 尽 可 能 多 地 带 有 上 下 文 信息 ， 以 便 鉴别 导致 错误 的 真正 原因 。 


17.3 ”调试 技术 


在 不 那么 容易 找到 JavaScript 调试 程序 的 年 代 ， 开 发 人 员 不 得 不 发 挥 自己 的 创造 力 ， 通 过 各 种 方法 
来 调试 自己 的 代码 。 结 果 ， 就 出 现 了 以 这 样 或 那样 的 方式 置 入 代码 ， 从 而 输出 调试 信息 的 做 法 。 其 中 ， 
最 常见 的 做 法 就 是 在 要 调试 的 代码 中 随处 插入 alert () 函数 。 但 这 种 做 法 一 方面 比较 麻烦 ( 调试 之 后 还 
需要 清理 ), 另 一 方面 还 可 能 引入 新 问题 ( 想象 一 下 把 某 个 alert () 函数 遗留 在 产品 代码 中 的 结果 )。 如 
今 , 已 经 有 了 很 多 更 好 的 调试 工具 ， 因 此 我 们 也 不 再 建议 在 调试 中 使 用 alert () 了 。 


17.3.1 将 消息 记录 到 控制 台 


IE8、Firefox 、Opera 、Chrome 和 Safari 都 有 JavaScript 控制 台 ， 可 以 用 来 查看 JavaScript 错误 。 而 
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且 , 在 这 些 浏览 器 中 ， 都 可 以 通过 代码 向 控制 台 输 出 消息 。 对 Firefox 而 言 ， 需 要 安装 Firebug 
(www.getfirebug.com )， 因 为 Firefox 要 使 用 Firebug 的 控制 台 。 对 IE8、Firefox、Chrome 和 Safari 来 说 ， 
则 可 以 通过 console 对 象 向 JavaScript 控制 台中 写 和 人 消息， 这 个 对 象 具有 下 列 方法 。 
口 error (message) : 将 错误 消息 记录 到 控制 台 

口 info (message) : 将 信息 性 消息 记录 到 控制 台 

口 1og (message) : 将 一 般 消息 记录 到 控制 台 

口 warn (message) : 将 警告 消息 记录 到 控制 台 

在 下 8、Firebug、Chrome 和 Safari 中 ， 用 来 记录 消息 的 方法 不 同 ， 控 制 台 中 显示 的 错误 消息 也 不 
一 样 。 错 误 消 息 带 有 红色 图 标 ， 而 警告 消息 带 有 黄色 图 标 。 以 下 函数 展示 了 使 用 控制 台 输出 消息 的 一 
个 示例 。 


function sum(numl, num2)f{ 
console.log("Entering sum(), arguments are " + numl + "," + num2); 
















































































console.log("Before calculation"); 
var result = numl + num2; 
console.log('"After calculation"); 





console.1log ("Exiting sum()"); 
return result; 


} 

在 调用 这 个 sum() 函数 时 ， 控 制 台中 会 出 现 一 些 消息 ， 可 以 用 来 辅助 调试 。 在 Safari 中 ， 通 过 
“Develop”( 开发 ) 菜单 可 以 打开 其 JavaScript 控制 台 ( 前面 讨 论 过 ); 在 Chrome 中 ， 单 击 “Control this 
page”( 控制 当前 页 ) 按钮 并 选择 “Developer”( 开发 人 员 ) 和 “JavaScript console” Ae 控制 台 ) 
即 可 ; 而 在 Firefox 中 , 要 打开 控制 台 需 要 单 击 Firefox 状态 栏 右 下 角 的 图 标 ,IE8 的 控制 台 是 其 Developer 
Tools( 开发 人 员工 具 ) 扩展 的 一 部 分 ,通过 “Tools”( 工具 ) 菜单 可 以 找到 ， 控制 台 在 ， “Script”( 脚 
本 ) 选项 卡 中 。 

Opera 10.5 之 前 的 版 本 中 ，JavaScript 控制 台 可 以 通过 opera .postError () 方 法 来 访问 。 这 个 方法 
接受 一 个 参数 ， 即 要 写 入 到 控制 台中 的 参数 ， 其 用 法 如 下 。 


function sum(numl, num2)f{ 
opera.postError("Entering sum(), arguments are " + numl + "rn + num2); 































































































opera.postError("Before calculation"); 
var result = numl + num2; 
opera.postError("After calculation"); 


Opera.postError ("Exiting sum()"); 
return result; 


} 

别 看 opera .postError () 方 法 的 名 字 好 像 是 只 能 输出 错误 ,但 实际 上 能 通过 它 向 JavaScript 控制 
台中 写 入 任何 信息 。 

还 有 一 种 方案 是 使 用 LiveConnect， 也 就 是 在 JavaScript 中 运行 Java 代码 。Firefox 、Safari 和 Opera 
都 支持 LiveConnect， 因 此 可 以 操作 Java 控制 台 。 例 如 ， 通 过 下 列 代码 就 可 以 在 JavaScript 中 把 消息 写 
人 到 Java 控制 台 


java.lang.System.out.println("Your message"); 
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可 以 用 这 行 代 码 蔡 代 console.1og() 或 opera.postError()， 如 下 所 示 。 


function sum(numl, num2){ 
java.lang.System.out .println("Entering sum(), arguments are " + numl + "rn + num2); 


java.lang.System.out .println("Before calculation"); 
var result = numl + num2; 
java.lang.System.out .println("After calculation"); 


java.lang.System.out .println("Exiting sum()"); 
return result; 


} 

如 果 系 统 设置 恰当 , 可 以 在 调用 LiveConnect 时 就 立即 显示 Java 控制 台 。 在 Firefox 中 , 通过 “Tools” 
(工具 ) 菜单 可 以 打开 Java 控制 台 ; 在 Opera 中 ， 要 打开 Java 控制 台 ， 可 以 选择 菜单 “ 0 (工具 ) 
及 “Advanced”( 高 级 )。Safari 没有 内 置 对 Java 控制 台 的 支持 ， 必 须 单独 运行 。 

不 存在 一 种 跨 浏览 器 向 JavaScript 控制 台 写 人 消息 的 机 制 ， 但 下 面 的 函数 倒 可 以 作为 统一 的 接口 。 


function log(message)t{ 





















































if (typeof console == "object")t{ 
console.log (message); 
} else if (typeof opera == "object")t{ 
opera.postError (message); 
} else if (typeof java == "object" && typeof java.lang == "object")t{ 


java.lang.System.out.printilin (message); 


} 


ConsoleLogginegExample01.htm 


这 个 1og () 函数 检测 了 哪个 JavaScript 控制 台 接 口 可 用 ， 然 后 使 用 相应 的 接口 。 可 以 在 任何 浏览 
中 安全 地 使 用 这 个 函数 ， 不 会 导致 任何 错误 ,例如 : 


function sum(numl, num2){ 
log("Entering sum(), arguments are " + numl + "," + num2); 


log("Before calculation"); 
var result = numl + num2; 


log("After calculation"); 


log("Exiting sum()"); 
return result; 


ConsoleLogginegExample01.htm 


向 JavaScript 控制 台中 写 入 消息 可 以 辅助 调试 代码 , 但 在 发 布 应 用 程序 时 , 还 必须 要 移 除 所 有 消息 。 
在 部 署 应 用 程序 时 ， 可 以 通过 手工 或 通过 特定 的 代码 处 理 步 又 来 自动 完成 清理 工作 。 














记录 消息 要 比 使 用 alert() 函数 更 可 取 ,， 因 为 警告 框 会 阻 断 程序 的 执行 ,而 在 测 


定 异 步 处 理 对 时 间 的 影响 时 ， 使 用 警告 框 会 影响 结果 。 
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17.3.2 将 消息 记录 到 当前 页 面 

另 一 种 输出 调试 消息 的 方式 ， 就 是 在 页 面 中 开辟 一 小 块 区 域 ， 用 以 显示 消息 。 这 个 区 域 通 常 是 一 个 
元 素 ， 而 该 元 素 可 以 总 是 出 现在 页 面 中 ， 但 仅 用 于 调试 目的 ; 也 可 以 是 一 个 根据 需要 动态 创建 的 元 素 。 
例如 ， 可 以 将 1og () 函数 修改 为 如 下 所 示 : 



































function log(message)t 
gy) Var console = document .getElementById("debuginfo"); 

if (console === null)t 
console = document.createElement ("div"); 
console.id = "debuginfo"; 
console.style.background = "#dedede"; 
console.style.border = "lpx solid silver"; 
console.style.padding = "5px"; 
console.style.width = "400px"; 
console.style.position = "absolute"; 
console.style.right = "0px"; 
console.style.top = "0px"; 
document .body.appendChild(console); 

} 

console.innerHTML += "<p>" + message + "</p>"; 





PageLoggingExample01.htm 


这 个 修改 后 的 1og () 函数 首先 检测 是 否 已 经 存在 调试 元 素 ， 如 果 没 有 则 会 新 创建 一 个 <aiv> 元 素 ， 
并 为 该 元 素 应 用 一 些 样式 ， 以 便 与 页 面 中 的 其 他 元 素 区 别 开 。 然 后 ， 又 使 用 innerHTML 将 消息 写 人 到 
这 个 <div> 元 素 中 。 结 果 就 是 页 面 中 会 有 一 小 块 区 域 显示 错误 消息 。 这 种 技术 在 不 支持 JavaScript 控制 
台 的 IB7 及 更 早 版 本 或 其 他 浏览 器 中 十 分 有 用 。 























与 把 错误 消息 记录 到 控制 台 相 似 ， 把 错误 消息 输出 到 页 面 的 代码 也 要 在 发 布 前 


删除 。 


17.3.3 ” 抛 出 错误 


如 前 所 述 ， 抛 出 错误 也 是 一 种 调试 代码 的 好 办 法 。 如 果 错 误 消 息 很 具体 ， 基 本 上 就 可 以 把 它 当 作 确 
定 错误 来 源 的 依据 。 但 这 种 错误 消息 必须 能 够 明确 给 出 导致 错误 的 原因 ,才能 省 去 其 他 调试 操作 。 来 看 
下 面 的 函数 : 


function qivide (num1，mnum2 ){ 
return numl / num2; 











} 

这 个 简单 的 函数 计算 两 个 数 的 除法 ,但 如 果 有 一 个 参数 不 是 数值 ， 它 会 返回 NaN。 类 似 这 样 简单 的 
计算 如 果 返 回 NaN， 就 会 在 Web 应 用 程序 中 导致 问题 。 对 此 ， 可 以 在 计算 之 前 , 先 检测 每 个 参数 是 否 都 
是 数值 。 例 如 : 

function divide(numl, num2)t{ 


if (typeof numl != "number" || typeof num2 != "number"){ 
throw new Error("divide(): Both arguments must be numbers."); 











} 


return numl / num2; 
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在 此 ， 如 果 有 一 个 参数 不 是 数值 ， 就 会 抛 出 错误 。 错 误 消 息 中 包含 了 函数 的 名 字 ， 以 及 导致 错误 的 
真正 原因 。 浏 览 器 只 要 报告 了 这 个 错误 消息 ， 我 们 就 可 以 立即 知道 错误 来 源 及 问题 的 性 质 。 相 对 来 说 ， 
这 种 具体 的 错误 消息 要 比 那些 泛泛 的 浏览 需 错 误 消 息 更 有 用 。 

对 于 大 型 应 用 程序 来 说 ， 自 定义 的 错误 通常 都 使 用 assert () 函数 抛 出 。 这 个 函数 接受 两 个 参数 ， 
一 个 是 求 值 结果 应 该 为 true 的 条 件 , 另 一 个 是 条 件 为 false 时 要 抛 出 的 错误 。 以 下 就 是 一 个 非常 基本 
的 assert () 函数 。 

C9 function assert (condition, message)t{ 


if (!condition){ 
throw new Error (message); 
































} 


AssertExample01.htm 


可 以 用 这 个 assert () 函数 代替 某 些 函数 中 需要 调试 的 if 语句 ， 以 便 输出 错误 消息 。 下 面 是 使 用 
这 个 函数 的 例子 。 
function divide(numl, num2){ 
assert (typeof numl == "number" && typeof num2 == "number", 


"divide(): Both arguments must be numbers."); 
return numl / num2; 





AssertExample01.htm 
可 见 ， 使 用 assert () 函数 可 以 减少 抛 出 错误 所 需 的 代码 量 ， 而 且 也 比 前 面 的 代码 更 容易 看 懂 。 


17.4 ”常见 的 IE 错误 


多 年 以 来 , 正 一 直 都 是 最 难于 调试 JavaScript 错误 的 浏览 器 。IE 给 出 的 错误 消息 一 般 很 短 又 语 下 不 
详 ， 而 且 上 下 文 信息 也 很 少 ， 有 时 甚至 一 点 都 没有 。 但 作为 用 户 最 多 的 浏览 器 ， 如 何 看 懂 IE 给 出 的 错 
误 也 是 最 受 关注 的 。 下 面 几 小 节 将 分 别 探讨 一 些 在 IE 中 难于 调试 的 JavaScript 错误 。 


17.4.1 ”操作 终止 


在 IE8 之 前 的 版 本 中 , 存在 一 个 相对 于 其 他 浏览 器 而 言 , 最 令 人 迷惑 、 讨 厌 , 也 最 难于 调试 的 错误 : 
操作 终止 (operation aborted )。 在 修改 尚未 加 载 完成 的 页 面 时 ， 就 会 发 生 操 作 终 止 错误 。 发 生 错误 时 ， 
会 出 现 一 个 模 态 对 话 框 ， 告 诉 你 “操作 终止 。” 单 击 确定 (OK ) 按钮 ， 则 印 载 整个 页 面 ， 继 而 显示 一 张 
空白 屏幕 ;此 时 要 进行 调试 非常 困难 。 下 面 的 示例 将 会 导致 操作 终止 错误 。 









































<!DOCTYPE html> 

<html> 

<head> 
<title>Operation Aborted Example</title> 

</head> 

<body> 
<p>The following code should cause an Operation Aborted error in IE versions 
Brior to. 8.</p> 
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<div> 
<script type="text/javascript"> 
document .body.appendChild(document .createElement ("div")); 
</script> 
</div> 
</body> 
</html> 





OperationAbortedExample01.htm 


这 个 例子 中 存在 的 问题 是 : JavaScript 代码 在 页 面 尚未 加 载 完毕 时 就 要 修改 document .body, 而 且 
<script> 元 素 还 不 是 <pody> 元 素 的 直接 子 元 素 。 准确 一 点 说 ， 当 <script> 节 点 被 包含 在 某 个 元 素 中 ， 
而 且 JavaScript 代码 又 要 使 用 appendchild() 、innerHTML 或 其 他 DOM 方法 修改 该 元 素 的 父 元 素 或 
祖先 元 素 时 ， 将 会 发 生 操作 终止 错误 (因为 只 能 修改 已 经 加 载 完毕 的 元 素 )。 

要 避免 这 个 问题 ， 可 以 等 到 目标 元 素 加 载 完毕 后 再 对 它 进 行 操作 ， 或 者 使 用 其 他 操作 方法 。 例 如 ， 
为 document .body 添加 一 个 绝对 定位 在 页 面 上 的 覆盖 层 ， 就 是 一 种 非常 常见 的 操作 。 通 常 ， 开 发 人 员 
都 是 使 用 appendchi1ld() 方 法 来 添加 这 个 元 素 的 , 但 换 成 使 用 insertBefore () 方 法 也 很 容易 。 因 此 ， 
只 要 修改 前 面 例子 中 的 一 行 代码 ， 就 可 以 避免 操作 终止 错误 。 


<!DOCTYPE html> 
时 <html> 


<head> 
<title>Operation Aborted Example</title> 
</head> 
<body> 
<p>The following code should not cause an Operation Aborted error in IE 
versions prior to 8.</p> 
<div> 
<script type="text/javascript"> 
document .body.insertBefore(document .createElement ("div"), 
document .body .firstchild); 









































</script> 
</div> 
</body> 
</html> 


OperationAbortedExample02.htm 


在 这 个 例子 中 ， 新 的 <div> 元 素 被 添加 到 document .body 的 开头 部 分 而 不 是 末尾 。 因 为 完成 这 一 
操作 所 需 的 所 有 信息 在 脚本 运行 时 都 是 已 知 的 ， 所 以 这 不 会 引发 错误 。 
除了 改变 方法 之 外 , 还 可 以 把 <script> 元 素 从 包含 元 素 中 移出 来 , 直接 作为 <body> 的 子 元 素 。 例如 : 


<!DOCTYPE html> 
中 <html> 

<head> 
<title>Operation Aborted Example</title> 

</head> 

<body> 
<p>The following code should not cause an Operation Aborted error in IE 
versions prior to 8.</p> 
<div> 
</div> 
<script type="text/javascript"> 

document .body .appendChild(document .createElement ("div")); 

</script> 
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</body> 
</html> 


OperationAbortedExample03.htm 


这 一 次 也 不 会 发 生 错误 ， 因 为 脚本 修改 的 是 它 的 直接 父 元 素 ， 而 不 再 是 间接 的 祖先 元 素 。 
在 同样 的 情况 下 , IE8 不 再 抛 出 操作 终止 错误 ， 而 是 抛 出 常规 的 JavaScript 错 误 , 带 有 如 下 错误 消息 : 


HTML Parsing Error: Unable to modify the parent container element before the child 
element is closed (KB927917). 


不 过 ， 虽然 浏览 器 抛 出 的 错误 不 同 ， 但 解决 方案 仍然 是 一 样 的 。 
17.4.2 ”无效 字符 


根据 语法 ，JavaScript 文件 必须 只 包含 特定 的 字符 。 在 JavaScript 文件 中 存在 无 效 字 符 时 ,IE 会 抛 出 
无 效 字符 ( invalid character ) 错误 。 所 谓 无 效 字 符 ， 就 是 JavaScript 语法 中 未 定义 的 字符 。 例 如 ， 有 一 
个 很 像 减 号 但 却 由 Unicode 值 8211 表示 的 字符 ( \u2013 ), 就 不 能 用 作 常 规 的 减 号 (ASCII 编码 为 45 )， 
因为 JavaScript 语法 中 没有 定义 该 字符 。 这 个 字符 通常 是 在 Word 文档 中 自动 插入 的 。 如 果 你 的 代码 是 
从 Word 文 档 中 复制 到 文本 编辑 器 中 ， 然 后 又 在 下 中 运行 的 , 那么 就 可 能 会 遇 到 无 效 字 符 错 误 。 其 他 浏 
览 器 对 无 效 字 符 做 出 的 反应 与 IE 类 似 ，Firefox 会 抛 出 非法 字符 (ilegal character ) 错误 ，Safari 会 报告 
发 生 了 语法 错误 ， 而 Opera 则 会 报告 发 生 了 ReferenceError (引用 错误 )， 因 为 它 会 将 无 效 字 符 解释 
为 未 定义 的 标识 符 。 


17.4.3 ”未 找到 成 员 


如 前 所 述 ，IE 中 的 所 有 DOM 对 象 都 是 以 COM 对 象 ， 而 非 原生 JavaScript 对 象 的 形式 实现 的 。 这 
会 导致 一 些 与 垃圾 收集 相关 的 非常 奇怪 的 行为 。IE 中 的 未 找到 成 员 (Member not found ) 错误 ， 就 是 由 
于 垃圾 收集 例 程 配合 错误 所 直接 导致 的 。 
具体 来 说 ， 如 果 在 对 象 被 销毁 之 后 ， 又 给 该 对 象 赋值 ， 就 会 导致 未 找到 成 员 错误 。 而 导致 这 个 错误 
的 ,一定 是 COM 对 象 。 发 生 这 个 错误 的 最 常见 情形 是 使 用 event 对 象 的 时 候 。IE 中 的 event 对 象 是 
windovw 的 属性 ， 该 对 象 在 事件 发 生 时 创建 ， 在 最 后 一 个 事件 处 理 程序 执行 完毕 后 销毁 。 假 设 你 在 一 个 
闭 包 中 使 用 了 event 对 象 ， 而 该 闭 包 不 会 立即 执行 ,那么 在 将 来 调用 它 并 给 event 的 属性 赋值 时 ， 就 
会 导致 未 找到 成 员 错 误 ， 如 下 面 的 例子 所 示 。 
document .onclick = function(){ 
Var event = window.event; 
setTimeout (function(){ 


event.returnValue = false; // 未 找到 成 员 错 误 
}, 1000); 






































































































































3 


在 这 段 代码 中 ,我 们 将 一 个 单 击 事件 处 理 程序 指定 给 了 文档 。 在 事件 处 理 程序 中 ，window.event 
被 保存 在 event 变量 中 。 然 后 ， 传 人 setTimeout () 中 的 闭 包 里 又 包含 了 event 变量 。 当 单 击 事件 处 
理 程序 执行 完毕 后 , event 对 象 就 会 被 销毁 , 因而 闭 包 中 引用 对 象 的 成 员 就 成 了 不 存在 的 了 。 换 名 话说 ， 
1 于 不 能 在 COM 对 象 被 销毁 之 后 再 给 其 成 员 赋 值 ， 在 闭 包 中 给 returnvalue 赋值 就 会 导致 未 找到 成 


员 错 误 。 
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17.4.4 ”未 知 运 行 时 错误 


当 使 用 innerHTML 或 outerHTML 以 下 列 方式 指定 HTML 时 , 就 会 发 生 未 知 运行 时 错误 ( Unknown 
runtime error ): 一 是 把 块 元 素 插入 到 行内 元 素 时 ， 二 是 访问 表格 任意 部 分 (<table>、<tbody> 等 ) 的 
任意 属性 时 。 例 如， 从 技术 角度 说 ，<span> 标 签 不 能 包含 <aiv> 之 类 的 块 级 元 素 , 因此 下 面 的 代码 就 会 
导致 未 知 运行 时 错误 : 


span.innerHTML = "<div>Hi</div>"; // 这 里 ，span 包含 了 <dqiv> 元 素 


在 遇 到 把 块 级 元 素 搬入 到 不 恰当 位 置 的 情况 时 ， 其 他 浏览 器 会 尝试 纠正 并 隐藏 错误 ， 而 下 在 这 一 
点 上 反倒 很 较真 儿 。 





17.4.5 “语法 错误 


通常 ， 只 要 IE 一 报告 发 生 了 语法 错误 (syntax error )， 都 可 以 很 快 找 到 错误 的 原因 。 这 时 候 ， 原 因 
站 是 代码 中 少 了 一 一 个 分 号 , 或 者 花 括号 前 后 不 对 应 。 然 而 ,还 有 一 种 原因 不 十 分 明显 的 情况 需要 格外 























如 果 你 “引用 了 外 部 的 JavaScript 文件 ， 而 该 文件 最 终 并 没有 返回 JavaScript 代码 ，IE 也 会 抛 出 语法 
错误 。 例 如 ，<script> 元 素 的 src 特性 指向 了 一 个 HTML 文件 ， 就 会 导致 语法 错误 。 报 告 语法 错误 的 
位 置 时 ， 通 常 都 会 说 该 错误 位 于 脚本 第 一 行 的 第 一 个 字符 处 。Opera 和 Safari 也 会 报告 语法 错误 ， 但 它 
们 会 给 出 导致 问题 的 外 部 文件 的 信息 ; 下 就 不 会 给 出 这 个 信息 , 因此 就 需要 我 们 自己 重复 检查 一 遍 引 用 
的 外 部 JavaScript 文件。 但 Firefox 会 忽略 那些 被 当 作 JavaScript 内 容 租 入 到 文档 中 的 非 JavaScript 文件 中 的 
解析 错误 。 

在 服务 器 端 组 件 动态 生成 JavaScript 的 情况 下 ， 比 较 容易 出 现 这 种 错误 。 很 多 服务 器 端 语言 都 会 在 
发 生 运行 时 错误 时 ， 向 输出 中 插入 HTML 代码， 而 这 种 包含 HTML 的 输出 很 容易 就 会 违反 JavaScript 
语法 。 如 果 在 追查 语法 错误 时 遇 到 了 麻烦 ,我 们 建议 你 再 仔细 检查 一 遍 引 用 的 外 部 文件 ， 确 保 这 些 文件 
中 没有 包含 服务 器 因 错 误 而 插 和 人 到 其 中 的 HTML。 


17.4.6 ”系统 无 法 找到 指定 资源 


系统 无 法 找到 指定 资源 ( The system cannot locate the resource specified ) 这 种 说 法 ， 和 狼人 要 算是 下 
给 出 的 最 有 价值 的 错误 消息 了 ,在 使 用 JavaScript 请 求 某 个 资源 URL ,而 该 URL 的 长 度 超过 了 下 对 URL 
最 长 不 能 超过 2083 个 字符 的 限制 时 , 就 会 发 生 这 个 错误 。 IE 不 仅 限制 JavaScript 中 使 用 的 URL 的 长 度 ， 
而 且 也 限制 用 户 在 浏览 器 自身 中 使 用 的 URL 长 度 ( 其 他 浏览 器 对 URL 的 限制 没有 这 么 严格 ),IE 对 URL 
路 径 还 有 一 个 不 能 超过 2048 个 字符 的 限制 。 下 面 的 代码 将 会 导致 错误 。 

function eu 


for (var i=0, len=2500; i < len; i++){ 
S += "a"; 




































































} 


return url + s; 


} 


Var x = new XMLHttpRequest (); 
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x.open ("get", createLongUrl ("http://www.somedomain.com/"), true); 
x.send (null); 


LongURLErrorExample01.htm 


在 这 个 例子 中 ，xMLHttpRequest 对 象 试图 向 一 个 超出 最 大 长 度 限制 的 URL 发 送 请 求 。 在 调用 
open () 方 法 时 ， 就 会 发 生 错 误 。 避 免 这 个 问题 的 办 法 ， 无 非 就 是 通过 给 查询 字符 串 参 数 起 更 短 的 名 字 ， 
或 者 减少 不 必要 的 数据 ,来 缩短 查询 字符 串 的 长 度 。 另 外 ， 还 可 以 把 请 求 方法 改 为 PosT， 通 过 请 求 体 
而 不 是 查询 字符 串 来 发 送 数据 。 有 关 Ajax (或 者 说 XMLHttpRequest 对 象 ) 的 详细 内 容 ， 将 在 第 21 
章 全 面 讨论 。 


17.5 小结 


错误 处 理 对 于 今天 复杂 的 Web 应 用 程序 开发 而 言 至 关 重 要 。 不 能 提前 预测 到 可 能 发 生 的 错误 ， 不 
能 提前 采取 恢复 策略 ， 可 能 导致 较 差 的 用 户 体验 , 最 终 引 发 用 户 不 满 。 多 数 浏览 器 在 默认 情况 下 都 不 会 
向 用 户 报 告 错 误 ， 因此 在 开发 和 调试 期 间 需 要 启用 浏览 器 的 错误 报告 功能 。 然 而 ,在 投入 运行 的 产品 代 
码 中 ， 则 不 应 该 再 有 诸如 此 类 的 错误 报告 出 现 。 
下 面 是 几 种 避免 浏览 絮 响 应 JavaScript 错误 的 方法 。 
口 在 可 能 发 生 错误 的 地 方 使 用 try-catch 语句 ， 这 样 你 还 有 机 会 以 适当 的 方式 对 错误 给 出 响应 ， 
而 不 必 沿 用 浏览 器 处 理 错 误 的 机 制 。 
口 使 用 windaow.onezrzor 事件 处 理 程序 , 这 种 方式 可 以 接受 try-catch 不 能 处 理 的 所 有 错误 ( 仅 
限于 IE、Firefox 和 Chrome )。 
另外 ， 对 任何 Web 应 用 程序 都 应 该 分 析 可 能 的 错误 来 源 ， 并 制定 处 理 错误 的 方案 。 
口 首先 ， 必 须要 明确 什么 是 致命 错误 ， 什 么 是 非 致命 错误 。 
口 其 次 ， 再 分 析 代 码 ， 以 判断 最 可 能 发 生 的 错误 。JavaScript 中 发 生 错 误 的 主要 原因 如 下 。 
卓 类 型 转换 
和 未 充分 检测 数据 类 型 
和 发 送 给 服务 器 或 从 服务 器 接收 到 的 数据 有 错误 
了 下、Firefox 、Chrome 、Opera 和 Safari 都 有 JavaScript 调试 器 ， 有 的 是 内 置 的 ， 有 的 是 以 需要 下 载 的 
扩展 形式 存在 的 。 这 些 调 试 器 都 支持 设置 断 点 、 控 制 代码 执行 及 在 运行 时 检测 变量 的 值 。 
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第 ] 名 
JavaScript 与 XML 


本 章 内 容 

口 检测 浏览 器 对 XML DOM 的 支持 
口 理解 JavaScript 中 的 XPath 

口 使 用 XSLT 处 理 器 








后 几何 时 ，XML 一 度 成 为 存储 和 通过 因特网 传输 结构 化 数据 的 标准 。 透 过 XML 的 发 展 ， 能 够 

月 清晰 地 看 到 Web 技术 发 展 的 轨迹 。DOM 规范 的 制定 ， 不 仅 是 为 了 方便 在 Web 浏览 器 中 使 用 
XML ， 也 是 为 了 在 桌面 及 服务 器 应 用 程序 中 处 理 XML 数据 。 此 前 ， 由 于 浏览 器 无 法 解析 XML 数据 ， 
很 多 开发 人 员 都 要 动手 编写 自己 的 XML 解析 器 。 而 自从 DOM 出 现 后 , 所 有 浏览 器 都 内 置 了 对 XML 的 
原生 支持 (XML DOM )， 同 时 也 提供 了 一 系列 相关 的 技术 支持 。 


18.1 浏览 器 对 XML DOM 的 支持 


在 正式 的 规范 诞生 以 前 ， 浏 览 器 提供 商 实现 的 XML 解决 方案 不 仅 对 XML 的 支持 程度 参差 不 齐 ， 
而 且 对 同一 特性 的 支持 也 各 不 相同 。DOM2 级 是 第 一 个 提 到 动态 创建 XML DOM 概念 的 规范 。DOM3 
级 进一步 增强 了 XML DOM， 新 增 了 解析 和 序列 化 等 特性 。 然 而 ， 当 DOM3 级 规范 的 各 项 条 款 尘 埃 落 
定之 后 ， 大 多 数 浏览 器 也 都 实现 了 各 自 不 同 的 解决 方案 。 


18.1.1 DOM2 级 核心 


我 们 在 第 12 章 曾经 提 到 过 ,DOM2 级 在 document . implementation 中 引入 了 createDocument () 
方法 。IE9+、Firefox、Opera、Chrome 和 Safari 都 支持 这 个 方法 。 想 一 想 , 或 许 你 还 记得 可 以 在 支持 DOM2 
级 的 浏览 器 中 使 用 以 下 语法 来 创建 一 个 空白 的 XML 文档 : 

var xmldom = document.implementation.createDocument (namespaceUri, root, doctype); 

在 通过 JavaScript 处 理 XML 时 , 通常 只 使 用 参数 root ， 因 为 这 个 参数 指定 的 是 XMLDOM 文档 元 
素 的 标签 名 。 而 namespaceUri 参数 则 很 少 用 到 , 原因 是 在 JavaScrip 中 管理 命名 空间 比较 困难 。 最 后 ， 
doctype 参数 用 得 就 更 少 了 。 

因此 ， 要 想 创 建 一 个 新 的 、 文 档 元 素 为 <root> 的 XML 文档 ， 可 以 使 用 如 下 代码 : 


Var xmldom = document.implementation.createDocument ("", "root", null); 































































































alert (xmldom.documentElement .tagName); /A"EOOt" 





var child = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(child); 





DOMLevel2CoreExample01.htm 
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这 个 例子 创建 了 一 个 XML DOM 文档 , 没有 默认 的 命名 空间 ,也 没有 文档 类 型 。 但 要 注意 的 是 ， 尽 


管 不 需要 指定 命名 空间 和 文档 类 型 ,也 必须 传人 相应 的 参数 。 具体 来 说 , 给 命名 空间 URI 传人 一 个 空 字 


符 虽 





， 就 意味 着 未 指定 命名 空间 ， 而 给 文档 类 型 传人 nu11， 就 意味 着 不 指定 文档 类 型 。 变 量 xmldom 

















中 保存 着 一 个 DOM2 级 Document 类 型 的 实例 ， 带 有 第 12 章 讨论 过 的 所 有 DOM 方法 和 属性 。 我 们 这 
个 例子 显示 了 文档 元 素 的 标签 名 ， 然 后 又 创建 并 给 文档 元 素 添 加 了 一 个 新 的 子 元 素 。 


?9 

















要 检测 浏览 器 是 否 支 持 DOM2 级 XML ， 可 以 使 用 下 面 这 行 代 码 : 
Var hasXmlDom = dqocument .implLlementation.hasFeature("XML"，"2.0") 


在 实际 开发 中 ， 很 少 需要 从 头 开始 创建 一 个 XML 文档 ， 然 后 再 使 用 DOM 文档 为 其 添加 元 素 。 更 
























































常见 的 情况 往往 是 将 某 个 XML 文档 解析 为 DOM 结构 ， 或 者 反之 。 由 于 DOM2 级 规范 没有 提供 这 种 功 
能 


因此 就 出 现 了 一 些 事实 标准 。 


18.1.2 DoMParser 类 型 


为 了 将 XML 解析 为 DOM 文档 ，Firefox 引入 了 DOMParser 类 型 ; 后 来 ，IE9、Safari、Chrome 和 





Opera 也 支持 了 这 个 类 型 。 在 解析 XML 之 前 ， 首 先 必 须 创 建 一 个 DoMParser 的 实例 ， 然 后 再 调用 
parseFromString () 方 法 。 这 个 方法 接受 两 个 参数 : 要 解析 的 XML 字符 串 和 内 容 类 型 ( 内 容 类 型 始 
终 都 应 该 是 "text/xml" )。 返回 的 值 是 一 个 Document 的 实例 。 来 看 下 面 的 例子 。 














Var parser new DOMParser (); 


var xmldom parser.parseFromString("<root><child/></root>", "text/xml"); 
alert (xmldom.documentElement .tagName); //"root" 
alert (xmldom.documentElement .firstChild.tagName); Vl me 





var anotherChild = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(anotherChild); 





var children = xmldom.getElementsByTagName ("child"); 
alert (children.length); //2 


DOMParserExample01.htm 


在 这 个 例子 中 , 我 们 把 一 个 简单 的 XML 字符 串 解 析 成 了 一 个 DOM 文档 , 解析 得 到 的 DOM 结构 以 











<root> 作 为 其 文档 元 素 , 该 元 素 还 有 一 个 <chi19> 子 元 素 。 此 后 , 就 可 以 使 用 DOM 方法 对 返回 的 这 个 


文档 进行 操作 了 。 


时 ， 














DOMParser 只 能 解析 格式 良好 的 XML ， 因 而 不 能 把 HTML 解析 为 HTML 文档 。 在 发 生 解 析 错 误 
仍然 会 从 parseFromString() 中 返回 一 个 Document 对象， 但 这 个 对 象 的 文档 元 素 是 











<parsererror>， 而 文档 元 素 的 内 容 是 对 解析 错误 的 描述 。 下 面 是 一 个 例子 。 











<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror .xml">XML 
Parsing Error: no element found Location: file:///I:/My%$20Writing/My%20Books/ 
Professional%20JavaScript/Second%$20Edition/Examples/Ch15/DOMParserExample2 .htm Line 
Number 1, Column 7: <sourcetext> & lt;root & gt; ----—-—-— ^</Sourcetext > < /parsererror> 


Firefox 和 Opera 都 会 返回 这 种 格式 的 文档 。Safari 和 Chrome 返回 的 文档 也 包含 <parsererror> 元 素 ， 














但 该 元 素 会 出 现在 发 生 解析 错误 的 地 方 。IE9 会 在 调用 parseFromstring () 的 地 方 抛 出 一 个 解析 错误 。 
































1 于 存在 这 些 差别 ， 因 此 确定 是 否 发 生 解析 错误 的 最 佳 方式 就 是 ， 使 用 一 个 try-catch 语句 块 ， 如 果 没 
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有 错误 ， 则 通过 getElementsByTagName () 来 查找 文档 中 是 否 存在 <parsererror> 元 素 ， 如 下 面 的 例 
子 所 示 。 


Var parser = new DOMParser(), 
叶 xmldom, 
errors; 
try { 
xmldom = parser.parseFromString("<root>", "text/xml"); 


9 





errors = xmldom.getElementsByTagName ("parsererror");} 
if (errors.length > 0){ 
throw new Error("Parsing error!"); 





} 
} catch (ex) { 
alert ("Parsing error!"); 


} 


DOMParserExample02.htm 


这 例子 显示 , 要 解析 的 字符 串 中 缺少 了 闭 标签 </root>， 而 这 会 导致 解析 错误 。 在 9+ 中 ， 此 时 会 
抛 出 错误 。 在 Firefox 和 Opera 中 ， 文 档 元 素 将 是 <parsererror>， 而 在 Safari 和 Chrome 中 ， 
<parsererror> 是 <root> 的 第 一 个 子 元 素 。 调用 getElementsByTagName ("parsererror") 能 够 
应 对 这 两 种 情况 。 如 果 这 个 方法 返回 了 元 素 ， 就 说 明 有 错误 发 生 ， 继 而 通过 一 个 警告 框 显示 出 来 。 当 
然 ， 你 还 可 以 更 进一步 ， 从 错误 元 素 中 提取 出 错误 信息 。 


18.1.3 XMLserializer 类 型 

















在 引入 DoMParser 的 同时 , Firefox 还 引入 了 XMLSerializer 类 型 , 提供 了 相反 的 功能 : 将 DOM 
文档 序列 化 为 XML 字符 串 。 后 来 ，IE9%+、Opera 、Chrome 和 Safari 都 支持 了 XMLSerializer。 

要 序列 化 DOM 文档 ， 首 先 必须 创建 xMLSerializer 的 实例 ， 然 后 将 文档 传人 其 serializeTo- 
string () 方 法 ， 如 下 面 的 例子 所 示 。 

Var serializer = new XMLSerializer(); 


Var Xml = serializer.serializeToString (xmldom); 
alert (xm]) ; 





XMLSerializerExample01.htm 


但 是 ，serializeTostring() 方 法 返回 的 字符 串 并 不 适合 打印 ， 因 此 看 起 来 会 显得 乱糟糟 的 。 

XMLSerializer 可 以 序列 化 任何 有 效 的 DOM 对 象 ， 不 仅 包 括 个 别 的 节点 ， 也 包括 HTML 文档 。 
将 HTML 文档 传人 serializeToString() 以后,， HTML 文档 将 被 视 为 XML 文档 , 因此 得 到 的 代码 也 
将 是 格式 良好 的 。 


四 如 果 将 非 DOM 对 象 传 入 serializeToString()， 会 导致 错误 发 生 。 


18.1.4 IE8 及 之 前 版 本 中 的 XML 


了 


事实 上 ， 卫 是 第 一 个 原生 支持 XML 的 浏览 需 ， 而 这 一 支持 是 通过 ActiveX 对 象 实现 的 。 为 了 便于 
桌面 应 用 程序 开发 人 员 处 理 XML , 微软 创建 了 MSXML 库 ; 但 微软 并 没有 针对 JavaScript 创建 不 同 的 对 
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象 ， 而 只 是 让 Web 开发 人 员 能 够 通过 浏览 器 访问 相同 的 对 象 。 

第 8 章 曾 经 介绍 过 ActiveXobject 类 型 ， 通 过 这 个 类 型 可 以 在 JavaScript 中 创建 ActiveX 对 象 的 
实例 。 同样 ， ， XML 文档 的 实例 ， 也 要 使 用 Activexobject 构造 函数 并 为 其 传人 一 个 表示 
XML 文档 版 本 的 字符 串 。 有 6 种 不 同 的 XML 文档 版 本 可 以 供 选 择 。 

口 Microsoft.XmnlDom: 最 初 随同 下 发 布 ; 不 建议 使 用 。 
口 MSXML2 .DOMDocument: 为 方便 脚本 处 理 而 更 新 的 版 本 ， 建 议 仅 在 特殊 情况 下 作为 后 备 版 本 



























































口 MSXML2 .DOMDocument .3.0: 为 了 在 JavaScript 中 使 用 ， 这 是 最 低 的 建议 版 本 。 
口 MSXML2 .DOMDocument .4.0: 在 通过 脚本 处 理 时 并 不 可 靠 ， 使 用 这 个 版 本 可 能 导致 安全 警告 。 
口 MSXML2 .DOMDocument .5.0: 在 通过 脚本 处 理 时 并 不 可 靠 ， 使 用 这 个 版 本 同样 可 能 导致 安全 









































口 MSXML2 .DOMDocument .6.0: 通过 脚本 能 够 可 靠 处 理 的 最 新 版 本 。 

在 这 6 个 版 本 中 ， 微 软 只 推荐 使 用 MsXML2 .DOMDocument .6.0 或 MSXML2 .DOMDocument .3.0; 
前 者 是 最 新 最 可 靠 的 版 本 ， 而 后 者 则 是 大 多 数 Windows 操作 系统 都 支持 的 版 本 。 可 以 作为 后 备 版 本 的 
MSXML2 .DOMDocument ， 仅 在 针对 IE5.5 之 前 的 浏览 器 开发 时 才 有 必要 使 用 。 

通过 尝试 创建 每 个 版 本 的 实例 并 观察 是 否 有 错误 发 生 ， 可 以 确定 哪个 版 本 可 用 。 例 如 : 























function createDocument (){ 
SA if (typeof arguments.callee.activeXString != "String"){ 
var versions = ["MSXML2 .DOMDocument .6.0"， "MSXML2 .DOMDocument .3.0"， 





"MSXML2 .DOMDocument"], 
i, len; 


for (i=0,len=versions.length; i < len; i++){ 

try { 
new ActiveXxObject (versions[i]); 
arguments.callee.activeXString = versions[i]; 
break; 

} catch (ex){ 
// 跳 过 

} 


} 


return new ActiveXObject (arguments .callee.activeXString) ; 


IEXmIDomExample01.htm 


这 个 函数 中 使 用 for 循环 迭代 了 每 个 可 能 的 ActiveX 版 本 。 如 果 版 本 无 效 ， 则 创建 新 
RActivexobject 的 调用 就 会 抛 出 错误 ; 此 时 ，catch 语句 会 捕获 错误 , 循环 继续 。 如 果 没 有 发 生 错误 ， 
则 可 用 的 版 本 将 被 保存 在 这 个 函数 的 activexStzing 属性 中 。 这 样 ， 就 不 必 在 每 次 调用 这 个 函数 时 都 
重复 检查 可 用 版 本 了 一 一 直接 创建 并 返回 对 象 即 可 。 

要 解析 XML 字符 串 ， 首 先 必须 创建 一 个 DOM 文档 ， 然 后 调用 1oadqxMr () 方 法 。 新 创建 的 XML 
文档 完全 是 一 个 空 文档 , 因而 不 能 对 其 执行 任何 操作 。 为 LoadXML () 方 法 传人 的 XML 字符 串 经 解析 之 
后 会 被 填充 到 DOM 文档 中 。 来 看 下 面 的 例子 。 
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Var xmldom = createDocument (); 
xmldom.loadXML ("<root><child/></root>"); 


alert (xmldom.documentElement .tagName); //"root" 
alert (xmldom.documentElement.firstChild.tagName); 人 GTQ5 








var anotherChild = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(anotherChild); 








var children = xmldom.getElementsByTagName ("child"); 
alert (children.length); /2 


IEXmIDomExample01.htm 


在 新 DOM 文档 中 填充 了 XML 内 容 之 后 , 就 可 以 像 操 作 其 他 DOM 文档 一 样 操作 它 了 ( 可 以 使 用 任 
何方 法 和 属性 )。 

如 果 解 析 过 程 中 出 错 , 可 以 在 parseError 属性 中 找到 错误 消息 。 这 个 属性 本 身 是 一 个 包含 多 个 属 
性 的 对 象 ， 每 个 属性 都 保存 着 有 关 解 析 错 误 的 某 一 方面 信息 。 
口 errorcode: 错误 类 型 的 数值 编码 ; 在 没有 发 生 错 误 时 值 为 0。 
口 filePos: 文件 中 导致 错误 发 生 的 位 置 。 
口 1ine: 发 生 错误 的 行 。 
口 linepos: 发 生 错 误 的 行 中 的 字符 。 
口 reason: 对 错误 的 文本 解释 。 
口 srcText: 导致 错误 的 代码 。 
口 url: 导致 错误 的 文件 的 URL ( 如 果 有 这 个 文件 的 话 )。 

另外 , parseError 的 valueof () 方 法 返回 errorCogde 的 值 , 因此 可 以 通过 下 列 代 码 检 测 是 否 发 
生 了 解析 错误 。 


if (xmldom.parseError != 0){ 
alert ("Parsing error occurred."); 





















































} 


错误 类 型 的 数值 编码 可 能 是 正 值 ， 也 可 能 
解析 错误 的 详细 信息 也 很 容易 ， 而 且 可 以 将 这 


if (xmldom.parseError != 0)1{ 
alert ("An error occurred: \nError Code: " 
+ xmldom.parseError.errorCode + "\n" 
"Line: " + xmldom.parseError.line + "\n" 
"Line Pos: " + xmldom.parseError.linepos + "\n" 
"Reason: " + xmldom.parseError.reason); 

















是 负 值 ， 因 此 我 们 只 需 检 测 它 是 不 是 等 于 0。 要 取得 有 关 
些 信息 组 合 起 来 给 出 更 有 价值 的 解释 。 来 看 下 面 的 例子 。 























+ + 二 


IEXmIlDomExample02.htm 


应 该 在 调用 loadxML () 之 后 、 查 询 XML 文档 之 前 ， 检 查 是 否 发 生 了 解析 错误 。 

1. 序列 化 XML 

IE 将 序列 化 XML 的 能 力 内 罩 在 了 DOM 文档 中 。 每 个 DOM 节点 都 有 一 个 xml 属性 ， 其 中 保存 着 
表示 该 节点 的 XML 字符 串 。 例 如 : 


alert (xmldom.xml); 
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文档 中 的 每 个 节点 都 支持 这 个 简单 的 序列 化 机 制 , 无 论 是 序列 化 整个 文档 还 是 某 个 子 文档 树 ， 都 非 
常 方便 。 

2. 加 载 XML 文件 

IE 中 的 XML 文档 对 象 也 可 以 加 载 来 自 服务 器 的 文件 。 与 DOM3 级 中 的 功能 类 似 ， 要 加 载 的 XML 
文档 必须 与 页 面 中 运行 的 JavaScript 代码 来 自 同 一 台 服 务 器 。 同 样 与 DOM3 级 规范 类 似 ， 加 载 文档 的 方 
式 也 可 以 分 为 同步 和 异步 两 种 。 要 指定 加 载 文档 的 方式 , 可 以 设置 async 属性 , true 表示 异步 , false 
表示 同步 ( 默认 值 为 true )。 来 看 下 面 的 例子 。 


Var xmldom = createDocument (); 
xmldom.async = false; 


在 确定 了 加 载 XML 文档 的 方式 后 ， 调 用 1o0ad() 可 以 启动 下 载 过 程 。 这 个 方法 接受 一 个 参数 ， 即 
要 加 载 的 XML 文件 的 URL。 在 同步 方式 下 , 调用 10ad() 后 可 以 立即 检测 解析 错误 并 执行 相关 的 XML 
处 理 ， 例 如 : 























一 











var xmldom = createDocument (); 
xmldom.async = false; 
xmldom.1load("example .xml"); 


if (xmldom.parseError != 0){ 
/ /处理 错 误 
} else { 


alert (xmldom.documentElement .tagName); //"root" 
alert (xmldom.documentElement .firstChild.tagName); //"child" 


Var anotherChild = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(anotherChild); 


var children = xmldom.getElementsByTagName ("child"); 
alert (children.length); //2 


alert (xmldom.xml); 


IEXmIDomExample03.htm 


由 于 是 以 同步 方式 处 理 XML 文件 ， 因 此 在 解析 完成 之 前 ， 代 码 不 会 继续 执行 ， 这 样 的 编程 工作 要 
简单 一 点 。 虽 然 同 步 方式 比较 方便 ， 但 如 果 下 载 时 间 太 长 ， 会 导致 程序 反应 很 慢 。 因 此 ， 在 加 载 XML 
文档 时 ， 通 常 都 使 用 异步 方式 。 

在 异步 加 载 XML 文件 的 情况 下 ， 需 要 为 XML DOM 文档 的 onreadystatechange 事件 指定 处 理 
程序 。 有 4 个 就 绪 状 态 (ready state )。 

口 1: DOM 正在 加 载 数据 。 

口 2: DOM 已 经 加 载 完 数 据 。 

口 3: DOM 已 经 可 以 使 用 ， 但 某 些 部 分 可 能 还 无 法 访问 。 
口 4: DOM 已 经 完全 可 以 使 用 。 

在 实际 开发 中 ,要 关注 的 只 有 一 个 就 绪 状 态 : 4。 这 个 状态 表示 XML 文件 已 经 全 部 加 载 完毕 ， 而 且 
已 经 全 部 解析 为 DOM 文档 。 通 过 XML 文档 的 readystate 属性 可 以 取得 其 就 绪 状 态 。 以 异步 方式 加 
载 XML 文件 的 典型 模式 如 下 。 
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var xmldom = createDocument () ; 
CY) xmldom.async = true; 


xmldom.onreadystatechange = function(){ 
if (xmldom.readyState == 4)1{ 
if (xmldom.parseError != 0){ 
alert ("An error occurred:\nError Code: " 
+ xmldom.parseError.errorCode + "\n" 


+ "Line: " + xmldom.parseError.line + "\n" 
+ "Line Pos: " + xmldom.parseError.linepos + "\n" 
+ "Reason: " + xmldom.parseError.reason); 


} else { 


alert (xmldom.documentElement .tagName); //"root" 
alert (xmldom.documentElement .firstChild.tagName); //"child" 


Var anotherChild = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(anotherChild); 


var children = xmldom.getElementsByTagName ("child"); 
alert (children.length); //2 





alert (xmldom.xml); 


}; 


xmldom.load("example.xml"); 


IEXmlDomExample04.htm 


要 注意 的 是 , 为 onreadystatechange 事件 指定 处 理 程序 的 语句 ， 必 须 放 在 调用 10ad() 方 法 的 
语句 之 前 ; 这 样 ， 才 能 确保 在 就 绪 状 态 变 化 时 调用 该 事件 处 理 程序 。 另 外 ,在 事件 处 理 程序 内 部 ， 还 必 
须 注 意 要 使 用 XML 文档 变量 的 名 称 (xmldom ), 不 能 使 用 this 对 象 。 原 因 是 ActiveX 控件 为 预防 安全 
问题 不 允许 使 用 this 对 象 。 当 文档 的 就 绪 状 态 变化 为 4 时 ， 就 可 以 放心 地 检测 是 否 发 生 了 解析 错误 ， 
并 在 未 发 生 错误 的 情况 下 处 理 XML 了 。 














虽然 可 以 通过 XML DOM 文档 对 象 加 载 XML 文件 ,但 公认 的 还 是 使 用 XMLHELP- 
Request 对 象 比 较 好 。 有 关 XMLHttpRequest 对 象 及 Ajax 的 相关 内 容 ， 将 在 第 21 
- 立 、] 、 

草 讨论 。 






18.1.5 ”路 浏览 器 处 理 XML 


民 少 有 开发 人 员 能 够 有 福气 专门 针对 一 款 浏 览 器 做 开发。 因此 ， 编 写 能 够 跨 浏 览 器 处 理 XML 的 函 
数 就 成 为 了 常见 的 需求 。 对 解析 XML 而 言 ， 下 面 这 个 函数 可 以 在 所 有 四 种 主要 浏览 器 中 使 用 。 


function DarseXm]l (xml){ 
CY) Var xmldom = null; 









































if (typeof DOMParser != "undefined")t{ 
xmldom = (new DOMParser()) .parseFromString (xml, "text/xml"); 
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测 来 确定 要 使 用 的 XML 解析 方式 。DOMParser 类 型 是 受 支 持 最 多 的 解决 方案 , 因此 首先 检测 该 类 型 是 


Var errors = xmldom.getElementsByTagName ("parsererror"); 
if (errors.length)t{ 
throw new Error ("XML parsing error:" + errors[0] .textContent); 








} 


} else if (typeof ActiveXxObject != "undefined")t{ 
xmldom = createDocument (); 
xmldom.1loadXML (xml ); 
if (xmldom.parseError != 0)f{ 
throw new Error("XML parsing error: " + xmldom.parseError.reason); 











} else { 
throw new Error("No XML parser available."); 


} 


return xmldom; 


CrossBrowserXmlExample01.htm 


这 个 parsexml () 函数 只 接收 一 个 参数 ， 即 可 解析 的 XML 字符 串 。 在 函数 内 部 ， 我 们 通过 能 力 检 























否 有 效 。 如 果 是 ， 则 创建 一 个 新 的 DoMParser 对 象 ， 并 将 解析 XML 字符 串 的 结果 保存 在 变量 xmlaom 


中 。 











1 于 DOMParser 对 象 在 发 生 解 析 错 误 时 不 抛 出 错误 ( 除 IE9+ 之 外 )， 因 此 还 要 检测 返回 的 文档 以 











确定 解析 过 程 是 否 顺 利 。 如 果 发 现 了 解析 错误 ， 则 根据 错误 消息 抛 出 一 个 错误 。 


建 适当 版 本 的 XML 文档 。 与 使 用 DoMParser 时 一 样 ， 这 里 也 需要 检测 结果 ， 以 防 有 错误 发 生 。 如 果 











函数 的 最 后 一 部 分 代码 检测 了 对 ActiveX 的 支持 ,并 使 用 前 面 定义 的 createDocument () 函数 来 创 

















确实 有 错误 发 生 ， 同 样 也 需要 抛 出 一 个 包含 错误 原因 的 错误 。 




















如 果 上 述 XML 解析 器 都 不 可 用 ， 隐 数 就 会 抛 出 一 个 错误 ， 表 示 无 法 解析 了 。 
在 使 用 这 个 函数 解析 XML 字符 串 时 ， 应 该 将 它 放 在 try-catch 语句 当中 ， 以 防 发 生 错 误 。 来 看 








下 面 的 例子 。 





var xmldom = null; 
try { 

xmldom = parsexml ("<root><child/></root>"); 
} catch (ex){ 

alert (ex.message); 


} 


/ /进一步 处 理 


CrossBrowserXmlExample01.htm 
对 序列 化 XML 而 言 ， 也 可 以 按照 同样 的 方式 编写 一 个 能 够 在 四 大 浏览 器 中 运行 的 函数 。 例 如 : 


function serializeXxml (xmldom){ 


if (typeof XMLSerializer != "undefined")t{ 
return (new XMLSerializer()) .serializeToString (xmldom); 
} else if (typeof xmldom.xml != "undefined")t{ 
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return xmldom.xml; 
} else { 
throw new Error("Could not serialize XML DOM."); 





} 
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这 个 serializexml () 函数 接收 一 个 参数 ， 即 要 序列 化 的 XML DOM 文档 。 与 parsexml () 函数 
一 样 ， 这 个 函数 首先 也 是 检测 受到 最 广泛 支持 的 特性 ， 即 xMLSerializer。 如 果 这 个 类 型 有 效 ， 则 使 
用 它 来 生成 并 返回 文档 的 XML 字符 串 。 由 于 ActiveX 方案 比较 简单 ， 只 使 用 了 一 个 xml 属性 ， 因 此 这 
个 函数 直接 检测 了 该 属性 。 如 果 上 述 两 方面 尝试 都 失败 了 了， 函数 就 会 抛 出 一 个 错误 ,说 明 序列 化 不 能 进 
行 。 一 般 来 说 ， 只 要 针对 浏览 器 使 用 了 适当 的 XMLDOM 对 象 ， 就 不 会 出 现 无 法 序列 化 的 情况 ， 因 而 也 
就 没有 必要 在 try-catch 语句 中 调用 serializexml () 。 结 果 ， 就 只 需 如 下 一 行 代码 即 可 : 


Var Xml = SerializexXxm]l (xmldom); 


只 不 过 由 于 序列 化 过 程 的 差异 ， 相 同 的 DOM 对 象 在 不 同 的 浏览 器 下 ， 有 可 能 会 得 到 不 同 的 XML 
字符 串 。 


18.2 ”浏览 器 对 XPath 的 支持 


XPath 是 设计 用 来 在 DOM 文档 中 查找 节点 的 一 种 手段 ， 因 而 对 XML 处 理 也 很 重要 。 但 是 ，DOM3 
级 以 前 的 标准 并 没有 就 XPath 的 API 作出 规定 ; XPath 是 在 DOM3 级 XPath 模块 中 首次 跻身 推荐 标准 行 
列 的 。 很 多 浏览 器 都 实现 了 这 个 推荐 标准 , 但 了 正则 以 自己 的 方式 实现 了 XPath。 





















































18.2.1 DOM3 级 XPath 


DOM3 级 XPath 规范 定义 了 在 DOM 中 对 XPath 表达 式 求 值 的 接口 ,要 确定 某 浏 览 器 是 否 支 持 DOM3 
级 XPath， 可 以 使 用 以 下 JavaScript 代码: 


























Var supportsXPath = Qocument . Implementation.hasFeature(" XPath"，"3.0") 


在 DOM3 级 XPath 规范 定义 的 类 型 中 ， 最 重要 的 两 个 类 型 是 XPathEvaluator 和 XPathResult。 
XPathEvaluator 用 于 在 特定 的 上 下 文中 对 XPath 表达 式 求 值 。 这 个 类 型 有 下 列 3 个 方法 。 
口 createExpression (expression, nsresolver): 将 XPath 表达 式 及 相应 的 命名 空间 信息 转 
换 成 一 个 XPathExpression， 这 是 查询 的 编译 版 。 在 多 次 使 用 同一 个 查询 时 很 有 用 。 
口 createNSResolver (node) : 根据 node 的 命名 空间 信息 创建 一 个 新 的 XPathNSResolver 对 
象 。 在 基于 使 用 命名 空间 的 XML 文档 求 值 时 ， 需 要 使 用 XPathNSResolver 对 象 。 
口 evaluate (expression, context, nsresolver, type, result) : 在 给 定 的 上 下 文中 ， 

基于 特定 的 命名 空间 信息 来 对 XPath 表达 式 求 值 。 剩 下 的 参数 指定 如 何 返回 结 

在 Firefox 、Safari 、Chrome 和 Opera 中 ,Document 类 型 通常 都 是 与 XPathEvaluator 接口 一 起 实 
现 的 。 换 名 话说 ， 在 这 些 浏览 器 中 ， 既 可 以 创建 XxPathEvaluator 的 新 实例 ， 也 可 以 使 用 Document 
实例 中 的 方法 (XML 或 HTML 文档 均 是 如 此 )。 

在 上 面 这 三 个 方法 中 ，evaluate () 是 最 常用 的 。 这 个 方法 接收 5 个 参数 : XPath 表达 式 、 上 下 文 
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点 、 命 名 空间 求解 器 、 返 回 结 果 的 类 型 和 保存 结果 的 XPathResult 对 象 (通常 是 null1， 因 为 结果 
也 会 以 函数 值 的 形式 返回 )。 其 中 ， 第 三 个 参数 ( 命名 空间 求解 器 ) 只 在 XML 代码 中 使 用 了 XML 命名 
空间 时 有 必要 指定 ; 如 果 XML 代码 中 没有 使 用 命名 空间 , 则 这 个 参数 应 该 指定 为 null。 第 四 个 参数 ( 返 
回 结果 的 类 型 ) 的 取 值 范围 是 下 列 常量 之 一 。 

口 xPathResult .ANY_TYPE:; 返回 与 XPath 表达 式 匹配 的 数据 类 型 。 

口 XPathResult .NUMBER_TYPE: 返回 数值 。 

口 XPathResult .STRING_TYPE: 返回 字符 串 值 。 

口 XPathResult .BOOLEAN_TYPE: 返回 布尔 值 。 

口 XPathResult .UNORDERED_NODE_ITERATOR_TYPE: 返回 匹配 的 节点 集合 , 但 集合 中 节点 的 次 

序 不 一 定 与 它们 在 文档 中 的 次 序 一 致 。 

口 XPathResult .ORDERED_NODE_ITERATOR_TYPE: 返回 匹配 的 节点 集合 , 集合 中 节点 的 次 序 与 

它们 在 文档 中 的 次 序 一 致 。 这 是 最 常用 的 结果 类 型 。 

口 xPathResult .UNORDERED_NODE_SNAPSHOT_TYPE: 返回 节点 集合 的 快照 , 由 于 是 在 文档 外 部 
捕获 节点 ， 因 此 对 文档 的 后 续 操 作 不 会 影响 到 这 个 节点 集合 。 集 合 中 节点 的 次 序 不 一 定 与 它们 
在 文档 中 的 次 序 一 致 。 

口 XPathResult .ORDERED_NODE_SNAPSHOT_TYPE: 返回 节点 集合 的 快照 , 由 于 是 在 文档 外 部 捕 
获 节点 ， 因 此 对 文档 的 后 续 操 作 不 会 影响 到 这 个 节点 集合 。 集 合 中 节点 的 次 序 与 它们 在 文档 中 
的 次 序 一 致 。 

口 XPathResult .ANY_UNORDERED_NODE_TYPE: 返回 匹配 的 节点 集合 ， 但 集合 中 节点 的 次 序 不 

一 定 与 它们 在 文档 中 的 次 序 一 致 。 

口 XPathResult .FIRST_ORDERED_NODE_TYPE: 返回 只 包含 一 个 节点 的 节点 集合 ， 包 含 的 这 个 
节点 就 是 文档 中 第 一 个 匹配 的 节点 。 

指定 的 结果 类 型 决定 了 如 何 取得 结果 的 值 。 下 面 来 看 一 个 典型 的 例子 。 


Var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ORDERED_ NODE_ITERATOR_ TYPE, null); 









































讽 说 
































































































































































































































if (result !== null) { 
Var node = result.iterateNext (); 
while(node) { 
alert (node.tagName); 
node = node.iterateNext (); 
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这 个 例子 中 为 返回 结果 指定 的 是 XPathResult .ORDERED_NODE_ITERATOR_TYPE， 也 是 最 常用 的 
结果 类 型 .如 果 没 有 节点 匹配 XPath 表达 式 ,evaluate() 返 回 nul1; 和 否则 , 它 会 返回 一 个 XPathResult 
对 象 。 这 个 XPathResult 对 象 带 有 的 属性 和 方法 ， 可 以 用 来 取得 特定 类 型 的 结果 。 如 果 节 点 是 一 个 节 
点 迭代 器 ， 无论 是 次 序 一 致 还 是 次 序 不 一 致 的 ， 都 必须 要 使 用 iterateNext () 方 法 从 节点 中 取得 匹配 
的 节点 。 在 没有 更 多 的 匹配 节点 时 ，iterateNext () 返 回 null。 

如 果 指 定 的 是 快照 结果 类 型 (不 管 是 次 序 一 致 还 是 次 序 不 一 致 的 )， 就 必须 使 用 snapshotItem() 
方法 和 snapshotLengtn 属性 ， 例 如 : 
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Var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ORDERED NODE SNAPSHOT TYPE, null); 
iF (Eeeult a nulLl1): 六 
for (var i=0, len=result.snapshotLength; i < len; i++) { 
alert (result.snapshotItem(i) .tagName); 
} 
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这 里 ，snapshotLength 返回 的 是 快照 中 节点 的 数量 ， 而 snapshotItem() 则 返回 快照 中 给 定位 
置 的 节点 (与 NodeList 中 的 length 和 item() 相 似 )。 





























1. 单 节点 结果 
指定 常量 XPathResult .FIRST_ORDERED_NODE_TYPE 会 返回 第 一 个 匹配 的 节点 ， 可 以 通过 结果 


























的 singleNodevalue 属性 来 访问 该 节点 。 例 如 : 


Var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .FIRST ORDERED NODE TYPE, null); 





if (result !== null) { 
alert (result .singleNodeValue.tagName); 


} 
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与 前 面 的 查询 一 样 ,， 在 没有 匹配 节点 的 情况 下 ，evaluate () 返 回 null。 如 果 有 节点 返回 ,那么 就 
可 以 通过 singleNodeValue 属性 来 访问 它 。 

2. 简单 类 型 结果 

通过 XPath 也 可 以 取得 简单 的 非 节点 数据 类 型 ， 这 时 候 就 要 使 用 XPathResult 的 布尔 值 、 数 值 和 
字符 串 类 型 了 。 这 几 个 结果 类 型 分 别 会 通过 booleanValue、numberValue 和 stringvValue 属性 返 
回 一 个 值 。 对 于 布尔 值 类 型 ， 如 果 至 少 有 一 个 节点 与 XPath 表达 式 匹 配 ， 则 求 值 结果 返回 true， 否 则 
返回 false。 来 看 下 面 的 例子 。 


Var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .BOOLEAN_TYPE, null); 

































































alert (result.booleanValue); 
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在 这 个 例子 中 ， 如 果 有 节点 匹配 "employee/name"， 则 booleanvValue 属性 的 值 就 是 true。 
对 于 数值 类 型 ， 必 须 在 XPath 表达 式 参 数 的 位 置 上 指定 一 个 能 够 返回 数值 的 XPath 函数， 例如 计算 
与 给 定 模式 匹配 的 所 有 节点 数量 的 count ()。 来 看 下 面 的 例子 。 


Var result = xmldom.evaluate("count (employee/name)", xmldom.documentElement, 
null, XPathResult.NUMBER_ TYPE, null); 




















alert (result.numberValue); 
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以 上 代码 会 输出 与 "employee/name" 匹 配 的 节点 数量 ( 即 2 )。 如 果 使 用 这 个 方法 的 时 候 没 有 指定 
与 前 例 类 似 的 XPath 函数 ， 那 么 numpbervalue 的 值 将 等 于 NaN。 





pl 
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对 于 字符 串 类 型 ，evaluate () 方 法 会 查找 与 XPath 表达 式 匹 配 的 第 一 个 节点 ， 然 后 返回 其 第 一 个 
子 节 点 的 值 ( 实 际 上 是 假设 第 一 个 子 节点 为 文本 节点 )。 如 果 没 有 匹配 的 节点 , 结果 就 是 一 个 空 字符 串 。 
来 看 一 个 例子 。 


var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult.STRING_TYPE, null); 





























alert (result.stringValue); 
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这 个 例子 的 输出 结果 中 包含 着 与 "element/name" 匹 配 的 第 一 个 元 素 的 第 一 个 子 节点 中 包含 的 字 
符 串 。 

3. 默认 类 型 结果 

所 有 XPath 表达 式 都 会 自动 映射 到 特定 的 结果 类 型 。 像 前 面 那样 设置 特定 的 结果 类 型 ， 可 以 限制 表 
达 式 的 输出 。 而 使 用 XPathResult.ANY_TYPE 常量 可 以 自动 确定 返回 结果 的 类 型 。 一 般 来 说 ， 自 动 选 
择 的 结果 类 型 可 能 是 布尔 值 、 数 值 、 字 符 串 值 或 一 个 次 序 不 一 致 的 节点 适 代 器 。 要 确定 返回 的 是 什么 结 
果 类 型 ， 可 以 检测 结果 的 resultType 属性 ， 如 下 面 的 例子 所 示 。 




































































Var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ANY TYPE, null); 





if (result !== null) { 
switch(result.resultType) { 
Case XPathResult.STRING TYPE: 
// 处 理 字符 囊 类 型 


break; 


case XPathResult .NUMBER TYPE: 
/ /处理 数 值 类 型 


break; 


case XPathResult .BOOLEAN TYPE: 


// 处 理 布尔 值 类 型 


break; 


case XPathResult .UNORDERED NODE ITERATOR TYPE: 
// 处 理 次 序 不 一 致 的 节点 迭代 器 类 型 


break; 


default: 
/ /处理 其 他 可 能 的 结果 类 型 


} 


显然 ，XPathResult .ANY_TYPE 可 以 让 我 们 更 灵活 地 使 用 XPath， 但 是 却 要求 有 更 多 的 处 理 代 码 
来 处 理 返 回 的 结 

4. 命名 空间 支持 

对 于 利用 了 命名 空间 的 XML 文档 ，xPathEvaluator 必须 知道 命名 空间 信息 ， 然 后 才能 正确 地 进 
行 求 值 。 人 处 理 命名 空间 的 方法 也 不 止 一 种 。 我 们 以 下 面 的 XML 代码 为 例 。 
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<?xml] version="1.0" ?> 
<wrox:books xmlns:wrox="http://www.wrox.com/"> 
<wrox:book> 
<wrox:title>Professional JavaScript for Web Developers</wrox:title> 
<wrox:author>Nicholas C. Zakas</wrox:author> 
</wrox:book> 
<wrox:book> 
<wrox:title>Professional Ajax</wrox:title> 
<wrox:author>Nicholas C. Zakas</wrox:author> 
<wrox:author>Jeremy McPeak</wrox:author> 
<wrox:author>Joe Fawcett</wrox:author> 
</wrox:book> 
</wrox:books> 


在 这 个 XML 文档 中 ,所 有 元 素 定义 都 来 自 http://www.wrox.com/ 命 名 空间 ,以 前 级 wrox 标识 。 
如 果 要 对 这 个 文档 使 用 XPath， 就 需要 定义 要 使 用 的 命名 空间 ; 否则 求 值 将 会 失败 。 

处 理 命名 空间 的 第 一 种 方法 是 通过 createNSResolver () 来 创建 XPathNSResolver 对 象 。 这 个 
方法 接受 一 个 参数 ， 即 文档 中 包含 命名 空间 定义 的 节点 。 对 于 前 面 的 XML 文档 来 说 ， 这 个 节点 就 是 文 
档 元 素 <wrox:books>， 它 的 xmlns 特性 定义 了 命名 空间 。 可 以 把 这 个 节点 传递 给 createNS- 
Resolver () ， 然 后 可 以 像 下 面 这 样 在 evaluate () 中 使 用 返回 的 结果 。 


C9 Var nsresolver = xmldom.createNSResolver (xmldom.documentElement); 





















































Var result = xmldom.evaluate ("wrox:book/wrox:author", 
xmldom.documentElement, nsresolver, 
XPathResult .ORDERED_ NODE_SNAPSHOT_TYPE, null); 

















alert (result.snapshotLength);} 
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在 将 nsresolver 对 象 传人 到 evaluate() 之 后 ， 就 可 以 确保 它 能 够 理解 XPath 表达 式 中 使 用 的 
wrox 前 级 。 读者 可 以 试 一 试 使 用 相同 的 表达 式 ， 如 果 不 使 用 XPathNSResolver 的 话 ， 就 会 导致 错误 。 

处 理 命名 空间 的 第 二 种 方法 就 是 定义 一 个 函数 ， 让 它 接收 一 个 命名 空间 前 级 ， 返 回 关联 的 URI， 
例如 : 


























var nsresolver = function(prefix)t{ 
switch(prefix){ 
Case "wrox": return "http://www.wrox.com/"; 


// 其 他 前 级 
}; 


Var result = xmldom.evaluate("count (wrox:book/wrox:author)", 
xmldom.documentElement, nsresolver, XPathResult.NUMBER_ TYPE, null); 


¥ 














alert (result.numberValue); 
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在 不 确定 文档 中 的 哪个 节点 包含 命名 空间 定义 的 情况 下 ， 这 个 命名 空间 解析 了 消 数 就 可 以 派 上 用 场 
了 。 只 要 你 知道 前 级 和 “ URI， 就 可 以 定义 一 个 返回 该 信息 的 函数 ， 然 后 将 它 作 为 第 三 个 参数 传递 给 
evaluate() 即 可 。 
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18.2.2 ”IE 中 的 XPath 


IE 对 XPath 的 支持 是 内 置 在 基于 ActiveX 的 XML DOM 文档 对 象 中 的 ， 没 有 使 用 DoMParser 返回 
的 DOM 对 象 。 因 此 ， 为 了 在 IE9 及 之 前 的 版 本 中 使 用 XPath， 必 须 使 用 基于 ActiveX 的 实现 。 这 个 接 
口 在 每 个 节点 上 额外 定义 了 两 个 的 方法 : selectsingleNode() 和 selectNodes() 。 其 中 ， 
selectSingleNode () 方 法 接受 一 个 XPath 模式 , 在 找到 匹配 节点 时 返回 第 一 个 匹配 的 节点 , 如 果 没 有 
找到 匹配 的 节点 就 返回 nul1l。 例 如 : 


Var element = xmldom.documentElement.selectSingleNode ("employee/name"); 
























































if (element !== null)t{ 
alert (element .xm]l); 


} 
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这 里 ,会 返回 匹配 "employee/name" 的 第 一 个 节点 。 上 下 文 节点 是 xmldom.documentElement， 
因此 就 调用 了 该 节点 上 的 selectsingleNode () 。 由 于 调用 这 个 方法 可 能 会 返回 null 值 ， 因 而 有 必 
要 在 使 用 返回 的 节点 之 前 ， 先 检查 确定 它 不 是 nul1。 

另 一 个 方法 selectNodes () 也 接收 一 个 XPath 模式 作为 参数 ， 但 它 返 回 与 模式 匹配 的 所 有 节点 的 
NodqeList (如 果 没 有 匹配 的 节点 ， 则 返回 一 个 包含 零 项 的 NodeList )。 来 看 下 面 的 例子 。 


Var elements = xmldom.documentElement.selectNodes ("employee/name"); 
alert (elements.1length); 
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对 这 个 例子 而 言 ， 匹 配 "employee/name" 的 所 有 元 素 都 会 通过 NodeList 返回 。 由 于 不 可 能 返回 
null 值 ， 因 此 可 以 放心 地 使 用 返回 的 结果 。 但 要 记 住 ， 既 然 结果 是 NodeList， 而 其 包含 的 元 素 可 能 
会 动态 变化 ， 所 以 每 次 访问 它 都 有 可 能 得 到 不 同 的 结 

IE 对 XPath 的 支持 非常 简单 。 除 了 能 够 取得 一 个 节点 或 一 个 NodeList 外 ， 不 可 能 取得 其 他 结 
类 型 。 

IE 对 命名 空间 的 支持 

要 在 IE 中 处 理 包含 命名 空间 的 XPath 表达 式 ， 你 必须 知道 自己 使 用 的 命名 空间 ， 并 按照 下 列 格式 
创建 一 个 字符 串 : 

"xmlns:prefixl='uril' xmlns:prefix2='uri2' xmlns:prefix3='uri3'" 

然后 ， 必 须 将 这 个 字符 串 传 人 到 XMLDOM 文档 对 象 的 特殊 方法 setProperty () 中， 这 个 方法 接 
收 两 个 参数 : 要 设置 的 属性 名 和 属性 值 。 在 这 里 ， 属 性 名 应 该 是 "selectionNamespaces"， 属性 值 就 
是 按照 前 面 格 式 创建 的 字符 串 。 下 面 来 看 一 个 在 DOM XPath 命名 空间 中 对 XML 文档 求 值 的 例子 。 


xmldom.setProperty ("SelectionNamespaces", "xmlns:wrox=’'http://www.wrox.com/’'"); 






























































Var result = xmldom.documentElement.selectNodes ("wrox:book/wrox:author"); 
alert (result.length); 
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对 于 这 个 DOM XPath 的 例子 来 说 ， 如 果 不 提供 命名 空间 解析 信息 ， 就 会 在 对 表达 式 求 值 时 导致 一 
个 错误 。 


18.2.3” 跨 浏览 器 使 用 XPath 


鉴于 下 对 XPath 功能 的 支持 有 限 ， 因 此 跨 浏 览 絮 XPath 只 能 保证 达到 IE 支持 的 功能 。 换 句 话 说 ， 
也 就 是 要 在 其 他 使 用 DOM3 级 XPath 对 象 的 浏 ea ， 重 新 创建 selectsingleNode() 和 
selectNodes () 方 法 。 第 一 个 函数 是 selectsingleNode () ， 它 接收 三 个 参数 : 上 下 文 节点 、XPath 
表达 式 和 可 选 的 命名 空间 对 象 。 命 名 空间 对 象 应 该 是 下 面 这 ks 


{ 

















prefixl: "uril", 
prefix2: "uri2", 
prefix3: "uri3" 


} 
以 这 种 方式 提供 的 命名 空间 信息 ， 可 以 方便 地 转换 为 针对 特定 浏览 器 的 命名 空间 解析 格式 。 下 面 给 [ 
出 了 selectSsingleNode () 函数 的 完整 代码 。 


function selectSingleNode(context, expression, namespaces)t{ 
var doc = (context.nodeType != 9 ? context.ownerDocument : context); 


if (typeof doc.evaluate != "undefined")f{ 
Var nsresolver = null; 
if (namespaces instanceof Object){ 
nsresolver = function(prefix)t{ 
return namespaces[prefix]; 
于 
} 


Var result = doc.evaluate (expression, context, nsresolver, 














XPathResult .FIRST_ ORDERED_NODE_TYPE, null); 
return (result !== null ? result.singleNodeValue : null); 
} else if (typeof context.selectSingleNode != "undefined")f{ 





/ /创建 命名 空间 字符 囊 
if (namespaces instanceof Object){ 
Var ns = ""; 
for (var prefix in namespaces)t{ 
IE (namespaces.hasOwnProperty (prefix))t{ 


ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' "; 
} 
} 
doc.setProperty("SelectionNamespaces", ns); 
} 
return context.selectSingleNode (expression); 
} else { 





throw new Error("No XPath engine found."); 


} 
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这 个 函数 首先 要 确定 XML 文档 ， 以 便 基 于 该 文档 对 表达 式 求 值 。 由 于 上 下 文 节点 可 能 是 文档 ， 所 





以 必须 要 检测 nodeType 属性 。 此 后 ， 变 量 aoc 中 就 会 保存 对 XML 文档 的 引用 。 然 后 ， 可 以 检测 文档 














中 是 否 存 在 evaluate() 方 法 ， 即 是 否 支 持 DOM3 级 XPath。 如 果 支 持 ， 接 下 来 就 是 检测 传 入 的 
namespaces 对 象 。 在 这 里 使 用 instanceof 操作 符 而 不 是 typeof ， 是 因为 后 者 对 null 也 返回 
"object"。 然 后 将 nsresolver 变量 初始 化 为 nul1， 如 果 提 供 了 命名 空间 信息 的 话 ， 就 将 其 改 为 一 























个 函数 。 这 个 函数 是 一 个 财 包 ， 它 使 用 传人 的 namespaces 对 象 来 返回 命名 空间 的 URI。 此 后 ， 调 




















evaluate() 方 法 ， 并 对 其 结果 进行 检测 ， 在 确定 是 节点 之 后 再 返回 该 结果 。 











在 这 个 函数 针对 正 的 分 支 中 ， 需 要 检查 context 节点 中 是 否 存在 selectsingleNode () 方 法 。 与 DOM 





用 











分 支 一 样 ， 这 里 的 第 一 步 是 有 选择 地 构建 命名 空间 信息 。 如 果 传 人 了 namespaces 对 象 ， 则 迭代 其 属性 并 以 























修改 都 不 会 影响 到 当前 函数 。 最 后 ， 调 用 原生 的 selectsingleNode() 方 法 并 返回 结果 。 





























适当 格式 创建 一 个 字符 串 。 注 意 ， 这 里 使 用 了 hasownProperty () 方 法 来 确保 对 Object .prototype 的 任何 


如 果 前 面 两 种 方法 都 没有 得 到 支持 ,这 个 函数 就 会 抛 出 一 个 错误 ,表示 找 不 到 XPath 处 理 引擎 。 下 








面 是 使 用 selectsingleNode () 函数 的 示例 。 





Var result = selectSingleNode (xmldom.documentElement, "wrox:book/wrox:author", 
{ wrox: "http://www.wrox.com/" }); 
alert (serializexml (result)); 
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类 似 地 ， 也 可 以 创建 一 个 跨 浏 览 器 的 selectNodes () 困 数 。 这 个 函数 接收 与 selectSingle- 
Node () 相同 的 三 个 参数 ， 而 且 大 部 分 逻辑 都 相似 。 为 了 便于 看 清楚 ， 我 们 用 加 粗 字 体 突 出 了 这 两 个 函 


数 的 差别 所 在 。 


function selectNodes(context, expression, namespaces)t{ 
Var doc = (context.nodeType != 9 ? context.ownerDocument : context); 


if (typeof doc.evaluate != "undefined")t{ 
var nsresolver = null; 
if (namespaces instanceof Object){ 
nsresolver = function (prefix)t{ 
return namespaces[prefix]; 
中 
} 


Var result = doc.evaluate(expression, context, nsresolver, 


XPathResult .ORDERED NODE SNAPSHOT TYPE, null); 


Var nodes = new Array(); 


if (result !== null)t{ 
for (var i=0, len=result.snapshotLength; i < len; i++){ 
nodes.push(result.snapshotItem(i)); 
} 
} 


return nodes; 
} else if (typeof context.selectNodes != "undefined")t{ 


/ /创建 命名 空间 字符 囊 


if (namespaces instanceof Object){ 
Var Tg  ™" 
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for (var prefix in namespaces)t{ 
if (namespaces.hasOwnProperty (Drefix) ) { 
ns += "Xmlns:" + prefix + "='" + namespaces[prefix] + "' " 
} 
} 
doc.setProperty("SelectionNamespaces", ns); 
} 
Var result = context.selectNodes (expression); 
Var nodes = new Array(); 


for (var i=0,len=result.length; i < len; i++){ 
nodes.push(result [i]); 
} 


return nodes; 
} else { 
throw new Error("No XPath engine found."); 





} 


-pi 
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很 明显 ， 其 中 有 很 多 逻辑 都 与 selectsingleNode() 方 法 相同 。 在 函数 针对 DOM 的 部 分 ， 使 用 
了 有 序 快照 结果 类 型 ， 然 后 将 结果 保存 在 了 一 个 数组 中 。 为 了 与 正 的 实现 看 齐 ， 这 个 函数 应 该 在 没 找 
到 匹配 项 的 情况 下 也 返回 一 个 数组 ， 因 而 最 终 都 要 返回 数组 nodes。 在 函数 针对 IE 的 分 支 中 ， 调 用 了 
selectNodes () 方 法 并 将 结果 复制 到 了 一 个 数组 中 。 因 为 下 返回 的 是 一 个 NodeList， 所 以 最 好 将 节 
点 都 复制 到 一 个 数组 中 ， 这样 就 可 以 确保 在 不 同 浏览 器 下 ， 函数 都 能 返回 相同 的 数据 类 型 。 使 用 这 个 函 
数 的 示例 如 下 : 


个 Var result = selectNodes (xmldom.documentElement, "wrox:book/wrox:author", 

































































{ wrox: "http://www.wrox.com/" }); 
alert (result.length); 
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为 了 求 得 最 佳 的 浏览 器 兼容 性 ， 我 们 建议 在 JavaScript 中 使 用 XPath 时， 只 考虑 使 用 这 两 个 方法 。 
18.3 浏览 器 对 XSLT 的 支持 


XSLT 是 与 XML 相关 的 一 种 技术 , 它 利用 XPath 将 文档 从 一 种 表现 形式 转换 成 另 一 种 表现 形式 。 与 
XML 和 XPath 不 同 ，XSLT 没有 正式 的 API， 在 正式 的 DOM 规范 中 也 没有 它 的 位 置 。 结 果 ， 只 能 依靠 
浏览 器 开发 商 以 自己 的 方式 来 实现 它 。 卫 是 第 一 个 支持 通过 JavaScript 处 理 XSLT 的 浏览 














18.3.1 IE 中 的 XSLT 


与 正 对 其 他 XML 功能 的 支持 一 样 , 它 对 XSLT 的 支持 也 是 通过 ActiveX 对 象 实现 的 -从 MSXML 3.0 
( 即 IE6.0 ) 时 代 起 ，IE 就 支持 通过 JavaScript 实现 完整 的 XSLT 1.0 操作 。IE9 中 通过 DoMParser 创建 
的 DOM 文档 不 能 使 用 XSLT。 

1. 简单 的 XSLT 转换 

使 用 XSLT 样式 表 转 换 XML 文档 的 最 简单 方式 ， 就 是 将 它们 分 别 加 到 一 个 DOM 文档 中 ， 然 后 再 
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使 用 transformNode() 方 法 。 这 个 方法 存在 于 文档 的 所 有 节点 中 ， 它 接受 一 个 参数 ， 即 包含 XSLT 样 














式 表 的 文档 。 调 用 transformNode () 方 法 会 返回 一 个 包含 转换 信息 的 字符 串 。 来 看 一 个 例子 。 








// 加 载 XML 和 XSLT ( 仅 限 于 正 ) 
xmldom.1load("employees .xml"); 
xsltdom.load("employees.xslt"); 





/ /转换 


var result = xmldom.transformNode (xsltdom); 
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这 个 例子 加 载 了 一 个 XML 的 DOM 文档 和 一 个 XSLT 样式 表 的 DOM 文档。 然后， 在 XML 文档 节 


点 上 调用 了 transformNode () 方 法 ， 并 传人 XSLT。 变 量 result 中 最 后 就 会 保存 一 个 转换 之 后 得 到 
的 字符 串 。 需 要 注意 的 是 ， 由 于 是 在 文档 节点 级 别 上 调用 的 transformNode () ， 因 此 转换 是 从 文档 节 


点 开始 的 。 实 际 上 ，XSLT 转换 可 以 在 文档 的 任何 级 别 上 进行 ， 只 要 在 想 要 开始 转换 的 节点 上 调用 




















transformNode() 方 法 即 可 。 下 面 我 们 来 看 一 个 例子 。 


或 


f 式 表 则 始终 都 可 以 针对 调 











result = xmldom.documentElement.transformNode (xsltdom); 

result = xmldom.documentElement.childNodes[1] .transformNode (xsltdom); 

result = xmldom.getElementsByTagName ("name") [0] .transformNode (xsltdom); 
result = xmldom.documentElement.firstChild.lastChild.transformNode (xsltdom); 














如 果 不 是 在 文档 元 素 上 调用 transformNode (), 那么 转换 就 会 从 调用 节点 上 面 开始 。 不 过 , XSLT 
日 节点 所 在 的 整个 XML 文档 ， 而 无 需 更 换 。 




















2. 复杂 的 XSLT 转换 
虽然 transformNode () 方 法 提供 了 基本 的 XSLT 转换 能 力 , 但 还 有 使 用 这 种 语言 的 更 复杂 的 方式 。 




















为 此 ， 必 须要 使 用 XSL 模板 和 XSL 处 理 器 。 第 一 步 是 要 把 XSLT 样式 表 加 载 到 一 个 线程 安全 的 XML 
文档 中 。 而 这 可 以 通过 使 用 ActiveX 对 象 MSXML2 .FreeThreadedDOMDocument 来 做 到 。 这 个 ActiveX 
对 象 与 IE 中 常规 的 DOM 支持 相同 的 接口 。 此 外 ， 创建 这 个 对 象 时 应 该 尽 可 能 使 用 最 新 的 版 本 。 例 如 : 


























function createThreadSafeDocument (){ 
if (typeof arguments.callee.activeXString != "string")t{ 
Var versions = ["MSXML2 .FreeThreadedDOMDocument.6.0", 
"MSXML2 .FreeThreadedDOMDocument .3.0" 
"MSXML2 .FreeThreadedDOMDocument"], 








i, len; 


for (i=0,len=versions.length; i < len; i++){ 

try { 
new ActiveXObject (versions[i]); 
arguments.callee.activeXxSstring = versions[i]; 
break; 

} catch (ex){ 
// 跳 过 

} 


} 


return new ActiveXObject (arguments.callee.activeXString); 
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除了 签名 不 同 之 外 ， 线 程 安全 的 XML DOM 文档 与 常规 XML DOM 文档 的 使 用 仍然 是 一 样 的， 如 
下 所 示 : 


Var xsltdom = createThreadSafeDocument (); 
xsltdom.async = false; 
xsltdom.load("employees.xslt"); 


在 创建 并 加 载 了 自由 线程 的 DOM 文档 之 后 ， 必 须 将 它 指定 给 一 个 XSL 模板 ， 这 也 是 一 个 ActiveX 
对 象 。 而 这 个 模板 是 用 来 创建 XSL 处 理 器 对 象 的 ， 后 者 则 是 用 来 转换 XML 文档 的 。 同 样 ， 也 需要 使 用 
最 新 版 本 来 创建 这 个 对 象 ， 如 下 所 示 : 


TK 








function createXSLTemplate()t{ 
中 if (typeof arguments.callee.activeXxString != "string")f{ 
Var versions = ["MSXML2 .XSLTemplate.6.0", 


"MSXML2 .XSLTemplate.3.0", 
"MSXML2 .XSLTemplate"], 














i, len; 


for (i=0,len=versions.length; i < len; i++)f{ 
try { 
new ActiveXObject (versions[i]); 
arguments.callee.activeXString = versions[i]; 
break; 
} catch (ex){ 
// 跳 过 





} 


} 


return new ActiveXObject (arguments.callee.activeXxString); 
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使 用 这 个 createxsLTemplate() 国 数 可 以 创建 这 个 对 象 最 新 版 本 的 实例 ， 用 法 如 下 : 





Var template = createXSLTemplate(); 
template.stylesheet = xsltdom; 


Var processor = template.createProcessor(); 
processor.input = xmldom; 
processor.transform(); 


Var result = processor.output; 
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在 创建 了 XSL 处 理 器 之 后 ， 必 须 将 要 转换 的 节点 指定 给 input 属性 。 这 个 值 可 以 是 一 个 文档 ， 也 
可 以 是 文档 中 的 任何 节点 。 然 后 ， 调 用 transform() 方 法 即 可 执行 转换 并 将 结果 作为 字符 串 保 存在 
output 属性 中 。 这 些 代码 实现 了 与 transformNode () 相 同 的 功能 。 














XSL 模板 对 象 的 3.0 和 6.0 版 本 存在 显著 的 差别 。 在 3.0 版 本 中 ， 必 须 给 input 
属性 指定 一 个 完整 的 文档 ; 如 果 指 定 的 是 节点 ， 就 会 导致 错误 。 而 在 6.0 版 本 中 ， 则 
可 以 为 input 属性 指定 文档 中 的 任何 节点 。 






图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


540 第 18 章 “JavaScript 与 XML 





使 用 XSL 处 理 器 可 以 对 转换 进行 更 多 的 控制 ， 同 时 也 支持 更 高 级 的 XSLT 特性 。 例 如 ，XSLT 样式 
表 可 以 接受 传人 的 参数 ， 并 将 其 用 作 局 部 变量 。 以 下 面 的 样式 表 为 例 : 














<?Xm1l version="1.0"?> 
时 <xsl:stylesheet version="1.0" xmlns:XSs1L="http://www.w3.org/1999/XSLVTransform"> 
<xsl:output method="html"/> 
<xsl:param name="message"/> 


<xsl:template match="/"> 
<ul> 
<xsl:apply-templates select="*"/> 
</ul> 


<p>Message: <xsl:value-of select="$message"/></p> 
</xsl:template> 


<xsl:template match="employee"> 
<l1i><xsl:value-of select="name"/>, 
<em><xsl:value-of select="@title"/></em></1i> 
</xsl:template> 


</xsl:stylesheet> 


employees.xslt 


这 个 样式 表 定 义 了 一 个 名 为 message 的 参数 ， 然 后 将 该 参数 输出 到 转换 结果 中 。 要 设置 message 
的 值 ， 可 以 在 调用 transform() 之 前 使 用 addParameter () 方 法 。addParameter() 方 法 接收 两 个 参 
数 : 要 设置 的 参数 名 称 ( 与 在 <xs1 :param> 的 name 特性 中 指定 的 一 样 ) 和 要 指定 的 值 (多 数 情况 下 是 
字符 串 ,， 但 也 可 以 是 数值 或 布尔 值 )。 下 面 就 是 这 样 一 个 例子 。 
CY processor.input = xmldom.documentElement; 


processor.addParameter ("message", "Hello World!"); 
processor.transform(); 

















TEXsltExample03.htm 
通过 设置 参数 的 值 ， 这 个 值 就 可 以 在 输出 中 反映 出 来 。 
XSL 处 理 需 的 另 一 个 高 级 特性 ， 就 是 能 够 设置 一 种 操作 模式 。 在 XSLT 中 ， 可 以 使 用 mogde 特性 为 
模板 定义 一 种 模式 。 在 定义 了 模式 后 ， 如 果 没 有 将 <xsl:apply-templates> 与 匹配 的 mode 特性 一 起 
使 用 ， 就 不 会 运行 该 模板 。 下 面 来 看 一 个 例子 。 

















<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.o0org/1999/xXSL/Transform"> 
<xsl:output method="html"/> 
<xsl:param name="message'"/> 


<xsl:template match="/"> 
<ul> 
<xsl:apply-templates select="*"/> 
</ul> 
<p>Message: <xsl:value-of select="Smessage"/></D> 
</xsl:template> 
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<xsl:template match="employee"> 
<l1i><xsl:value-of select="name"/>, 
<em><xsl:value-of select="@title"/></em></1i> 
</xsl:template> 


<xsl:template match="employee" mode="title-first"> 
<li><em><xsl:value-of select="@title"/></em>, 
<xsl:value-of select="name"/></1i> 
</xsl:template> 


</xsl:stylesheet> 


employees3.xslt 


这 个 样式 表 定 义 了 一 个 模板 , 并 将 其 moae 特性 设置 为 "title-first" ( 即 “ 先 显示 职位 ”)。 在 这 
个 模板 中 ， 首 先 会 输出 员工 的 职位 ， 其 次 才 输 出 员工 的 名 字 。 为 了 使 用 这 个 模板 ， 必 须 也 要 将 
<xsl1:apply-templates> 元 素 的 模式 设置 为 "title-first"。 在 使 用 这 个 样式 表 时 ， 默 认 情况 下 其 
输出 结果 与 前 面 一 样 ， 先 显示 员工 的 名 字 ， 再 显示 员工 的 职位 。 但 是 ,如 果 在 使 用 这 个 样式 表 时 ， 使 用 
JavaScript 将 模式 设置 为 "title-first"， 那 么 结果 就 会 先 输出 员工 的 职位 。 在 JavaScript 中 使 用 
setStartMode() 方 法 设置 模式 的 例子 如 下 。 


processor.input = xmldom; 

processor.addParameter ("message", "Hello World!"); 
processor.setStartMode ("title-first"); 
processor.transform(); 






































TEXsltExample05.htm 
setStartMode () 方 法 只 接受 一 个 参数 ， 即 要 为 处 理 器 设置 的 模式 。 与 addParameter() 一 样 , 设 
置 模式 也 必须 在 调用 transform() 之 前 进行 。 
如 果 你 打算 使 用 同一 个 样式 表 进 行 多 次 转换 , 可 以 在 每 次 转换 之 后 重 置 处 理 器 。 调用 reset ( ) 方法 
后 ， 就 会 清除 原先 的 输入 和 输出 属性 、 启 动 模式 及 其 他 指定 的 参数 。 调 用 reset () 方法 的 例子 如 下 : 
processor.reset (); / /准备 下 一 次 转换 


因为 处 理 带 已 经 编译 了 XSLT 样式 表 ， 所 以 与 使 用 transformNode() 相 比 ， 这 样 进行 重复 转换 的 
速度 会 更 快 一 些 。 
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MSXML 只 支持 XSLT 1.0。 由 于 微软 的 战略 重点 转移 到 了 .NET Framework， 因 而 
MSXML 的 开发 被 停止 了 。 我 们 希望 在 不 久 的 将 来 , 能 够 通过 JavaScript 访问 XML 和 
XSLT .NET 对 象 。 


18.3.2 XSLTProcessor 类 型 


Mozilla 通过 在 Firefox 中 创建 新 的 类 型 ， 实 现 了 JavaScript 对 XSLT 的 支持 。 开 发 人 员 可 以 通过 
XSLTProcessor 类 型 使 用 XSLT 转换 XML 文档 ,其 方式 与 在 正 中 使 用 XSL 处 理 器 类 似 。 因 为 这 个 类 
型 是 率先 出 现 的 ， 所 以 Chrome 、Safari 和 Opera 都 借鉴 了 相同 的 实现 ， 最 终 使 XSLTProcessor 成 为 了 
通过 JavaScript 进行 XSLT 转换 的 事实 标准 。 
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与 下 的 实现 类 似 ， 第 一 步 也 是 加 载 两 个 DOM 文档 ,一 个 基于 XML， 男 一 个 基于 XSLT。 然 后 ， 
创建 一 个 新 XSLTProcessor 对 象 ， 并 使 用 ijmportStylesheet () 方 法 为 其 指定 一 个 XSLT， 如 下 面 
的 例子 所 示 。 


Var processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 








XsltProcessorExample01.htm 


最 后 一 步 就 是 执行 转换 。 这 一 步 有 两 种 不 同 的 方式 ， 如 果 想 返回 一 个 完整 的 DOM 文档 ， 可 以 调用 
transformToDocument () 。 而 通过 调用 transformToFragment () 则 可 以 得 到 一 个 文档 片段 对 象 。 一 
般 来 说 , 使 用 transformToFragment () 的 唯一 理由 ， 就 是 你 还 想 把 返回 的 结果 添加 到 另 一 个 DOM 文 
档 中 。 

在 使 用 transformToDocument () 时 ， 只 要 传人 XML DOM， 就 可 以 将 结果 作为 一 个 完全 不 同 的 
DOM 文档 来 使 用 。 来 看 下 面 的 例子 。 


Var result = processor.transformToDocument (xmldom); 
C9 alert (serializeXxml (result)); 
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而 transformToFragment () 方 法 接收 两 个 参数 : 要 转换 的 XML DOM 和 应 该 拥有 结果 片段 的 文 
档 。 换 句 话 说， 如 果 你 想 将 返回 的 片段 插入 到 页 面 中 ， 只 要 将 aocument 作为 第 二 个 参数 即 可 。 下 面 来 
看 一 个 例子 。 


Var fragment = processor.transformToDocument (xmldom, document); 
var div = document .getElementById("divResult"); 
div.appendChild(fragment); 











XsltProcessorExample02.htm 


这 里 ,处理 器 创建 了 一 个 由 document 对 和 象 拥 有 的 片段 。 这 样 , 就 可 以 将 返回 的 片段 添加 到 页 面 中 
已 有 的 <aiv> 元 素 中 了 。 

在 XSLT 样式 表 的 输出 格式 为 "xml "或 "html" 的 情况 下 ， 创 建文 档 或 文档 片段 会 非常 有 用 。 不 过 ， 
在 输出 格式 为 "text" 时 ， 我 们 通常 只 希望 得 到 转换 的 文本 结果 。 可 惜 的 是 ， 没 有 方法 能 够 直接 返回 文 
本 。 当 输出 格式 为 "text" 时 调用 transformropocument () ， 仍 然 会 返回 一 个 完整 的 XML 文档 , 但 
这 个 文档 的 内 容 在 不 同 浏览 器 中 却 不 一 样 。 例 如 ，Safari 会 返回 一 个 完整 的 HTML 文档 ， 而 Opera 和 
Firefox 则 会 返回 一 个 只 包含 一 个 元 素 的 文档 ， 这 个 元 素 中 包含 着 输出 的 文本 。 

使 用 transformToFragment () 方 法 可 以 解决 这 个 问题 ,这 个 方法 返回 的 是 只 包含 一 个 子 节 点 的 文 
档 片 段 ， 而 子 节点 中 包含 着 结果 文本 。 然 后 ， 使 用 下 列 代码 就 可 以 取得 其 中 的 文本 。 

Var fragment = processor.transformToFragment (xmldom, document); 


Var text = fragment.firstChild.nodeValue; 
alert (text); 


以 上 代码 能 够 在 支持 的 浏览 器 中 一 致 地 运行 ， 而 且 能 够 恰好 返回 转换 得 到 的 输出 文本 。 
1. 使 用 参数 
XSLTProcesso 也 支持 使 用 setParameter () 来 设置 XSILT 的 参数 ， 这 个 方法 接收 三 个 参数 : 命名 空间 
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URI、 参 数 的 内 部 名 称 和 要 设置 的 值 。 通 常 ， 命 名 空间 URI 都 是 nul1， 而 内 部 名 称 就 是 参数 的 名 称 。 另 外 ， 
必须 在 调用 transformrToDocument () 或 transformToFragment () 之 前 调用 这 个 方法 。 下 面 来 看 例子 。 





Var processor = new XSLTProcessor() 

() processor.importStylesheet (xsltdom); 
processor.setParameter (null, "message", "Hello World! "); 
Var result = processor.transformToDocument (xmldom); 


XsltProcessorExample03.htm 


还 有 两 个 与 参数 有 关 的 方法 ，getParameter () 和 removeParameter () ， 分 别 用 于 取得 和 移 除 当 
前 参数 的 值 。 这 两 个 方法 都 要 接受 命名 空间 参数 ( 同样 ， 通 常 是 nu11 ) 和 参数 的 内 部 名 称 。 例 如 : 
Var processor = new XSLTProcessor() 


processor.importStylesheet (xsltdom); 
processor.setParameter (null, "message", "Hello World! "); 





alert (processor.getParameter (null, "message")); // 输 出 "Hello World!" 
processor.removeParameter (null, "message"); 





Var result = processor.transformToDocument (xmldom); 


这 两 个 方法 并 不 常用， 提供 它们 只 是 为 了 方便 起 见 。 

2. 重 置 处 理 器 

每 个 XSLTProcessor 的 实例 都 可 以 重用 ， 以 便 使 用 不 同 的 XSLT 样式 表 执行 不 同 的 转换 。 重 置 处 
理 器 时 要 调用 reset () 方 法 , 这 个 方法 会 从 处 理 器 中 移 除 所 有 参数 和 样式 表 。 然后 , 你 就 可 以 再 次 调用 
importStylesheet () ， 以 加 载 不 同 的 XSLT 样式 表 ， 如 下 面 的 例子 所 示 。 


























Var processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 


/ /执行 转换 


processor.reset (); 
processor.importStylesheet (xsltdom2); 


// 再 执行 转换 
在 需要 基于 多 个 样式 表 进 行 转 换 时 ， 重 用 一 个 XSLTProcessor 可 以 节省 内 存 。 


18.3.3 ” 跨 浏 览 器 使 用 XSLT 


IE 对 XSLT 转换 的 支持 与 XsSLTProcessor 的 区 别 实 在 太 大 , 因此 要 想 重 新 实现 二 者 所 有 这 方面 的 
功能 并 不 现实 。 因 此 , 跨 浏 览 器 兼容 性 最 好 的 XSLT 转换 技术 ， 只 能 是 返回 结果 字符 串 。 为 此 在 正 中 只 
需 在 上 下 文 节点 上 调用 transformNogde() 即 可 ， 而 在 其 他 浏览 器 中 则 需要 序列 化 transformTo- 
Document () 操作 的 结果 。 下 面 这 个 函数 可 以 在 了 下、Firefox 、Chrome 、Safari 和 Opera 中 使 用 。 









































function transform(context, xslt)t 
时 if (typeof XSLTProcessor != "undefined"){ 
Var processor = new XSLTProcessor(); 
processor.importStylesheet (xslt); 
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Var result = processor.transformToDocument (context); 


return (new XMLSerializer()) .serializeToString (result); 
} else if (typeof context.transformNode != "undefined") { 
return context.transformNode (xslt); 
} else { 


throw new Error ("No XSLT processor available."); 


} 


CrossBrowserXsltExample01.htm 


这 个 transform() 图 数 接收 两 个 参数 : 要 执行 转换 的 上 下 文 节点 和 XSLT 文档 对 象 。 首 先 ， 它 检 
测 是 否 有 xsLTProcessor 类 型 的 定义 ， 如 果 有 则 使 用 该 类 型 来 进行 转换 。 在 调用 transformTo- 
Document () 方 法 之 后 , 将 返回 的 结果 序列 化 为 字符 串 。 如 果 上 下 文 节点 中 有 transformNode () 方 法 ， 
则 调用 该 方法 并 返回 结果 。 与 本 章 中 其 他 的 跨 浏览 器 函数 一 样 ， transform() 也 会 在 XSLT 处 理 器 无 效 
的 情况 下 抛 出 错误 。 下 面 是 使 用 这 个 函数 的 示例 。 

































































Var result = transform(xmldom, xsltdom); 


使 用 下 的 transformNode() 方 法 ， 可 以 确保 不 必 使 用 线程 安全 的 DOM 文档 进行 转换 。 
















注意 ， 由 于 不 同 浏览 器 的 XSLT 引擎 不 一 样 ， 因 此 转换 得 到 的 结果 在 不 同 浏览 器 
间 可 能 会 稍 有 不 同 , 也 可 能 会 差别 很 大 -因此 ,不 能 绝对 依赖 在 JavaScript 中 使 用 XSLT 
进行 转换 的 结果 。 






18.4 ”小 结 


JavaScript 对 XML 及 其 相关 技术 有 相当 大 的 支持 。 然 而 ,由 于 缺乏 规范 , 共同 的 功能 却 存在 一 些 不 
同 的 实现 。DOM2 级 提供 了 创建 空 XML 文档 的 API， 但 没有 涉及 解析 和 序列 化 。 既 然 规范 没有 对 这 些 
功能 作出 规定 ， 浏 览 吉 提 供 商 就 各 行 其 是 ， 拿 出 了 自己 的 实现 方案 。 卫 采取 了 下 列 方式 。 

口 通过 ActiveX 对 象 来 支持 处 理 XML ， 而 相同 的 对 象 也 可 以 用 来 构建 桌面 应 用 程序 。 

口 Windows 携带 了 MSXML 库 ，JavaScript 能 够 访问 这 个 库 。 
口 这 个 库 中 包含 对 基本 XML 解析 和 序列 化 的 支持 ， 同 时 也 支持 XPath 和 XSLT 等 技术 。 

Firefox 为 处 理 XML 的 解析 和 序列 化 ， 实 现 了 两 个 新 类 型 ， 简 介 如 下 。 

口 DoMParser 类 型 比较 简单 ， 其 对 象 可 以 将 XML 字符 串 解析 为 DOM 文档 。 

口 XMLSerializer 类 型 执行 相反 的 操作 ， 即 将 DOM 文档 序列 化 为 XML 字符 串 。 

由 于 Firefox 中 的 类 型 比较 简单 ， 用 户 众 多 ，IE9、Opera 、Chrome 和 Safari 都 相继 实现 了 相同 的 类 
型 。 因 此 ， 这 些 类 型 也 就 成 为 了 Web 开发 中 的 事实 标准 。 

DOM3 级 引入 了 一 个 针对 XPath API 的 规范 , 该 规范 已 经 由 Firefox 、Safari 、Chrome 和 Opera 实现 。 
这 些 API 可 以 让 JavaScript 基于 DOM 文档 运行 任何 XPath 查询 ， 并 且 能 够 返回 任何 数据 的 结果 。IE 以 
自己 的 方式 实现 了 对 XPath 的 支持 ; 具体 来 说 ， 就 是 两 个 方法 : selectsingleNode () 和 
selectNodes () 。 虽 然 与 DOM3 级 API 相 比 还 存在 诸多 限制 ， 但 使 用 这 两 个 方法 仍然 能 够 执行 基本 的 
XPath 功能 ， 即 在 DOM 文档 中 查找 节点 或 节点 集合 。 
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与 XML 相关 的 最 后 一 种 技术 是 XSLT， 没 有 公开 发 布 的 标准 针对 这 种 技术 的 功能 定义 相应 的 API。 
Firefox 为 通过 JavaScript 处 理 转换 创建 了 xsLTProcessor 类 型 ; 此 后 不 久 ，Safari、Chrome 、 和 Opera 
也 都 实现 了 同样 的 类 型 。IE 则 针对 XSLT 提供 了 自己 的 方案 ,一 个 是 简单 的 transformNode() 方 法 ， 
另 一 个 是 较为 复杂 的 模板 /处 理 器 手段 。 

目前 ,IE、Firefox 、Chrome 和 Opera 都 能 够 较 好 地 支持 XML。 虽然 正 的 实现 与 其 他 浏览 器 相 比 差 
异 比较 大 ,但 仍然 还 是 有 较 多 的 公共 功能 可 供 我 们 实现 跨 浏 览 絮 的 方案 。 
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本 章 内 容 
口 E4X 新 增 的 类 型 
口 使 用 E4X 操作 XML 
口 语法 的 变化 


























002 年 ， 由 BEA Systems 为 首 的 几 家 公司 建议 为 ECMAScript 增加 一 项 扩展 ， 以 便 在 这 门 语言 
中 添加 原生 的 XML 支持 。2004 年 6 月 ，E4X (ECMAScript forXML ) 以 ECMA-357 标准 的 形 
式 发 布 ; 2005 年 12 月 又 发 布 了 修订 版 。E4X 本 身 不 是 一 门 语言 ， 它 只 是 ECMAScript 语 言 的 可 选 扩展 。 
就 其 本 身 而 言 ，E4X 为 处 理 XML 定义 了 新 的 语法 ， 也 定义 了 特定 于 XML 的 对 象 。 
尽管 浏览 器 实现 这 个 扩展 标准 的 步伐 非常 缓慢 ,但 Firefox 1.5 及 更 高 版 本 则 支持 几乎 全 部 E4X 标 准 。 
本 章 主要 讨论 Firefox 对 E4X 的 实现 。 


19.1 E4X 的 类 型 


作为 对 ECMAScript 的 扩展 ，E4X 定义 了 如 下 几 个 新 的 全 局 类 型 。 
口 XML: XML 结构 中 的 任何 一 个 独立 的 部 分 。 
口 xMLList: XML 对 象 的 集合 。 
口 Namespace: 命名 空间 前 级 与 命名 空间 URI 之 间 的 映射 。 
口 eName: 由 内 部 名 称 和 命名 空间 URI 组 成 的 一 个 限定 名 。 

E4X 定义 的 这 个 4 个 类 型 可 以 表现 XML 文档 中 的 所 有 部 分 ， 其 内 部 机 制 是 将 每 一 种 类 型 ( 特别 是 
XML 和 XMLList ) 都 映射 为 多 个 DOM 类 型 。 



























































19.1.1 XML 类 型 


XML 类 型 是 E4X 中 定义 的 一 个 重要 的 新 类 型 ， 可 以 用 它 来 表现 XML 结构 中 任何 独立 的 部 分 。xML 
的 实例 可 以 表现 元 素 、 特 性 、 注 释 、 处 理 指令 或 文本 节点 。xML 类 型 继承 自 object 类 型 ， 因 此 它 也 继 
承 了 所 有 对 象 默认 的 所 有 属性 和 方法 。 创建 XML 对 象 的 方式 不 止 一 种 , 第 一 种 方式 是 像 下 面 这 样 调用 其 
构造 函数 : 

Var x = new XML () ; 

这 行 代码 会 创建 一 个 空 的 xML 对 象 , 我 们 能 够 向 其 中 添加 数据 。 另 外 , 也 可 以 向 构造 函数 中 传人 一 
个 XML 字符 串 ， 如 下 面 的 例子 所 示 : 
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Var x = new XML("<employee position=\"Software Engineer\"><name>Nicholas " + 
"Zakas</name></employee>"); 


传人 到 构造 函数 中 的 XML 字符 串 会 被 解析 为 分 层 的 XML 对 象 。 除 此 之 外 ， 还 可 以 向 构造 函数 中 
传人 DOM 文档 或 节点 ， 以 便 它们 的 数据 可 以 通过 E4X 来 表现 ,语法 如 下 : 

Var x = new XML (xmldom); 
虽然 这 些 创 建 xML 对 象 的 方式 都 还 不 错 ,但 最 强大 也 最 吸引 人 的 方法 , 则 是 使 用 xML 字面 量 将 XML 
数据 直接 指定 给 一 个 变量 。xMr 字面 量 就 是 圣人 到 JavaScript 代码 中 的 XML 代码 。 下 面 来 看 一 个 例子 。 











Var employee = <employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee>; 


XMLTYypeExample01.htm 


在 这 个 例子 中 ， 我 们 将 一 个 XML 数据 结构 直接 指定 给 了 一 个 变量 。 这 种 简洁 的 语法 同样 可 以 创建 
一 个 XML 对 象 ， 并 将 它 赋 值 给 employee 变量 。 



























Firefox 对 E4X 的 实现 不 支持 解析 XML 的 开头 代码 ( prolog ) 。 无 论 <?xml 
version="1.0" ?> 出 现在 传递 给 XML 构造 函数 的 文本 中 ， 还 是 出 现在 XML 字面 量 
中 ， 都 会 导致 语法 错误 。 












XML 类 型 的 toxMLString () 方 法 会 返回 XML 对 象 及 其 子 节 点 的 XML 字符 串 表 示 。 另 一 方面 ， 该 
类 型 的 tostring () 方 法 则 会 基于 不 同 XML 对 象 的 内 容 返 回 不 同 的 字符 串 。 如 果 内 容 简单 〈 纯 文本 )， 
则 返回 文本 ; 否则 ，toString () 方 法 与 toxMLString () 方 法 返回 的 字符 串 一 样 。 来 看 下 面 的 例子 。 
Var data = <name>Nicholas C. Zakas</name>; 


alert (data.toString()); //"Nicholas C. Zakas" 
alert (data.toXMLString()); //"<name>Nicholas C. Zakas</name>" 


使 用 这 两 个 方法 ， 几 乎 可 以 满足 所 有 序列 化 XML 的 需求 。 











19.1.2 xMLList 类 型 

XMLList 类 型 表现 XML 对 象 的 有 序 集合 。xMLList 的 DOM 对 等 类 型 是 NodeList, 但 与 Node 和 
NodeList 之 间 的 区 别 相 比 ，xML 和 xMLList 之 间 的 区 别 是 有 意 设计 得 比较 小 的 。 要 显 式 地 创建 一 个 
XMLList 对 象 ， 可 以 像 下 面 这 样 使 用 xMLLi st 构造 函数 : 

Var list = new XMLList(); 

与 XML 构造 函数 一 样 ， 也 可 以 向 其 中 传人 一 个 待 解 析 的 XML 字符 串 。 这 个 字符 串 可 以 不 止 包含 一 
个 文档 元 素 ， 如 下 面 的 例子 所 示 : 


Var list = new XMLList("<item/><item/>"); 
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结果 ， 保 存在 这 个 1ist 变量 中 的 xMLList 就 包含 了 两 个 XML 对 象 ， 分别 是 两 个 <item/> 元 素 。 
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还 可 以 使 用 加 号 (+ ) 操作 符 来 组 合 两 个 或 多 个 xML 对 象 ， 从 而 创建 xMLList 对 象 。 加 号 操作 符 
在 E4X 中 已 经 被 重 载 ， 可 以 用 于 创建 xMLList， 如 下 所 示 : 

var list = <item/> + <item/> ; 

这 个 例子 使 用 加 号 操作 符 组 合 了 两 个 xML 字面 量 ， 结 果 得 到 一 个 xMLList。 同 样 的 组 合 操 作 也 可 
以 使 用 特殊 的 <> 和 </> 语 法 来 完成 ， 此 时 不 使 用 加 号 操作 符 ， 例 如 : 

var list = <><item/><item/></>; 

尽管 可 以 创建 独立 的 xMLList 对 象 ,但 是 这 类 对 象 通常 是 在 解析 较 大 的 XML 结构 的 过 程 中 撒 带 着 
被 创建 出 来 的 。 来 看 下 面 的 例子 : 


Var employees = <employees> 
<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
<employee position="Salesperson"> 
<name>Jim Smith</name> 
</employee> 
</employees>; 
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以 上 代码 定义 的 employees 变量 中 包含 着 一 个 XML 对 象 ， 表 示 <employees/> 元 素 。 由 于 这 个 元 
素 又 包含 两 个 <employee/> 元 素 ， 因 而 就 会 创建 相应 的 xMLList 对 象 ， 并 将 其 保存 在 employees. 
employee 中 。 然 后 ， 可 以 使 用 方 括号 语法 及 位 置 来 访问 每 个 元 素 : 


var firstEmployee = employees.employeel[0]; 
Var secondEmployee = employees.employeel[1]; 


每 个 xMLList 对 象 都 有 length() 方 法 ， 用 于 返回 对 象 中 包含 的 元 素数 量 。 例 如 : 
alert (employees .employee.length()); //2 


注意 ，length () 是 方法 ,不 是 属性 。 这 一 点 是 故意 与 数组 和 NodeList 相 区 别 的 。 

E4X 有 意 模糊 XML 和 xMLList 类 型 之 间 的 区 别 ,， 这 一 点 很 值得 关注 。 实 际 上 , 一 个 XML 对 象 与 一 
个 只 包含 一 个 XML 对 象 的 XMLList 之 间 , 并 没有 显而易见 的 区 别 。 为 了 减少 两 者 之 间 的 区 别 , 每 个 xML 
对 象 也 同样 有 一 个 lengtn () 方 法 和 一 个 由 [0] 引 用 的 属性 (返回 xML 对 象 自 身 )。 

XML 与 XMLList 之 间 的 这 种 兼容 性 可 以 简化 E4X 的 使 用 ， 因 为 有 些 方法 可 以 返回 任意 一 个 类 型 。 

XMLList 对 象 的 tostring() 和 toxMLString () 方 法 返回 相同 的 字符 串 值 ， 也 就 是 将 其 包含 的 
XML 对 象 序列 化 之 后 再 拼接 起 来 的 结 







































































19.1.3 Namespace 类 型 


E4X 中 使 用 Namespace 对 象 来 表现 命名 空间 。 通 常 , Namespace 对 象 是 用 来 映射 命名 空间 前 绥 
命名 空间 URI 的 ,不 过 有 时 候 并 不 需要 前 级 ,要 创建 Namespace 对 象 ,可 以 像 下 面 这 样 使 用 Namespace 
构造 也 数 : 


Var ns = new Namespace(); 


而 传人 URI 或 前 级 加 URI， 就 可 以 初始 化 Namespace 对 象 ， 如 下 所 示 : 
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var ns = new Namespace ("http://www.wrox.com/"); // 没 有 前 缓 的 命名 空间 
C9 Var wrox = new Namespace ("wrox", "http://www.wrox.com/"); //wrox 命名 空间 
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可 以 使 用 prefix 和 uri 属性 来 取得 Namespace 对 象 中 的 信息 : 


alert (ns.uri); //"http://www.wrox.com/" 
alert (ns.prefix); //undefined 

alert (wrox.uri); //"http://www.wrox.com/" 
alert (wrox.prefix); //"Wrox" 


NamespaceTypeExample01.htm 





在 没有 给 Namespace 对 象 指定 前 级 的 情况 下 ，prefix 属性 会 返回 undefined。 要 想 创建 默认 的 
命名 空间 ， 应 该 将 前 级 设置 为 空 字符 串 。 

如 果 xmL 字面 量 中 包含 命名 空间 ,或 者 通过 XML 构造 函数 解析 的 xML 字符 串 中 包含 命名 空间 信息 ， 
那么 就 会 自动 创建 Namespace 对 象 ,然后 , 就 可 以 通过 前 级 和 namespace () 方 法 来 取得 对 Namespace 
对 象 的 引用 。 来 看 下 面 的 例子 : 

Var Xml = <wrox:root xmlns:wrox="http://www.wrox.com/"> 


<wrox:message>Hello World!</wrox:message> 
</WrOXrOOt>y 






































Var wrox = xml .namespace ("wrox"); 
alert (wrox.uri); 
alert (wrox.prefix); 


NamespaceTypeExample02.htm 

在 这 个 例子 中 ,我 们 以 xML 字面 量 的 形式 创建 了 一 个 包含 命名 空间 的 XML 片段 。 而 表现 wrox 命 

名 空间 的 Namespace 对 象 可 以 通过 namespace ("wrox") 取得 ， 然 后 就 可 以 访问 这 个 对 象 的 uri 和 
prefix 属性 了 。 如 果 xML 片段 中 有 默认 的 命名 空间 ,那么 向 namespace () 中 传人 空 字符 串 ， 即 可 取 
得 相应 的 Namespace 对 象 。 
Namespace 对 象 的 toString () 方 法 始终 会 返回 命名 空间 URI。 























19.1.4 ”QName 类 型 


QName 类 型 表现 的 是 XML 对 象 的 限定 名 ， 即 命名 空间 与 内 部 名 称 的 组 合 。 向 QName 构造 函数 中 传 
人 名称 或 Namespace 对 象 和 名称， 可 以 手工 创建 新 的 QName 对 象 ， 如 下 所 示 : 


Var wrox = new Namespace ("wrox", "http://www.wrox.com/"); 
Var wroxMessage = new QName (wrox, "message"); // 表 示 "Wwrox:message" 


QNameTYypeExample01.htm 








创建 了 QName 对 象 之 后 ， 可 以 访问 它 的 两 个 属性 : uri 和 localName。 其 中 ，uri 属性 返回 在 创 
建 对 象 时 指定 的 命名 空间 的 URI ( 如 果 未 指定 命名 空间 , 则 返回 空 字 符 串 ), 而 localName 属性 返回 限 
定名 中 的 内 部 名 称 ， 如 下 面 的 例子 所 示 : 
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alert (wroxMessage.uri); //"http://www.wrox.com/" 
alert (wroxMessage.localName); //"message" 


QNameTypeExample01.htm 


这 两 个 属性 是 只 读 的 ， 如 果 你 想 修改 它们 的 值 , 会 导致 错误 发 生 。QName 对 象 重 写 了 tostring () 
方法 , 会 以 uri: :localName 形式 返回 一 个 字符 串 , 对 于 前 面 的 例子 来 说 , 就 是 "http://www.wrox. 
Com/ : :message"o 

在 解析 XML 结构 时 ,会 为 表示 相应 元 素 或 特性 的 xML 对 象 自 动 创建 QName 对 象 .可 以 使 用 这 个 xML 
对 象 的 name () 方 法 取得 与 该 xML 对 象 关联 的 eName 对 象 ， 如 下 面 的 例子 所 示 : 

Var Xml = < wrox:root xmlns:wrox="http://www.wrox.com/"> 


<wrox:message>Hello World!</wrox:message> 
</wrox:root> ; 

















Var wroxRoot = xml .name(); 
alert (wroxRoot .uri); //"http://www.wrox.com/" 
alert (wroxRoot.localName); yy/ "root” 


QNameDpeExample02 htm 
这 样 ， 即 便 没有 指定 命名 空间 信息 ， 也 会 根据 XML 结构 中 的 元 素 和 特性 创建 一 个 oName 对 象 。 
使 用 setName () 方 法 并 传人 一 个 新 eName 对 象 ， 可 以 修改 XML 对 象 的 限定 名 ， 如 下 所 示 : 
Xml .setName (new QName ("newroot")); 


通常 ， 这 个 方法 会 在 修改 相应 命名 空间 下 的 元 素 标 签名 或 特性 名 时 用 到 。 如 果 该 名 称 不 属于 任何 命 
名 空间 ， 则 可 以 像 下 面 这 样 使 用 setLocalName () 方 法 来 修改 内 部 名 称 : 


























xml .setLocalName ("newtagname"); 
19.2 一 般 用 法 


在 将 XML 对 象 、 元 素 、 特 性 和 文本 集合 到 一 个 层次 化 对 象 之 后 , 就 可 以 使 用 点 号 加 特性 或 标签 名 的 
方式 来 访问 其 中 不 同 的 层次 和 结构 。 每 个 子 元 素 都 是 父 元 素 的 一 个 属性 ， 而 属性 名 与 元 素 的 内 部 名 称 相 
同 。 如 果子 元 素 只 包含 文本 ， 则 相应 的 属性 只 返回 文本 ， 如 下 面 的 例子 所 示 。 

Var employee = <employee position="Software Engineer"> 

<name>Nicholas C. Zakas</name> 
</employee>; 

alert (employee.name); //"Nicholas C. Zakas" 

以 上 代码 中 的 <name/> 元 素 只 包含 文本 。 访问 employee .name 即 可 取得 该 文本 ， 而 在 内 部 需要 定 
位 到 <name/> 元 素 , 然后 返回 相应 文本 。 由 于 传人 到 alert () 时, 会 隐 式 调用 tostring () 方 法 , 因此 
显示 的 是 <name/> 中 包含 的 文本 。 这 就 使 得 访问 xML 文档 中 包含 的 文本 数据 非常 方便 。 如 果 有 多 个 元 素 
具有 相同 的 标签 名 ， 则 会 返回 xMLList。 下 面 再 看 一 个 例子 。 

Var employees = <employees> 

<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 


</employee> 
<employee position="Salesperson"> 
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<name>Jim Smith</name> 


</employee> 
</employees>; 
alert (employees .employee[0] .name); //"Nicholas C. Zakas" 
alert (employees .employee[1] .name); //"Jim Smith" 








个 例子 访问 了 每 个 <employee/> 元 素 并 返回 了 它们 <name/> 元 素 的 值 。 如 果 你 不 确定 子 元 素 的 内 
部 名 称 ， 或 者 你 想 访 问 所 有 子 元 素 ， 不 管 其 名 称 是 什么 ， 也 可 以 像 下 面 这 样 使 用 星 号 (* )。 











var allchildqren = employees.*; // 返 回 所 有 子 元 素 ， 不 管 其 名 称 是 什么 
时 alert (employees.*[0] .name); //"Nicholas C. Zakas" 


UsageExample01.htm 


与 其 他 属性 一 样 ， 星 号 也 可 能 返回 XML 对 象 ， 或 返回 XMLList 对 象 ， 这 要 取决 于 XML 结构 。 
要 达到 同样 的 目的 , 除了 属性 之 外 , 还 可 以 使 用 chila() 方 法 。 将 属性 名 或 索引 值 传 递 给 chila() 
方法 ， 也 会 得 到 相同 的 值 。 来 看 下 面 的 例子 。 





























var firstChild = employees.child(0); // 与 employees.*[0] 相 同 

Var employeeList = employees.child("employee"); // 与 employees .employee 相同 

Var allChildren = employees.child("*"); // 与 employees.* 相 同 

为 了 再 方便 一 些 ， 还 有 一 个 children () 方 法 始终 返回 所 有 子 元 素 。 例 如 : 

var allChildren = employees.children(); // 与 employees.* 相 同 

而 另 一 个 方法 elements () 的 行为 与 child() 类 似 ， 区 别 仅 在 于 它 只 返回 表示 元 素 的 Zr 对象。 例如 : 
Var employeeList = employees.elements ("employee"); // 与 employees .employee 相同 

Var allChildren = employees.elements("*"); // 与 employees.* 相 同 














这 些 方法 为 JavaScript 开发 人 员 提 供 了 访问 xML 数据 的 较为 熟悉 的 语法 。 
要 删除 子 元 素 ， 可 以 使 用 delete 操作 符 ， 如 下 所 示 : 


delete employees.employee[0]; 
alert (employees.employee.length()); /7/1 


显然 ， 这 也 正 是 将 子 节点 看 成 属性 的 一 个 主要 的 优点 。 
19.2.1 访问 特性 


访问 特性 也 可 以 使 用 点 语法 ,不 过 其 语法 稍 有 扩充 。 为 了 区 分 特性 名 与 子 元 素 的 标签 名 ， 必 须 在 名 
称 前 面 加 上 一 个 e 字 符 。 这 是 从 XPath 中 借鉴 的 语法 ; XPath 也 是 使 用 e 来 区 分 特性 和 标签 的 名 称 。 不 过 ， 
结果 可 能 就 是 这 种 语法 看 起 来 比较 奇怪 ， 例 如 : 


Var employees = <employees> 



























































<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
<employee position="Salesperson"> 
<name>Jim Smith</name> 
</employee> 
</employees>; 


alert (employees .employee[0] .@position); //"Software Engineer" 
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与 元 素 一 样 ， 每 个 特性 都 由 一 个 属性 来 表示 ,而 且 可 以 通过 这 种 简写 语法 来 访问 。 以 这 种 语法 访问 
特性 会 得 到 一 个 表示 特性 的 XML 对 象 , 对 象 的 tostring () 方 法 始终 会 返回 特性 的 值 , 要 取得 特性 的 名 
称 ， 可 以 使 用 对 象 的 name () 方 法 。 

另外 ， 也 可 以 使 用 chila() 方 法 来 访问 特性 ， 只 要 传人 带 有 @ 前 级 的 特性 的 名 称 即 可 。 


alert (employees .employee[0] .child("@position")); //"Software Engineer" 
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由 于 访问 xML 对 象 的 属性 时 也 可 以 使 用 chila() ， 因 此 必须 使 用 e 字 符 来 区 分 标签 名 和 特性 名 。 
使 用 attribute() 方 法 并 传人 特性 名 ， 可 以 只 访问 XML 对 象 的 特性 。 与 child() 方 法 不 同 , 使 
用 attribute () 方 法 时 ， 不 需要 传人 带 e 字 符 的 特性 名 。 下 面 是 一 个 例子 。 


alert (employees.employee[0] .attribute("position")); //"Software Engineer" 
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这 三 种 访问 特性 的 方式 同时 适用 于 xML 和 xMLList 类 型 。 对 于 xML 对 象 来 说 , 会 返回 一 个 表示 相 
应 特性 的 xML 对 象 ; 对 xMLList 对 象 来 说 ,会 返回 一 个 xMLList 对 象 ， 其 中 包含 列表 中 所 有 元 素 的 
特性 XML 对 象 。 对 于 前 面 的 例子 而 言 ，employees .empbloyee .eposition 返回 的 XMLList 将 包含 两 
个 对 象 : 一 个 对 象 表示 第 一 个 <employee/> 元 素 中 的 position 特性 ， 另 一 个 对 象 表示 第 二 个 元 素 中 
的 同一 特性 。 

要 取得 xML 或 xMLList 对 象 中 的 所 有 特性 ， 可 以 使 用 attributes () 方 法 。 这 个 方法 会 返回 一 个 
表示 所 有 特性 的 xMLList 对 象 。 使 用 这 个 方法 与 使 用 ex 的 结果 相同 ， 如 下 面 的 例子 所 示 。 

// 下 面 两 种 方式 都 会 取得 所 有 特性 


Var attsl = employees.employee[l0].@*; 
Var atts2 = employees.employee[0] .attributes(); 


在 E4X 中 修改 特性 的 值 与 修改 属性 的 值 一 样 非常 简单 ， 只 要 像 下 面 这 样 为 特性 指定 一 个 新 值 即 可 。 
employees.employee[0].@position = "Author"; // 修 改 position 特性 


修改 的 特性 会 在 内 部 反映 出 来 ， 换 名 话说， 此 后 再 序列 化 xML 对 象 ， 就 会 使 用 新 的 特性 值 。 同 样 ， 
为 特性 赋值 的 语法 也 可 以 用 来 添加 新 特性 ， 如 下 面 的 例子 所 示 。 


















































employees.employee[0].@experience = "8 years"; // 添 加 experience 特性 
employees.employee[0].@manager = "Jim Smith"; // 添 加 manager 特性 

由 于 特性 与 其 他 ECMAScript 属性 类 似 ， 因 此 也 可 以 使 用 aelete 操作 符 来 删除 特性 ， 如 下 所 示 。 
delete employees .employee[0] .@position; // 删 除 position 特性 








通过 属性 来 访问 特性 极 大 地 简化 了 与 底层 XML 结构 交互 的 操作 。 
19.2.2 ”其 他 节点 类 型 


E4X 定义 了 表现 XML 文档 中 所 有 部 分 的 类 型 ， 包括 注释 和 人 处理 指 令 。 在 默认 情况 上 ，E4X 不 会 解 
析 注 释 或 处 理 指令 ， 因 此 这 些 部 分 不 会 出 现在 最 终 的 对 象 层 次 中 。 如 果 想 让 解析 器 解析 这 些 部 分 ， 可 以 
像 下 面 这 样 设置 XML 构造 函数 的 下 列 两 个 属性 。 
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XML .ignoreComments = false; 
XML .ignoreProcessingInstructions = false; 


在 设置 了 这 两 个 属性 之 后 ，E4X 就 会 将 注释 和 处 理 指令 解析 到 XML 结构 中 。 

由 于 XML 类 型 可 以 表示 所 有 节点 , 因此 必须 有 一 种 方式 来 确定 节点 类 型 。 使 用 nodeKinq() 方 法 可 
以 得 到 XML 对 象 表示 的 类 型 ， 该 访问 可 能 会 返回 "text"、"element"、"comment"、"processing- 
insttruction" 或 "attribute"。 以 下 面 的 XML 对 象 为 例 。 


Var employees = <employees> 
叶 ) <?Dont forget the donuts?> 

<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 

</employee> 

<!--just added--> 

<employee position="Salesperson"> 
<name>Jim Smith</name> 












































</employee> 
</employees> ; 
我 们 可 以 通过 下 面 的 表格 来 说 明 nodeKind() 返 回 的 节点 类 型 。 
语 名 返回 值 
empblovyees .nodqeKind() "element" 
employees.*[0] .nodeKind() "processing-instruction" 
employees.employee[0] .@position.nodeKind() "attribute" 
employees .employee[0] .nodeKind() "element" 
employees.*[2] .nodeKind() "comment" 
employees.employee[0] .name.*[0] .nodeKind() "text" 


不 能 在 包含 多 个 xML 对 象 的 xMLList 上 调用 nodeKind() 方 法 ; 否则 ,会 抛 出 一 个 错误 。 

可 以 只 取得 特定 类 型 的 节点 ， 而 这 就 要 用 到 下 列 方法 。 

口 attributes(): 返回 XML 对 象 的 所 有 特性 。 

口 comments () : 返回 XML 对 象 的 所 有 子 注释 节点 。 

口 elements (tagName) : 返回 XML 对 象 的 所 有 子 元 素 。 可 以 通过 提供 元 素 的 tagName ( 标签 名 ) 
来 过 滤 想 要 返回 的 结果 。 

口 processingInstructions (name): 返回 XML 对 象 的 所 有 处 理 指令 。 可 以 通过 提供 处 理 指令 
的 name (名 称 ) 来 过 滤 想 要 返回 的 结果 。 
口 text () : 返回 XML 对 象 的 所 有 文本 子 节点 。 

上 述 的 每 一 个 方法 都 返回 一 个 包含 适当 XML 对 象 的 XMLList。 

使 用 hassimpleContent () 和 hascomplexContent() 方 法 ,可 以 确定 XML 对 象 中 是 只 包含 文本 ， 
还 是 包含 更 复杂 的 内 容 。 如 果 xML 对 象 中 只 包含 子 文本 节点 ， 则 前 一 个 方法 会 返回 true; 如 果 XML 对 
象 的 子 节点 中 有 任何 非 文本 节点 ， 则 后 一 个 方法 返回 true。 来 看 下 面 的 例子 。 





















































alert (emp1ovyees .employee[0] .hasComplexContent () ) ; //true 
alert (employees.employee[0] .hasSimpleContent () ) ; //false 
alert (employees.employee[0] .name.hasComplexContent()); //false 
alert (employees.employee[0] .name.hasSimpleContent()); //true 








利用 这 些 方法 ， 以 及 前 面 提 到 的 其 他 方法 ， 可 以 极 大 地 方便 查找 XML 结构 中 的 数据 。 
19.2.3 ”查询 
实际 上 ，E4X 提供 的 查询 语法 在 很 多 方面 都 与 XPath 类 似 。 取 得 元 素 或 特性 值 的 简单 操作 是 最 基本 
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的 查询 ,在 查询 之 前 ,不 会 创建 表现 XML 文档 结构 中 不 同 部 分 的 XML 对 象 . 从 底层 来 看 ,XML 和 XMLList 
的 所 有 属性 事实 上 都 是 查询 的 结果 。 也 就 是 说 ， 引 用 不 表现 XML 结构 中 某 一 部 分 的 属性 仍然 会 返回 
XMLList; 只 不 过 这 个 xMLList 中 什么 也 不 会 包含 。 例 如 ， 如 果 基 于 前 面 的 xML 示例 执行 下 列 代码 ， 
则 返回 的 结果 就 是 空 的 。 


var cats = employees.cat; 
alert (cats.length()); //0 

















QueryingExample01.htm 


这 个 查询 想 要 查找 <employees/> 中 的 <cat /> 元素 , 但 这 个 元 素 并 不 存在 。 上面 的 第 一 行 代码 会 返 
回 一 个 空 的 xMLList 对 象 。 虽 然 返 回 的 是 空 对 象 ， 但 查询 可 以 照常 进行 ， 而 不 会 发 生 异 常 。 
前 面 我 们 看 到 的 大 多 数 例子 都 使 用 点 语法 来 访问 直接 的 子 节点 。 而 像 下 面 这 样 使 用 两 个 点 ， 则 可 以 
进一步 扩展 查询 的 深度 ， 查 询 到 所 有 后 代 节 点 。 

var allDescendants = employees..*; // 取 得 <employees/> 的 所 有 后 代 节 点 

上 面 的 代码 会 返回 <employees/> 元 素 的 所 有 后 代 节 点 。 结 果 中 将 会 包含 元 素 、 文 本 、 注 释 和 处 理 
指令 ， 最 后 两 种 节点 的 有 无 取决 于 在 XML 构造 函数 上 的 设置 (前面 曾经 讨论 过 ); 但 结果 中 不 会 包含 特 
性 。 要 想 取得 特定 标签 的 元 素 ， 需 要 将 星 号 替换 成 实际 的 标签 名 。 

var allNames = employees. .name: // 取 得 作为 <employees/> 后 代 的 所 有 <name/> 节 点 

同样 的 查询 可 以 使 用 aescendaants () 方 法 来 完成 。 在 不 给 这 个 方法 传递 参数 的 情况 下 , 它 会 返回 
所 有 后 代 节 点 〈 与 使 用 . .* 相 同 )， 而 传递 一 个 名 称 作为 参数 则 可 以 限制 结果 。 下 面 就 是 这 两 种 情况 的 
例子 。 














































































































var allDescendants = employees.descendants () ; // 所 有 后 代 节 点 

var allNames = employees.descendants ("name"); // 后 代 中 的 所 有 <name/> 元 素 

还 可 以 取得 所 有 后 代 元 素 中 的 所 有 特性 ， 方 法 是 使 用 下 列 任何 一 行 代码 。 

var allAttributes = employees..@*; // 取 得 所 有 后 代 元 素 中 的 所 有 特性 

var allAttributes2 = employees.descendants ("@*"); // 同 上 

与 限制 结果 中 的 后 代 元 素 一 样 ,也 可 以 通过 用 完整 的 特性 名 来 替换 星 号 达到 过 滤 特 性 的 目的 ,例如 : 
var allAttributes = employees..@position; // 取 得 所 有 position 特性 

var allAttributes2 = employees.descendants ("@position"); // 同 上 

除了 访问 后 代 元 素 之 外 ， 还 可 以 指定 查询 的 条 件 。 例 如 ， 要 想 返 回 position 特性 值 为 











"Salesperson" 的 所 有 <employee/> 元 素 ， 可 以 使 用 下 面 的 查询 : 
Var salespeople = employees.employee. (@position == "Salesperson"); 


同样 的 语法 也 可 以 用 于 修改 XML 结构 中 的 某 一 部 分 。 例 如 ， 可 以 将 第 一 位 销售 员 (salesperson ) 
的 position 特性 修改 为 "Senior Salesperson",， 代码 如 下 : 


employees.employee. (eposition == "Salesperson") [0] .@position= "Senior Salesperson"; 


注意 , 圆 括号 中 的 表达 式 会 返回 一 个 包含 结果 的 XMLList， 而 方 括号 返回 其 中 的 第 一 项 , 然后 我 们 
重 写 了 eposition 属性 的 值 。 
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使 用 parent () 方 法 能 够 在 XML 结构 中 上 溯 ， 这 个 方法 会 返回 一 个 xML 对 象 ,， 表示 当前 xML 对 象 
的 父 元 素 。 如 果 在 xMLList 上 调用 parent () 方 法 ， 则 会 返回 列表 中 所 有 对 象 的 公共 父 元 素 。 下 面 是 
一 个 例子 。 


Var employees2 = employees.employee.parent (); 


这 里 ， 变 量 employees2 中 包含 着 与 变量 employees 相同 的 值 。 在 处 理 来 源 未 知 的 XML 对 象 时 ， 
经 常会 用 到 parent () 方 法 。 


19.2.4 构建 和 操作 XML 


将 XML 数据 转换 成 xML 对 象 的 方式 有 很 多 种 。 前 面 曾经 讨论 过 ， 可 以 将 XML 字符 串 传 递 到 xML 
构造 函数 中 ,也 可 以 使 用 xML 字面 量 。 相 对 而 言 ，xML 字面 量 方式 更 方便 一 些 , 因为 可 以 在 字面 量 中 髓 
入 JavaScript 变量 ,语法 是 使 用 花 括号 ( {} )。 可 以 将 JavaScript 变量 做 入 到 字面 量 中 的 任意 位 置 上 ， 如 
下 面 的 例子 所 示 。 

Var tagName = "color"; 


var color = "red"; 
Var Xml = <{tagName}>{color}</{tagName}>; 



































alert (xm]l .toXMLString()); I/"<colLor>red</c0lLor> 
XMLConstructionExample01.htm 


在 这 个 例子 中 ，xML 字面 量 的 标签 名 和 文本 值 都 是 使 用 花 括 号 语法 插入 的 。 有 了 这 个 语法 ,就 可 以 
省 去 在 构建 XML 结构 时 拼接 字符 串 的 麻烦 。 

E4X 也 支持 使 用 标准 的 JavaScript 语法 来 构建 完整 的 XML 结构 。 如 前 所 述 ， 大 多 数 必要 的 操作 都 
是 查询 ， 而 且 即 便 元 素 或 特性 不 存在 也 不 会 抛 出 错误 。 在 此 基础 上 更 进一步 ， 如 果 将 一 个 值 指定 给 一 个 
不 存在 的 元 素 或 特性 ，E4X 就 会 首先 在 底层 创建 相应 的 结构 ， 然 后 完成 赋值 。 来 看 下 面 的 例子 。 

Var employees = <employees/>; 


employees.employee.name = "Nicholas C. Zakas"; 
employees.employee.@position = "Software Engineer"; 




















XMLConstructionExample02.htm 


这 个 例子 一 开始 声明 了 <employees/> 元 素 ， 然 后 在 这 个 元 素 基 础 上 开始 构建 XML 结构 。 第 二 行 
代码 在 <employees/> 中 创建 了 一 个 <employee/> 元 素 和 一 个 <name/> 元 素 , 并 指定 了 文本 值 。 第 三 行 
代码 添加 了 一 个 position 特性 并 为 该 特性 指定 了 值 。 此 时 构建 的 XML 结构 如 下 所 示 。 


<employees> 
<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
</employees> 


当然 ， 使 用 加 号 操作 符 也 可 以 再 添加 一 个 <employeey/> 元 素 ， 如 下 所 示 。 


employees.employee += <employee position="Salesperson"> 
<name>Jim Smith</name> 
</employee>; 




















XMLConstructionExample02.htm 
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最 终 构建 的 XML 结构 如 下 所 示 : 


<employees> 
<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
<employee position="Salesperson"> 
<name>Jim Smith</name> 
</employee> 
</employees> 


除了 上 面 介绍 的 基本 的 XML 构建 语法 之 外 ， 还 有 一 些 类 似 DOM 的 方法 ,简介 如 下 。 
口 ee : 将 给 定 的 chilG 作为 子 节点 添加 到 xmLList 的 末尾 。 
口 copy () : 返回 XML 对 象 副本 。 
口 insertChilgAfter (refNode，chilg) : 将 cpi71a 作 为 子 节 点 搬入 到 xMLList 中 refNode 的 后 面 。 
口 insertchildBefore (refNode，chilg) : 将 child 作 为 子 节 点 插入 到 xMLList 中 refNode 的 前 面 。 
口 prependchild (chi1gd) : 将 给 定 的 chi1lq 作为 子 节点 添加 到 xMLList 的 开始 位 置 。 
口 replace (propertyName, value) : 用 value 值 奉 换 名 为 propertyName 的 属性 ， 这 
可 能 是 一 个 元 素 ， 也 可 能 是 一 个 特性 。 
口 setchildren (children): 用 children 替换 当前 所 有 的 子 元 素 ，children 可 以 是 XML 对 
象 ， 也 可 是 XMLList 对 象 。 
这 些 方 法 既 非常 有 用 ， 也 非常 容易 使 用 。 下 列 代码 展示 了 这 些 方法 的 用 途 。 
Var employees = <employees> 
<employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
<employee position="Salesperson"> 
<name>Jim Smith</name> 


</employee> 
</employees>; 





























人 
府 

















employees .appendChild(<employee position="Vice President"> 
<name>Benjamin Anderson</name> 
</employee>); 


employees .prependChild(<employee position="User Interface Designer"> 
<name>Michael Johnson</name> 
</employee>); 


employees.insertChildBefore (employees.child(2), 
<employee position="Human Resources Manager"> 
<name>Margaret Jones</name> 
</employee>); 


employees.setChildren(<employee position="President"> 
<name>Richard McMichael</name> 
</employee> + 
<employee position="Vice President"> 
<name>Rebecca Smith</name> 
</employee>); 


XMLConstructionExample03.htm 
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以 上 代码 首先 在 员工 列表 的 底部 添加 了 一 个 名 为 Benjamin Anderson 的 副 总 统 ( vice president ) 。 然 
后 ， 在 员工 列表 顶部 又 添加 了 一 个 名 为 Michael Johnson 的 界面 设计 师 。 接 着 ， 在 列表 中 位 置 为 2 的 员 
工 一 一 此 时 这 个 员工 是 Jim Smith, 因为 他 前 面 还 有 Michael Johnson 和 Nicholas C. Zakas 之 前 又 添加 
了 一 个 名 为 Margaret Jones 的 人 力 资 源 部 经 理 。 最 后 , 所 有 这 些 子 元 素 都 被 总 统 Richard McMichael 和 副 
总 统 Rebecca Smith 替代 。 结 果 XML 如 下 所 示 。 


























<employees> 
<employee position="President"> 
<name>Richard McMichael</name> 
</employee> 
<employee position="Vice President"> 

<name>Rebecca Smith</name> 

</employee> 

</employees> 


熟练 运用 这 些 技 术 和 方法 ， 就 能 够 使 用 E4X 执行 任何 DOM 风格 的 操作 。 


19.2.5 ”解析 和 序列 化 


E4X 将 解析 和 序列 化 数据 的 控制 放 在 了 xML 构造 函数 的 一 些 设置 当中 。 与 XML 解析 相关 的 设置 有 
如 下 三 个 。 
口 ignoreComments: 表示 解析 器 应 该 忽略 标记 中 的 注释 。 默 认 设置 为 true。 
口 1ignoreProcessingInstructions :表示 解析 器 应 该 忽略 标记 中 的 处 理 指 邻 。 默 认 设置 为 true。 
口 ijgnoreWhitespace: 表示 解析 器 应 该 忽略 元 素 间 的 空格 ， 而 不 是 创建 表现 这 些 空格 的 文本 节 
点 。 默 认 设 置 为 true。 
这 三 个 设置 会 影响 对 传人 到 xML 构造 函数 中 的 字符 串 以 及 xML 字面 量 的 解析 。 
另外 ， 与 XML 数据 序列 化 相关 的 设置 有 如 下 两 个 。 
口 prettyIndent: 表示 在 序列 化 XML 时 ， 每 次 缩 进 的 空格 数量 。 默 认 值 为 2。 
口 prettyPrinting: 表示 应 该 以 方便 人 类 认 读 的 方式 输出 XML ， 即 每 个 元 素 重 起 一 行 ， 而 且 子 
元 素 都 要 缩 进 。 默认 设置 为 true。 
这 两 个 设置 将 影响 到 tostring() 和 toxMLString() 的 输出 。 
以 上 五 个 设置 都 保存 在 settings 对 象 中 ,通过 XML 构造 函数 的 settings () 方 法 可 以 取得 这 个 对 
象 ， 如 下 所 示 。 



























































Var settings = XML.settings(); 
) alert (settings.ignoreWhitespace); //true 
alert (settings.ignoreComments); //true 


ParsingAndSerializationExample01.htm 


通过 向 setsettings() 方 法 中 传人 包含 全 部 5 项 设置 的 对 象 ， 可 以 一 次 性 指定 所 有 设置 。 在 需要 
临时 改变 设置 的 情况 下 ， 这 种 设置 方式 非常 有 用 ， 如 下 所 示 。 








var settings = XML .settings () ; 
XML .PrettyInaent = 8; 
XML . 1gnoreComments = false; 
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/ /执行 菜 些 处 理 
XML.setSettings (settings); // 重 置 前 面 的 设置 


而 使 用 aefaultSsettings () 方 法 则 可 以 取得 一 个 包含 默认 设置 的 对 象 , 因此 任何 时 候 都 可 以 使 用 
下 面 的 代码 重 置 设置 。 


XML .setSettings (XML .defaultSettings () ) ; 
19.2.6 ”命名 空间 


E4X 提供 了 方便 使 用 命名 空间 的 特性 。 前 面 曾 经 讨论 过 , 使 用 namspace () 方 法 可 以 取得 与 特定 前 
级 对 应 的 Namespace 对 象 。 而 通过 使 用 setNamespace () 并 传人 Namespace 对 象 ， 也 可 以 为 给 定 元 
素 设置 命 名 空间 。 来 看 下 面 的 例子 。 
Var messages = <messages> 
<message>Hello world!</message> 


</messages>; 
messages.setNamespace (new Namespace ("wrox", "http://ww.wrox.com/")); 


调用 setNamespace () 方 法 后 ， 相 应 的 命名 空间 只 会 应 用 到 调用 这 个 方法 的 元 素 。 此 时 ， 序 列 化 


messages 变量 会 得 到 如 下 结果 。 






















































































<wrox:messages xmilns:wrox="http://www.wrox.com/"> 
<message>Hello world!</message> 
</wrox:messages> 


可 见 ， 由 于 调用 了 setNamespace() 方 法 ，<messages/> 元 素 有 了 wrox 命名 空间 前 级 ， 而 
<message/> 元 素 则 没有 变化 。 

如 果 只 想 添加 一 个 命名 空间 声明 ， 而 不 想 改变 元 素 ， 可 以 使 用 addNamespace () 方 法 并 传人 
Namespace 对 象 ， 如 下 面 的 例子 所 示 。 


messages.addNamespace (new Namespace ("wrox", "http://www.wrox.com/")); 
在 将 这 行 代 码 应 用 于 原先 的 <messages/> 元 素 时 ， 就 会 创建 如 下 所 示 的 XML 结构 。 


<messages xmlns:wrox="http://www.wrox.com/"> 
<message>Hello world!</message> 
</messages> 


调用 removeNamespace() 方 法 并 传人 Namespace 对 象 ， 可 以 移 除 表 示 特 定 命名 空间 前 级 和 URI 
的 命名 空间 声明 ; 注意 ， 必 须 传人 丝毫 不 差 的 表示 命名 空间 的 Namespace 对 象 。 例 如 : 

messages.removeNamespace (new Namespace ("wrox", "http://www.wrox.com/")); 

这 行 代码 可 以 移 除 wrox 命名 空间 。 不 过 ，3 引 用 前 级 的 限定 名 不 会 受 影响 。 

有 两 个 方法 可 以 返回 与 节点 相关 的 Namespace 对 象 的 数组 : namespaceDeclarations() 和 
inScopeNamespaces () 。 前 者 返回 在 给 定 节 点 上 声明 的 所 有 命名 空间 的 数组 ， 后 者 返回 位 于 给 定 节点 
作用 域 中 ( 即 包括 在 节点 自身 和 祖先 元 素 中 声明 的 ) 所 有 命名 空间 的 数组 。 如 下 面 的 例子 所 示 : 









































Var messages = <messages xmlns:wrox="http://www.wrox.com/"> 
<message>Hello world!</message> 
</messages>; 
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alert (messages.namespaceDeclarations()); //"http://www.wrox.com" 

alert (messages.inScopeNamespaces ()); //",http://www.wrox.com" 

alert (messages.message.namespaceDeclarations()); FE 

alert (messages .message.inScopeNamespaces ()); //",http://www.wrox.com" 


这 里 ，<messages/> 元 素 在 调用 namespaceDeclarations () 时 ,会 返回 包含 一 个 命名 空间 的 数组 ， 
而 在 调用 inscopeNamespaces () 时 ， 则 会 返回 包含 两 个 命名 空间 的 数组 。 作 用 域 中 的 这 两 个 命名 空间 ， 
分 别 是 默认 命名 空间 ( 由 空 字 符 串 表示 ) 和 wrox 命名 空间 。 在 <message/> 元 素 上 调用 这 些 方法 时 ， 
namespaceDeclarations () ， 会 返回 一 个 空 数组 ， 而 inscopeNamespaces () 方 法 返回 的 结果 与 在 
<messages/> 元 素 上 调用 时 的 返回 结果 相同 。 
使 用 双 冒 号 ( : : ) 也 可 以 基于 Namespace 对 象 来 查询 XML 结构 中 具有 特定 命名 空间 的 元 素 。 例 
如 ， 要 取得 包含 在 wrox 命名 空间 中 的 所 有 <message/> 元 素 ， 可 以 参考 下 面 的 代码 。 




















Var messages = <messages xmlns:wrox="http://www.wrox.com/"> 
<wrox:message>Hello world!</message> 

</messages>; 

Var wroxNS = new Namespace ("wrox", "http://www.wrox.com/"); 


Var wroxMessages = messages .wroxNS: :message; 

这 里 的 双 骨 号 表示 返回 的 元 素 应 该 位 于 其 中 的 命名 空间 。 注 意 ， 这 里 使 用 的 是 JavaScript 变量 ， 而 
不 是 命名 空间 前 绥 。 

还 可 以 为 某 个 作用 域 中 的 所 有 XML 对 象 设 置 默认 命名 空间 。 为 此 ,要 使 用 default xml namespace 
语句 ， 并 将 一 个 Namespace 对 象 或 一 个 命名 空间 URI 作为 值 赋 给 它 。 例 如 : 


default xml namespace = "http://www.wrox.com/"; 























function doSomething(){ 


// 只 为 这 个 函数 设置 默认 的 命名 空间 
default xml namespace = new Namespace("your", "http://ww.yourdomain.com"); 


} 


在 dosomething () 函数 体内 设置 默认 命名 空间 并 不 会 改变 全 局 作用 域 中 的 默认 XML 命名 空间 。 
在 给 定 作用 域 中 ， 当 所 有 XML 数据 都 需要 使 用 特定 的 命名 空间 时 ， 就 可 以 使 用 这 个 语句 ， 从 而 避免 多 
次 引用 命名 空间 的 麻烦 。 


19.3 其 他 变化 


为 了 与 ECMAScript 做 到 无 颖 集成 ，E4X 也 对 语言 基础 进行 了 一 些 修 改 。 其 中 之 一 就 是 引入 了 
for-each-in 循环 ， 以 便 迭 代 遍 历 每 一 个 属性 并 返回 属性 的 值 ， 如 下 面 的 例子 所 示 。 


var employees = <employees> 
“9 <employee position="Software Engineer"> 
<name>Nicholas C. Zakas</name> 
</employee> 
<employee position="Salesperson"> 
<name>Jim Smith</name> 
</employee> 
</employees>; 
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for each (var child in employees)t{ 


alert (child.toXMLString()); 
} 


在 这 个 例子 的 for-each-in 循环 中 ， 
其 中 包括 注释 、 人 处 理 指令 和 /或 文本 节点 。 要 想 返 
对 和 象 进行 操作 ， 如 下 所 示 。 


for each (var attribute in employees.@*){ // 遍 历 特 性 
alert (attribute); 


<employees/> 的 每 个 子 节 














} 


ForEachInExample01.htm 


点 会 依次 被 赋值 给 chila 变量 ， 
回 特性 节点 , 则 需要 对 一 个 由 特性 节点 组 成 的 XMLList 


虽然 for-each-in 循环 是 在 E4X 中 定义 的 ， 但 这 个 语句 也 可 以 用 于 常规 的 数组 和 对 象 ， 例 如 : 


var colors ["red", "green", "blue"]; 
for each(var color in colors)t 


alert (color); 


3} 


对 于 数组 ，for-each-in 循环 会 
的 值 。 

E4X 还 添加 了 一 个 全 局 函数 ， 名 叫 isxMLName () 。 这 个 
元 素 或 特性 的 有 效 内 部 名 称 的 情况 下 返回 true。 在 使 用 未 知 字符 串 构 如 


返回 数组 中 的 每 一 项 。 对 于 非 xM 
属性 









































以 为 开发 人 员 提 供 方便 。 来 看 下 面 的 例子 。 
alert (isxXMLName ("color")); //true 
alert (isXMLName ("hello world")); //false 




















如 果 你 不 确定 某 个 字符 串 的 来 源 ， 而 又 需要 将 该 字符 串 用 作 一 个 内 
先 通过 isxMLName () 检测 一 下 是 否 有 效 ， 以 防 发 生 错 误 。 

E4X 对 标准 ECMAScript 的 最 后 一 个 修改 是 typeof 操作 符 。 在 对 

个 操作 符 时 , typeof 返回 字符 串 "xml"。 但 在 对 其 他 对 象 使 用 这 
例如 : 

Var Xml = new XML(); 

var list = new XMLList(); 

var object = {}; 

alert (typeof xml); //"xml" 

alert (typeof list); A mL 

alert (typeof object); //"object" 


多 数 情况 下 ， 都 没有 必要 区 分 XML 和 xMLList 对 象 。 在 E4X 中 ， 
类 型 ， 因 而 也 无 法 通过 instanceof 操作 符 来 将 它们 区 分 开 来 。 


19.4 全 面 启用 E4X 








鉴于 E4X 在 很 多 方 本 
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函数 接受 一 


文 个 操作 符 时 , 返回 


给 标准 JavaScript 带 来 了 不 同 ， 因 此 Firefox 在 默认 情况 下 只 启用 E4X 中 与 


ForEachInExample01.htm 


L 对 象 ， 这 个 循环 返回 对 象 每 个 


个 字符 串 ， 并 在 这 
EXML 数据 结构 时 ,这 


个 字符 串 是 
这 个 函数 可 





部 名 称 , 那么 最 好 在 使 用 它 之 前 


XML 对 象 或 XMLList 对 象 使 用 
回 的 都 是 "object'" ， 








这 两 个 对 象 都 被 看 成 是 基本 数据 
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他 代码 能 够 相安 无 事 的 那些 特性 。 要 想 完 整地 启用 E4X， 需 要 将 <script> 标 签 的 type 特性 设置 为 
"text/javascript;e4x=1"， 例 如: 








<script type="text/javascript;e4x=1" src="e4x file.js"></script> 


在 打开 这 个 “开关 ”之 后 ， 就 会 全 面 启 用 E4X， 从 而 能 够 正确 地 解析 藤 入 在 E4X 字面 量 中 的 注释 
和 CData 片段 。 在 没有 完整 启用 E4X 的 情况 下 使 用 注释 和 /或 CData 片段 会 导致 语法 错误 。 








19.5 小结 


E4X 是 以 ECMA-357 标准 的 形式 发 布 的 对 ECMAScript 的 一 个 扩展 。E4X 的 目的 是 为 操作 XML 数 
据 提供 与 标准 ECMAScript 更 相近 的 语法 。E4X 具有 下 列 特征 。 
口 与 DOM 不 同 ，E4X 只 用 一 个 类 型 来 表示 XML 中 的 各 种 节点 。 
口 XML 对 象 中 封装 了 对 所 有 节点 都 有 用 的 数据 和 行为 。 为 表现 多 个 节点 的 集合 ， 这 个 规范 定义 了 
XMLList 类 型 。 
口 男 外 两 个 类 型 ，Namespace 和 QName， 分 别 表现 命名 空间 和 限定 名 。 
为 便于 查询 XML 结构 ，E4X 还 修改 了 标准 了 的 ECMAScript 语 法， 修改 的 地 方 如 下 。 
口 使 用 两 个 点 〈 . . ) 表示 要 匹配 所 有 后 代 元 素 ， 使 用 8 字符 表示 应 该 返回 一 或 多 个 特性 。 
口 星 号 字符 (* ) 是 一 个 通配符 ， 可 以 匹配 任意 类 型 的 节点 。 
口 所 有 这 些 查 询 都 可 以 通过 一 组 执行 相同 操作 的 方法 来 实现 。 
到 2011 年 底 ,Firefox 还 是 唯一 一 个 支持 E4X 的 浏览 器 。 尽 管 没有 其 他 浏览 器 提供 商 承诺 会 实现 E4X， 
但 在 服务 器 上 ， 由 于 BEA Workshop for WebLogic 和 Yhaoo! YQL 的 推动 ，E4X 已 经 取得 了 不 小 的 成 功 。 
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s20 > 
JSON 


本 章 内 容 

口 理解 JSON 语法 
口 解析 JSON 

口 序列 化 JSON 








马克 经 有 一 段 时 间 , XML 是 互联 网 上 传输 结构 化 数据 的 事实 标准 。Web 服务 的 第 一 次 浪潮 很 大 程 

月 度 上 都 是 建立 在 XML 之 上 的 , 突出 的 特点 是 服务 器 与 服务 器 间 通 信 。 然而 , 业界 一 直 不 乏 质 
疑 XML 的 声音 。 不 少 人 认为 XML 过 于 烦琐 、 宛 长 。 为 解决 这 个 问题 ， 也 涌现 了 一 些 方案 。 不 过 ，Web 
的 发 展 方向 已 经 改变 了 。 

2006 年 ， Douglas Crockford 把 JSON ( JavaScript Object Notation ，JavaScript 对 象 表示 法 ) 作为 IETF 
RFC 4627 提交 给 IETF , 而 JSON 的 应 用 早 在 2001 年 就 已 经 开始 了 。JSON 是 JavaScript 的 一 个 严格 的 子 
集 , 利 用 了 JavaScript 中 的 一 些 模 式 来 表示 结构 化 数据 。Crockford 认为 与 XML 相 比 ,JSON 是 在 JavaScript 
中 读 写 结构 化 数据 的 更 好 的 方式 。 因 为 可 以 把 JSON 直接 传 给 eval () ， 而 且 不 必 创 建 DOM 对 象 。 

关于 JSON, 最 重要 的 是 要 理解 它 是 一 种 数据 格式 , 不 是 一 种 编程 语言 。 虽然 具有 相同 的 语法 形式 ， 
但 JSON 并 不 从 属于 JavaScript。 而 且 ， 并 不 是 只 有 JavaScript 才 使 用 JSON ， 毕 竟 JSON 只 是 一 种 数据 
格式 。 很 多 编程 语言 都 有 针对 JSON 的 解析 器 和 序列 化 器 。 


20.1 语法 


JSON 的 语法 可 以 表示 以 下 三 种 类 型 的 值 。 
口 简单 值 : 使 用 与 JavaScript 相同 的 语法 ， 可 以 在 JSON 中 表示 字符 串 、 数 值 、 布 尔 值 和 nul1。 
但 JSON 不 支持 JavaScript 中 的 特殊 值 undefined。 
口 对 象 : 对 象 作为 一 种 复杂 数据 类 型 ， 表 示 的 是 一 组 无 序 的 键 值 对 儿 。 而 每 个 键 值 对 儿 中 的 值 可 
以 是 简单 值 ， 也 可 以 是 复杂 数据 类 型 的 值 。 
口 数组 : 数组 也 是 一 种 复杂 数据 类 型 ， 表 示 一 组 有 序 的 值 的 列表 ， 可 以 通过 数值 索引 来 访问 其 中 
的 值 。 数 组 的 值 也 可 以 是 任意 类 型 简单 值 、 对 象 或 数组 。 

JSON 不 支持 变量 、 函 数 或 对 象 实例 , 它 就 是 一 种 表示 结构 化 数据 的 格式 , 虽然 与 JavaScript 中 表示 

数据 的 某 些 语法 相同 ,但 它 并 不 局 限于 JavaScript 的 范畴 。 


20.1.1 简单 值 
最 简单 的 JSON 数据 形式 就 是 简单 值 。 例 如 ， 下 面 这 个 值 是 有 效 的 JSON 数据 : 
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5 
这 是 JSON 表示 数值 5 的 方式 。 类 似 地 ， 下 面 是 JSON 表示 字符 串 的 方式 : 
"Hello world!" 


JavaScript 字 符 串 与 JSON 字符 串 的 最 大 区 别 在 于 ，JSON 字符 串 必须 使 用 双 引 号 ( 单 引号 会 导致 语 




















法 错误 )。 


布尔 值 和 null 也 是 有 效 的 JSON 形式 。 但 是 , 在 实际 应 用 中 , JSON 更 多 地 用 来 表示 更 复杂 的 数据 


结构 ， 而 简单 值 只 是 整个 数据 结构 中 的 一 部 分 。 


20. 


, 


1.2” ”对象 


JSON 中 的 对 象 与 JavaScript 字面 量 稍微 有 一 些 不 同 。 下 面 是 一 个 JavaScript 中 的 对 象 字 耳 











要 























var person = { 
name: "Nicholas", 
age: 29 


这 虽然 是 开发 人 员 在 JavaScript 中 创建 对 象 字 面 量 的 标准 方式 ,但 JSON 中 的 对 象 要 求 给 属性 加 引 

















实际 上 ， 在 JavaScript 中 ， 前 面 的 对 象 字面 量 完全 可 以 写成 下 面 这 样 : 
var object = { 

"name": "Nicholas", 

"age": 29 


} 
JSON 表示 上 述 对 象 的 方式 如 下 : 
{ 





"name": "Nicholas", 
"age": 29 
} 


与 JavaScript 的 对 象 字 面 量 相 比 ，JSON 对 象 有 两 个 地 方 不 一 样 。 首 先 ， 没 有 声明 变量 ( JSON 中 没 





有 变量 的 概念 )。 其 次 ， 没 有 末尾 的 分 号 ( 因为 这 不 是 JavaScript 语句 ， 所 以 不 需要 分 号 )。 再 说 一 遍 ， 
对 象 的 属性 必须 加 双 引 号 ， 这 在 JSON 中 是 必需 的 。 属 性 的 值 可 以 是 简单 值 ， 也 可 以 是 复杂 类 型 值 ， 
此 可 以 像 下 面 这 样 在 对 象 中 骨 和 对 象 : 

















{ 
"name": "Nicholas", 
"age": 29, 
"SchodL"s .{ 
"name": "Merrimack College", 
"location": "North Andover, MA" 


} 


这 个 例子 在 顶级 对 象 中 杏 入 了 学 校 ("school" ) 信息 。 虽然 有 两 个 "name" 属 性 , 但 由 于 它们 分 别 














属于 不 同 的 对 象 ， 因 此 这 样 完 全 没有 问题 。 不 过 ， 同 一 个 对 象 中 绝对 不 应 该 出 现 两 个 同名 属性 。 








FE 
象 局 





与 JavaScript 不 同 ,，JSON 中 对 象 的 属性 名 任何 时 候 都 必须 加 双 引 号 。 手 工 编写 JSON 时 ， 忘 了 给 对 
性 名 加 双 引 号 或 者 把 双 引 号 写成 单 引号 都 是 常见 的 错误 。 
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20.1.3 ”数组 
JSON 中 的 第 二 种 复杂 数据 类 型 是 数组 。JSON 数组 采用 的 就 是 JavaScript 中 的 数组 字面 量 形式 。 例 
如 ， 下 面 是 JavaScript 中 的 数组 字面 量 : 
var values = [25, "hi", truel]; 
在 JSON 中 ， 可 以 采用 同样 的 语法 表示 同一 个 数组 : 
| 


同样 要 注意 , JSON 数组 也 没有 变量 和 分 号 。 把 数组 和 对 象 


例如 : 
[ 


itle": "Professional JavaScript", 
thors"s [ 
"Nicholas C. Zakas" 
tions 3, 

year: 2011 


itle": "Professional JavaScript", 
thors": [ 
"Nicholas C. Zakas" 
Elionm: 2 

year: 2009 


tle": "Professional Ajax", 
thorss 

"Nicholas C. Zakas", 
"Jeremy McPeak", 

"Joe Fawcett" 





1 
edition: 2， 
Year: 2008 


"title": "Professional Ajax", 
"authors": [ 
"Nicholas C. Zakas", 
"Jeremy McPeak", 
"Joe Fawcett" 


tion: 1, 
year: 2007 


itle": "Professional JavaScript", 
EOESY S| 


"Nicholas C. Zakas" 





ELOm: 1; 


结合 





起 来 ,可 以 构成 更 复杂 的 数据 


洒 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


20.2 ”解析 与 序列 化 565 





year: 2006 
} 
] 


这 个 数组 中 包含 一 些 表示 图 书 的 对 象 。 每 个 对 象 都 有 几 个 属性 , 其 中 一 个 属性 是 "authors", 这 个 
属性 的 值 又 是 一 个 数组 。 对 象 和 数组 通常 是 JSON 数据 结构 的 最 外 层 形式 〈 当然 ,这 不 是 强制 规定 的 )， 
利用 它们 能 够 创造 出 各 种 各 样 的 数据 结构 。 


20.2 ”解析 与 序列 化 


JSON 之 所 以 流行 ， 拥 有 与 JavaScript 类 似 的 语法 并 不 是 全 部 原因 。 更 重要 的 一 个 原因 是 ， 可 以 把 
JSON 数据 结构 解析 为 有 用 的 JavaScript 对 象 。 与 XML 数据 结构 要 解析 成 DOM 文档 而 且 从 中 提取 数据 
极为 碎 烦 相 比 ，JSON 可 以 解析 为 JavaScript 对 象 的 优势 极其 明显 。 就 以 上 一 节 中 包含 一 组 图 书 的 JSON 
数据 结构 为 例 ， 在 解析 为 JavaScript 对 象 后 ， 只 需要 下 面 一 行 简单 的 代码 就 可 以 取得 第 三 本 书 的 书 名 : 

books [2] .title 

当然 ,这 里 是 假设 把 解析 JSON 数据 结构 后 得 到 的 对 象 保存 到 了 变量 books 中 。 再 看 看 下 面 在 DOM 
结构 中 查找 数据 的 代码 : 

doc.getElementsByTagName ("book") [2] .getAttribute("title") 

看 看 这 些 多 余 的 方法 调用 ， 就 不 难 理解 为 什么 JSON 能 得 到 JavaScript 开发 人 员 的 热烈 欢迎 了 。 从 
此 以 后 ，JSON 就 成 了 Web 服务 开发 中 交换 数据 的 事实 标准 。 




































































20.2.1 JSON 对 象 


早期 的 JSON 解析 器 基本 上 就 是 使 用 JavaScript 的 eval () 函数 。 由 于 JSON 是 JavaScript 语法 的 子 
集 ， 因 此 eval () 函数 可 以 解析 、 解 释 并 返回 JavaScript 对 象 和 数组 。ECMAScript 5 对 解析 JSON 的 行 
为 进行 规范 ， 定 义 了 全 局 对 象 rsSoN。 支 持 这 个 对 象 的 浏览 器 有 IE 8+ 、Firefox 3.5+、Safari 4+ 、Chrome 
和 Opera 10.5+。 对 于 较 早 版 本 的 浏览 器 ,可 以 使 用 一 个 shim:https:/github.com/douglascrockford/JSON-js。 
在 旧版 本 的 浏览 器 中 ， 使 用 eval () 对 JSON 数据 结构 求 值 存在 风险 ， 因 为 可 能 会 执行 一 些 恶 意 代码 。 
对 于 不 能 原生 支持 JSON 解析 的 浏览 器 ， 使 用 这 个 shim 是 最 佳 选择 。 

JSON 对 象 有 两 个 方法 : stringify() 和 parse()。 在 最 简单 的 情况 下 ， 这 两 个 方法 分 别 用 于 把 
JavaScript 对 象 序列 化 为 JSON 字符 串 和 把 JSON 字符 串 解 析 为 原生 JavaScript 值 。 例 如 : 

var book = { 

“9 title: "Professional JavaScript", 


authors: |[ 
"Nicholas C. Zakas" 



































]; 
edition: 3, 
year: 2011 
J} 
var jsonText = JSON.stringify(book); 


JSONStringifyExample01.htm 
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这 个 例子 使 用 JSON. stringify() 把 一 个 JavaScript 对 象 序列 化 为 一 个 JSON 字符 串 ， 然 后 将 它 保 
存在 变量 jsonText 中 。 上 默认 情 况 下 , JSON. stringify() 输 出 的 JSON 字符 串 不 包含 任何 空格 字符 或 
缩 进 ， 因 此 保存 在 jsonText 中 的 字符 串 如 下 所 示 : 


{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3, 
"year":2011} 


在 序列 化 JavaScript 对 象 时 ， 所 有 函数 及 原型 成 员 都 会 被 有 意 忽略 ， 不 体现 在 结果 中 。 此 外 ， 值 为 
undefined 的 任何 属性 也 都 会 被 跳 过 。 结 果 中 最 终 都 是 值 为 有 效 JSON 数据 类 型 的 实例 属性 。 

将 JSON 字符 串 直 接 传 递 给 JSON .parse() 就 可 以 得 到 相应 的 JavaScript 值 。 例 如 ， 使 用 下 列 代码 
就 可 以 创建 与 book 类 似 的 对 象 : 


Var bookCopy = JSON.parse (jsonText); 


注意 ， 虽 然 book 与 pookCopy 具有 相同 的 属性 ， 但 它们 是 两 个 独立 的 、 没 有 任何 关系 的 对 象 。 
如 果 传 给 JsoN.parse () 的 字符 串 不 是 有 效 的 JSON ， 该 方法 会 抛 出 错误 。 












































20.2.2 ”序列 化 选项 


实际 上 ，JsoN.stringify() 除 了 要 序列 化 的 JavaScript 对 象 外 ， 还 可 以 接收 另外 两 个 参数 ， 这 两 
个 参数 用 于 指定 以 不 同 的 方式 序列 化 JavaScript 对 象 。 第 一 个 参数 是 个 过 滤器 ， 可 以 是 一 个 数组 ， 也 可 
是 一 个 函数 ; 第 二 个 参数 是 一 个 选项 ， 表 示 是 否 在 JSON 字符 串 中 保留 缩 进 。 单 独 或 组 合 使 用 这 两 个 
参数 ， 可 以 更 全 面 深 入 地 控制 JSON 的 序列 化 。 

1. 过 滤 结 果 

如 果 过 滤器 参数 是 数组 ,那么 gsoN. stringify() 的 结果 中 将 只 包含 数组 中 列 出 的 属性 。 来 看 下 
面 的 例子 。 


Var book = { 











汪 








"title": "Professional JavaScript", 
"authors": [ 
"Nicholas C. Zakas" 
ji 
edition: 3, 
year: 2011 
了 


var jsonText = JSON.stringify(book, ["title", "edition"]); 

JSONStringifyExample01.htm 

JSON. stringify () 的 第 二 个 参数 是 一 个 数组 ,其 中 包含 两 个 字符 串 : "title" 和 "edition"。 这 
两 个 属性 与 将 要 序列 化 的 对 象 中 的 属性 是 对 应 的 , 因此 在 返回 的 结果 字符 串 中 , 就 只 会 包含 这 两 个 属性 : 

{"title":"Professional JavaScript","edition":3} 

如 果 第 二 个 参数 是 函数 ， 行 为 会 稍 有 不 同 。 传 人 的 函数 接收 两 个 参数 ， 属 性 ( 键 ) 名 和 属性 值 。 根 
据 属 性 ( 键 ) 名 可 以 知道 应 该 如 何 处 理 要 序列 化 的 对 象 中 的 属性 。 属 性 名 只 能 是 字符 串 ， 而 在 值 并 非 键 
值 对 儿 结 构 的 值 时 ， 键 名 可 以 是 空 字符 串 。 

为 了 改变 序列 化 对 象 的 结果 ， 函 数 返 回 的 值 就 是 相应 键 的 值 。 不 过 要 注意 ， 如 果 函 数 返 回 了 
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undefined， 那 么 相应 的 属性 会 被 忽略 。 还 是 看 一 个 例子 吧 。 


var book = { 
"title": "Professional JavaScript", 
中 "authors"™: [ 
"Nicholas C. Zakas" 








J 

edition: 3 

year: 2011 
] 


var jsonText = JSON.stringify(book, function(key, value)t{ 
switch(key){ 
case "authors": 
return value.join(",") 


Case "year": 
return 5000; 


case "edition": 
return undefined; 


default: 
return value; 


JSONStringifyExample02.htm 

这 里 ， 函 数 过 滤器 根据 传人 的 键 来 决定 结果 。 如 果 键 为 "authors" ， 就 将 数组 连接 为 一 个 字符 串 ; 

如 果 键 为 "year"， 则 将 其 值 设置 为 5000; 如 果 键 为 "edition"， 通 过 返回 undefined 删除 该 属性 。 

最 后 ， 一 定 要 提供 aefault 项 ， 此 时 返回 传人 的 值 ， 以 便 其 他 值 都 能 正常 出 现在 结果 中 。 实 际 上 ， 第 

一 次 调用 这 个 函数 过 滤器 ， 传 人 的 键 是 一 个 空 字符 串 ， 而 值 就 是 pook 对象。 序列 化 后 的 JSON 字符 串 
如 下 所 示 : 




















{"title":"Professional JavaScript","authors":"Nicholas C. Zakas","year":5000} 

要 序列 化 的 对 象 中 的 每 一 个 对 象 都 要 经 过 过 滤器 , 因此 数组 中 的 每 个 带 有 这 些 属性 的 对 象 经 过 过 滤 
之 后 ， 每 个 对 象 都 只 会 包含 "title"、 ee 

Firefox 3.5 和 3.6 对 JSoN.stringify() 的 实现 有 一 个 bug， 在 将 函数 作为 该 方法 的 第 二 个 参数 时 
这 个 bug 就 会 出 现 ， 即 这 个 函数 只 能 作为 过 滤器 : 返回 undefined 意味 着 要 跳 过 某 个 属性 ， 而 返回 其 
他 任何 值 都 会 在 结果 中 包含 相应 的 属性 。Firefox 4 修复 了 这 个 bug。 

2. 字符 串 缩 进 

JSON .stzingify() ee 如 果 这 个 参数 是 一 个 数 
值 ， 那 它 表示 的 是 每 个 级 别 缩 进 的 空格 数 。 例 如 ， 要 在 每 个 级 别 缩 进 4 个 空格 ,可 以 这 样 写 代码 : 


Var book = { 


CY) "title": "Professional JavaScript", 
"authors": [ 
"Nicholas C. Zakas" 


























] ， 
edition: 3, 
year: 2011 
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Var jsonText = JSON.stringify(book, null, 4); 
JSONStringifyExample03.htm 


保存 在 jsonText 中 的 字符 串 如 下 所 示 : 
上 





"title": "Professional JavaScript", 
"authors": [ 
"Nicholas C. Zakas" 
] 2 
"edition.™ 3, 
"year": 2011 
} 











不 知道 读者 注意 到 没有 , JSON. stringify() 也 在 结果 字符 串 中 插入 了 换行 符 以 提高 可 读 性 。 只 要 
传人 有 效 的 控制 缩 进 的 参数 值 , 结果 字符 串 就 会 包含 换行 符 。( 只 缩 进而 不 换行 意义 不 大 。 ) 最 大 缩 进 空 
格 数 为 10， 所 有 大 于 10 的 值 都 会 自动 转换 为 10。 

如 果 缩 进 参数 是 一 个 字符 串 而 非 数值 ， 则 这 个 字符 串 将 在 JSON 字符 串 中 被 用 作 缩 进 字符 〈 不 再 使 
用 空格 )。 在 使 用 字符 串 的 情况 下 ， 可 以 将 缩 进 字符 设置 为 制 表 符 ， 或 者 两 个 得 划 线 之 类 的 任意 字符 。 


Var jsonText = JSON.stringifty(book，nul1，"m - -"); 
这 样 ，jsonText 中 的 字符 串 将 变 成 如 下 所 示 : 
{ 


-=-"title": "Professional JavaScript", 
--"authors": [ 

----"Nicholas C. Zakas" 

= 

--"edition": 3, 

--"year": 2011 

} 


















































缩 进 字符 串 最 长 不 能 超过 10 个 字符 长 。 如 果 字 符 串 长 度 超过 了 10 个 ,结果 中 将 只 出 现 前 10 个 字 
符 。 

3. toJSON() 方 法 

有 时 候 ，JSoN.stringify() 还 是 不 能 满足 对 某 些 对 象 进行 自 定 义 序列 化 的 需求 。 在 这 些 情况 下 ， 
可 以 给 对 象 定义 toJsoN () 方 法 ,返回 其 自身 的 JSON 数据 格式 ,原生 Date 对 象 有 一 个 toJSON () 方 法 ， 
能 够 将 JavaScript 的 Date 对 象 自动 转换 成 ISO 8601 日 期 字符 串 ( 与 在 Date 对 象 上 调用 toTSostring() 
的 结果 完全 一 样 )。 

可 以 为 任何 对 象 添加 toJsoN() 方 法 ， 比 如 : 


Var book = { 


























"title": "Professional JavaScript"， 
"authors™: |[ 
"Nicholas C. Zakas" 
]; 
edition: 3, 
year: 2011, 
toJSON: function()t{ 
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return this.title; 
上 


var jsonText = JSON.stringify(book); 


JSONSitringifyExample05.htm 


以 上 代码 在 book 对 象 上 定义 了 一 个 toJSON () 方 法 , 该 方法 返回 图 书 的 书 名 。 与 Date 对 象 类 似 ， 
这 个 对 象 也 将 被 序列 化 为 一 个 简单 的 字符 串 而 非 对 象 。 可 以 让 toJsoN() 方 法 返回 任何 值 ， 它 都 能 正常 
工作 。 比 如 ， 可 以 让 这 个 方法 返回 undefined， 此 时 如 果 包 含 它 的 对 象 脱 入 在 男 一 个 对 象 中 ， 会 导致 
它 的 值 变 成 au11， 而 如 果 它 是 顶级 对 象 ， 结 果 就 是 undefined。 

toJSON() 可 以 作为 函数 过 滤器 的 补充 ， 因 此 理解 序列 化 的 内 部 顺序 十 分 重要 。 假 设 把 一 个 对 象 传 
人 JSON.stringify()， 序列 化 该 对 象 的 顺序 如 下 。 

(1) 如 果 存 在 toJsoN () 方 法 而 且 能 通过 它 取得 有 效 的 值 ， 则 调用 该 方法 。 否 则 ， 返 回 对 象 本 身 。 

(2) 如 果 提 供 了 第 二 个 参数 ， 应 用 这 个 函数 过 滤器 。 传 人 函数 过 滤器 的 值 是 第 (1) 步 返回 的 值 。 

(3) 对 第 (2) 步 返回 的 每 个 值 进行 相应 的 序列 化 。 

(4) 如 果 提 供 了 第 三 个 参数 ， 执 行 相应 的 格式 化 。 

无 论 是 考虑 定义 toJSON () 方 法 ， 还 是 考虑 使 用 困 数 过 滤器 ， 亦 或 需要 同时 使 用 两 者 ， 理 解 这 个 顺 
序 都 是 至 关 重 要 的 。 


20.2.3 ”解析 选项 


JSON.parse() 方 法 也 可 以 接收 男 一 个 参数 ， 该 参数 是 一 个 函数 ， 将 在 每 个 刍 值 对 儿 上 调用 。 为 了 
区 别 JSON. stringify() 接 收 的 蔡 换 ( 过滤 ) 函数 (replacer )， 这 个 函数 被 称 为 还 原 函 数 (reviver )， 
但 实际 上 这 两 个 函数 的 签名 是 相同 的 一 一 它们 都 接收 两 个 参数 ， 一 个 键 和 一 个 值 ， 而 且 都 需要 返回 一 
个 值 。 

如 果 还 原 函 数 返回 undefined， 则 表示 要 从 结果 中 删除 相应 的 键 ; 如 果 返 回 其 他 值 ， 则 将 该 值 播 
人 到 结果 中 。 在 将 日 期 字符 串 转 换 为 Date 对 象 时 ， 经 常 要 用 到 还 原 函 数 。 例 如 : 

var book = { 

CB "title": "Professional JavaScript", 


"authores"™ | 
"Nicholas C. Zakas" 

































































]; 
edition: 3, 

year: 2011, 

releaseDate: new Date(2011, 11, 1) 
二 


var jsonText = JSON.stringify(book); 


Var bookCopy = JSON.parse(jsonText, function(key, value)t{ 


if (key == "releaseDate")t{ 
return new Date(value); 
} else { 


return value; 


} 
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}); 


alert (bookCopy .releaseDate.getFullYear()); 


JSONParseExample02.htm 


以 上 代码 先是 为 book 对 象 新 增 了 一 个 releaseDate 属性 ,该 属性 保存 着 一 个 Date 对 象 。 这 个 
对 象 在 经 过 序列 化 之 后 变 成 了 有 效 的 JSON 字符 串 ， 然 后 经 过 解析 又 在 bookcopy 中 还 原 为 一 个 Date 
对 象 。 还 原 函 数 在 遇 到 "releaseDate" 键 时 ,会 基于 相应 的 值 创 建 一 个 新 的 Date 对 象 。 结 果 就 是 
bookCopy .releaseDate 属性 中 会 保存 一 个 Date 对 象 。 正 因为 如 此 ， 才 能 基于 这 个 对 象 调 用 
getFullYear () 方 法 。 


20.3 小结 


JSON 是 一 个 轻 量 级 的 数据 格式 ， 可 以 简化 表示 复杂 数据 结构 的 工作 量 。JSON 使 用 JavaScript 语法 
的 子 集 表示 对 象 、 数 组 、 字 符 串 、 数 值 、 布 尔 值 和 null。 即 使 XML 也 能 表示 同样 复杂 的 数据 结果 , 但 
JSON 没有 那么 烦琐 ,而 且 在 JavaScript 中 使 用 更 便利 。 

ECMAScript 5 定义 了 一 个 原生 的 rsoN 对 象 ， 可 以 用 来 将 对 象 序列 化 为 JSON 字符 串 或 者 将 JSON 
数据 解析 为 JavaScript 对 象 。JSON.stringify() 和 JSON.parse() 方 法 分 别 用 来 实现 上 述 两 项 功能 。 
这 两 个 方法 都 有 一 些 选项 ， 通 过 它们 可 以 改变 过 滤 的 方式 ,或 者 改变 序列 化 的 过 程 。 

原生 的 JSON 对 象 也 得 到 了 很 多 浏览 器 的 支持 ， 比 如 IE8+、Firefox 3.5+、Safari 4+、Opera 10.5 和 
Chrome。 
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本 章 内 容 
口 使 用 XxMLHttpRequest 对 象 
口 使 用 xMLHttpRequest 事件 
口 跨 域 Ajax 通信 的 限制 











005 年 ，Jesse James Garrett 发 表 了 一 篇 在 线 文章 ， 题 为 “Ajax: A new Approach to Web 

pe ( http://www.adaptivepath.com/ideas/essays/archives/000385.php )。 他 在 这 篇 文章 

里 介绍 了 一 种 技术 ， 用 他 的 话说 ， 就 叫 Ajax， 是 对 Asynchronous JavaScript + XML 的 简写 。 这 一 技术 

能 够 向 服务 吉 请 求 季 外 的 数据 而 无 须 伸 载 页 面 ， 会 带 来 更 好 的 用 户 体验 。Garrett 还 解释 了 怎样 使 用 这 
一 技术 改变 自从 Web 诞生 以 来 就 一 直 沿 用 的 “ 单 击 ， 等 待 ”的 交互 模式 。 

Ajax 技术 的 核心 是 XMLHttpRequest 对 象 ( 简称 XHR )， 这 是 由 微软 首先 引入 的 一 个 特性 ， 其 他 
浏览 器 提供 商 后 来 都 提供 了 相同 的 实现 。 在 XHR 出 现 之 前 ，Ajax 式 的 通信 必须 借助 一 些 hack 手段 来 实 
现 ， 大 多 数 是 使 用 隐藏 的 框架 或 内 舱 框 架 。XHR 为 向 服务 器 发 送 请 求 和 解析 服务 器 响应 提供 了 流畅 的 
接口 。 能够 以 异步 方式 从 服务 器 取得 更 多 信息 , 意味 着 用 户 单 击 后 , 可 以 不 必 刷 新 页 面 也 能 取得 新 数据 。 
也 就 是 说 ， 可 以 使 用 XHR 对 象 取得 新 数据 ， 然 后 再 通过 DOM 将 新 数据 插入 到 页 面 中 。 另 外 ， 虽 然 名 
字 中 包含 XML 的 成 分 , 但 Ajax 通信 与 数据 格式 无 关 ; 这 种 技术 就 是 无 须 刷 新 页 面 即 可 从 服务 器 取得 数 
据 ， 但 不 一 定 是 XML 数据 。 

实际 上 ，Garrett 提 到 的 这 种 技术 已 经 存在 很 长 时 间 了 。 在 Garrett 撰写 那 篇 文章 之 前 ， 人 们 通常 将 
这 种 技术 叫做 远程 脚本 〈remote scripting )， 而 且 早 在 1998 年 就 有 人 采用 不 同 的 手段 实现 了 这 种 浏览 
与 服务 器 的 通信 。 再 往 前 推 ，JavaScript 需要 通过 Java applet 或 Flash 电影 等 中 间 层 向 服务 器 发 送 请 求 。 
而 XHR 则 将 浏览 器 原生 的 通信 能 力 提 供给 了 开发 人 员 ， 简 化 了 实现 同样 操作 的 任务 。 

在 重 命名 为 Ajax 之 后 ， 大 约 是 2005 年 底 2006 年 初 ， 这 种 浏览 器 与 服务 器 的 通信 技术 可 谓 红 极 一 
时 。 人 们 对 JavaScript 和 Web 的 全 新 认识 ， 催 生 了 很 多 使 用 原 有 特性 的 新 技术 和 新 模式 。 就 目前 来 说 ， 
熟练 使 用 XHR 对 象 已 经 成 为 所 有 Web 开发 人 员 必 须 掌 握 的 一 种 技能 。 































































































































































































































































































21.1 XMLHttpRequest 对 象 


IE5 是 第 一 款 引 入 XHR 对 象 的 浏览 器 。 在 IE5 中 ，XHR 对 象 是 通过 MSXML 库 中 的 一 个 ActiveX 
对 象 实现 的 。 因 此 , 在 正 中 可 能 会 遇 到 三 种 不 同 版 本 的 XHR 对 象 ， 即 MSXML2 .XMLHttp、 
MSXML2 .XMLHttp .3.0 和 MXSML2 .XMLHttp.6.0。 要 使 用 MSXML 库 中 的 XHR 对 象 ， 需 要 像 第 18 
章 讨论 创建 XML 文档 时 一 样 ， 编 写 一 个 函数 ， 例 如 : 
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// 知 用 于 IE7 之 前 的 版 本 
CY) function CreateXHR () { 
if (typeof arguments.callee.activeXString != "String"){ 
Var versions = ["MSXML2 .XMLHttp.6.0", "MSXML2 .XMLHttp.3.0", 
"MSXML2 .XMLHttp"], 
i, len; 


for (i=0,len=versions.length; i < len; i++){ 

try { 
new ActiveXxObject (versions[i]); 
arguments .callee.activeXString = versions[i]; 
break; 

} catch (ex){ 
// 跳 过 

} 


} 


return new ActiveXObject (arguments.callee.activexString); 
} 





这 个 函数 会 尽力 根据 下 中 可 用 的 MSXML 库 的 情况 创建 最 新 版 本 的 XHR 对 象 。 


IE7+、Firefox、Opera、Chrome 和 Safari 都 支持 原生 的 XHR 对 象 ， 在 这 些 浏 览 器 中 创建 XHR 对 象 
要 像 下 面 这 样 使 用 xMLHttpRequest 构造 两 数 。 




















var xhr = new XMLHttpRequest () ; 


假如 你 只 想 支 持 IE7 及 更 高 版 本 ,那么 大 可 丢掉 前 面 定义 的 那个 函数 ， 而 只 用 原生 的 XHR 实现 。 
但 是 ， 如 果 你 必须 还 要 支持 开 的 早期 版 本 ,那么 则 可 以 在 这 个 createXHR () 函数 中 加 入 对 原生 XHR 
对 象 的 支持 。 





























function createXHR () { 
CY) if (typeof XMLHttpRequest != "undefined")t{ 
return new XMLHttpRequest(); 
} else if (typeof Activexobject != "undefined"){ 
if (typeof arguments.callee.activeXString != "string")t{ 
Var versions = [ "MSXML2 .XMLHttp.6.0", "MSXML2 .XMLHttp.3.0", 


"MSXML2 .XMLHttp"], 
i, len; 


for (i=0,len=versions.length; i < len; i++){ 
Ey 
new ActiveXObject (versions[i]); 


arguments .callee.activeXString = versions[i]; 
break; 


} catch (ex){ 
// 跳 过 
} 


} 


return new ActiveXobject (arguments.callee.activeXxString); 
} else { 


throw new Error("No XHR object available."); 
} 


XHRExample01.htm 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com，) 专 享 尊重 版 权 


21.1 XMLHttpRequest 对 象 573 








这 个 函数 中 新 增 的 代码 首先 检测 原生 XHR 对 象 是 否 存 在 ， 如 果 存 在 则 返回 它 的 新 实例 。 如 果 原 生 
对 象 不 存在 ， 则 检测 ActiveX 对 象 。 如 果 这 两 种 对 象 都 不 存在 ， 就 抛 出 一 个 错误 。 然 后 ， 就 可 以 使 用 下 
面 的 代码 在 所 有 浏览 器 中 创建 XHR 对 象 了 。 


var xhr = createXHR(); 


1 于 其 他 浏览 器 中 对 XHR 的 实现 与 正 最 早 的 实现 是 兼容 的 , 因此 就 可 以 在 所 有 浏览 器 中 都 以 相同 
方式 使 用 上 面 创建 的 xhr 对 象 。 






































21.1.1 xHR 的 用 法 
在 使 用 XHR 对象 时 ， 要 调用 的 第 一 个 方法 是 open () ， 它 接受 3 个 参数 : 要 发 送 的 请 求 的 类 型 
("get"、"post" 等 )、 请 求 的 URL 和 表示 是 否 异 步 发 送 请 求 的 布尔 值 。 下 面 就 是 调用 这 个 方法 的 例子 。 
xhr.open("get", "example.php", false); 
这 行 代码 会 启动 一 个 针对 example.php 的 GET 请 求 。 有 关 这 行 代码 ， 需 要 说 明 两 点 : 一 是 URL 
相对 于 执行 代码 的 当前 页 面 ( 当然 也 可 以 使 用 绝对 路 径 ); 二 是 调用 open () 方法 并 不 会 真正 发 送 请 求 ， 
而 只 是 启动 一 个 请 求 以 备 发 送 。 














只 能 向 同一 个 域 中 使 用 相同 端口 和 协议 的 URL 发 送 请 求 。 如 果 URL 与 启动 请 求 


的 页 面 有 任何 差别 ， 都 会 引发 安全 错误 。 








要 发 送 特定 的 请 求 ， 必 须 像 下 面 这 样 调用 sena () 方 法 : 


xhr.open("get", "example.txt", false); 
xhr.send (null); 


XHRExample01.htm 


这 里 的 seng () 方 法 接收 一 个 参数 ， 即 要 作为 请 求 主体 发 送 的 数据 。 如 果 不 需 要 通过 请 求 主体 发 送 
数据 , 则 必须 传人 nul1， 因 为 这 个 参数 对 有 些 浏览 器 来 说 是 必需 的 。 调 用 send () 之 后 , 请 求 就 会 被 分 
派 到 服务 器 。 

由 于 这 次 请 求 是 同步 的 ，JavaScript 代码 会 等 到 服务 器 响应 之 后 再 继续 执行 。 在 收 到 响应 后 ， 响 应 
的 数据 会 自动 填充 XHR 对 象 的 属性 ， 相 关 的 属性 简介 如 下 。 

口 responseText: 作为 响应 主体 被 返回 的 文本 。 

口 responseXML: 如 果 响 应 的 内 容 类 型 是 "texty/xml" 或 "application/xml"， 这 个 属性 中 将 保 
存 包含 着 响应 数据 的 XML DOM 文档 。 

口 status: 响应 的 HITP 状态 。 

口 statusText: HTTP 状态 的 说 明 。 

在 接收 到 响应 后 , 第 一 步 是 检查 status 属性 , 以 确定 响应 已 经 成 功 返回 。 一 般 来 说 , 可 以 将 HTTP 
状态 代码 为 200 作为 成 功 的 标志 。 此 时 ，responseText 属性 的 内 容 已 经 就 绪 ， 而 且 在 内 容 类 型 正确 的 
情况 下 ，responsexML 也 应 该 能 够 访问 了 。 此 外 ， 状 态 代码 为 304 表示 请 求 的 资源 并 没有 被 修改 ， 可 
以 直接 使 用 浏览 器 中 缓存 的 版 本 ; 当然 ,也 意味 着 响应 是 有 效 的 。 为 确保 接收 到 适当 的 响应 ， 应 该 像 下 
面 这 样 检查 上 述 这 两 种 状态 代码 : 
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xhr.open("get", "example.txt", false); 
xhr.send (null); 


if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 

} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 
XHRExample01.htm 
根据 返回 的 状态 代码 ， 这 个 例子 可 能 会 显示 由 服务 器 返回 的 内 容 ， 也 可 能 会 显示 一 条 错误 消息 。 我 
们 建议 读者 要 通过 检测 status 来 决定 下 一 步 的 操作 ,不 要 依赖 statusText， 因 为 后 者 在 跨 浏览 器 使 


用 时 不 太 可 靠 。 另 外 ， 无 论 内 容 类 型 是 什么 ， 响 应 主体 的 内 容 都 会 保存 到 responseText 属性 中 ; 而 
对 于 非 XML 数据 而 言 ，responseXML 属性 的 值 将 为 nulL1。 


































有 的 浏览 器 会 错误 地 报告 204 状态 代码 。 下 中 XHR 的 ActiveX 版 本 会 将 204 设 
置 为 1223， 而 但 中 原生 的 XHR 则 会 将 204 规范 化 为 200。Opera 会 在 取得 204 时 报 
告 status 的 值 为 0。 









像 前 面 这 样 发 送 同 步 请 求 当 然 没 有 问题 ， 但 多 数 情 况 下 ， 我 们 还 是 要 发 送 异 步 请 求 ， 才 能 让 
JavaScript 继续 执行 而 不 必 等 待 响应 。 此 时 ,可 以 检测 XHR 对 象 的 readystate 属性 , 该 属性 表示 请 求 
/响应 过 程 的 当前 活动 阶段 。 这 个 属性 可 取 的 值 如 下 。 

口 0: 未 初始 化 。 尚 未 调用 open ( ) 方 法 。 

口 1: 启动 。 已 经 调用 open () 方 法 ， 但 尚未 调用 send ( ) 方法 。 
口 2: 发 送 。 已 经 调用 send() 方 法 , 但 尚未 接收 到 响应 。 

口 3: 接收 。 已 经 接收 到 部 分 响应 数据 。 

口 4: 完成 。 已 经 接收 到 全 部 响应 数据 ， 而 且 已 经 可 以 在 客户 端 使 用 了 。 

只 要 readystate 属性 的 值 由 一 个 值 变 成 男 一 个 值 ， 都 会 触发 一 次 readystatechange 事件 。 可 
以 利用 这 个 事件 来 检测 每 次 状态 变化 后 readystate 的 值 。 通 常 ， 我 们 只 对 readystate 值 为 4 的 阶 
役 感 兴趣 ， 因 为 这 时 所 有 数据 都 已 经 就 绪 。 不 过 ,必须 在 调用 open () 之 前 指定 onreadystatechange 
事件 处 理 程序 才能 确保 跨 浏 览 器 兼容 性 。 下 面 来 看 一 个 例子 。 


var xhr = createXHR(); 
xhr.onreadystatechange = function()t{ 















































if (xhr.readyState == 4)f{ 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
} 
3 
xhr.open("get", "example.txt", true); 


xhr.send (null); 


XHRAsyncExample01.htm 
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575 





以 上 代码 利用 DOM 0 级 方法 为 xHR 对 象 添加 了 事件 处 理 程序 , 原因 是 并 非 所 有 浏览 需 都 支持 DOM 2 





级 方法 。 与 其 他 事件 处 理 程序 不 同 , 这 里 没有 向 onreadystatechange 事件 处 理 程序 中 传递 event 对 象 ; 





必须 通过 XHR 对 象 本 身 来 确定 下 一 步 该 怎么 做 。 








这 个 例子 在 onreadystatechange 事件 处 理 程序 中 使 用 了 xhr 对 象 , 没有 使 用 
this 对 象 ， 原 因 是 onreadystatechange 事件 处 理 程序 的 作用 域 问 题 。 如 果 使 用 
this 对 象 ， 在 有 的 浏览 器 中 会 导致 函数 执行 失败 ,或 者 导致 错误 发 生 。 因 此 ,使 用 
实际 的 XHR 对 象 实例 变量 是 较为 可 靠 的 一 种 方式 。 


另外 ， 在 接收 到 响应 之 前 还 可 以 调用 abort () 方 法 来 取消 异步 请 求 ， 如 下 所 示 : 


xhr .abort()s 











调用 这 个 方法 后 ，xHR 对 象 会 停止 触发 事件 ， 而 且 也 不 再 允许 访问 任何 与 响应 有 关 的 对 象 属性 。 


终止 请 求 之 后 ， 还 应 该 对 XHR 对 象 进行 解 引用 操作 。 由 于 内 存 原因 ， 不 建议 重用 xHR 对 象 。 
21.1.2 HTTP 头 部 信息 








每 个 HTTP 请 求 和 响应 都 会 带 有 相应 的 头 部 信息 ， 其 中 有 的 对 开发 人 员 有 用 ， 有 的 也 没有 什么 用 。 








XHR 对 象 也 提供 〈 即 请 求 头 部 和 响应 头 部 ) 信息 的 方法 。 
默认 情况 下 ， 在 发 送 xHR 请 求 的 同时 ， 还 会 发 送 下 列 头 部 信息 。 

口 Accept: 浏览 器 能 够 处 理 的 内 容 类 型 。 

口 accept-charset: 浏览 器 能 够 显示 的 字符 集 。 

口 Accept-Encoding: 浏览 器 能 够 处 理 的 压缩 编码 。 

口 accept-Language: 浏览 器 当前 设置 的 语言 。 

口 connection: 浏览 器 与 服务 器 之 间 连 接 的 类 型 。 

口 cookie: 当前 页 面 设 置 的 任何 Cookie。 

口 Host: 发 出 请 求 的 页 面 所 在 的 域 。 




















圭 


范 一 致 ， 也 只 能 将 错 就 错 了 。( 这 个 英文 单词 的 正确 拼 法 应 该 是 referrer。 ) 
口 User-Agent: 浏览 器 的 用 户 代 理 字符 串 。 











口 Referer: 发 出 请 求 的 页 面 的 URI。 注意 ，HTTP 规范 将 这 个 头 部 字段 拼写 错 了 ， 而 为 保证 与 规 


昌 然 不 同 浏览 器 实际 发 送 的 头 部 信息 会 有 所 不 同 ， 但 以 上 列 出 的 基本 上 是 所 有 浏览 咒 都 会 发 送 的 。 


使 用 setRequestHeader() 方 法 可 以 设置 自 定义 的 请 求 头 部 信息 。 这 个 方法 接受 两 个 参数 : 头 部 字段 
的 名 称 和 头 部 字段 的 值 。 要 成 功 发 送 请 求 头 部 信息 ， 必 须 在 调用 open () 方 法 之 后 且 调 用 send() 方 法 











之 前 调用 setRequestHeader () ， 如 下 面 的 例子 所 示 。 


Var xhr = CreateXHR() : 
xhr.onreadystatechange = function()1{ 
if (xhr.readyState == 4){ 


if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 

} else { 
alert("Request was unsuccessful: " + xhr.status); 


} 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


576 第 21 章 Ajax 与 Comet 





区 

xhr.open("get", "example.php", true); 
xhr.setRequestHeader ("MyHeader", "MyValue"); 
xhr.send (null); 


XHRRequestHeadersExample01.htm 














服务 咒 在 接收 到 这 种 自 定义 的 头 部 信息 之 后 ,可 以 执行 相应 的 后 续 操 作 。 我 们 建议 读者 使 用 自 定义 


的 头 部 字段 名 称 ， 不 要 使 用 浏览 器 正常 发 送 的 字段 名 称 ， 和 否则 有 可 能 会 影响 服务 器 的 响应 。 有 的 浏览 
人 允许 开发 人 员 重 写 默 认 的 头 部 信息 ， 但 有 的 浏览 器 则 不 允许 这 样 做 。 


/ENO 

















调用 XHR 对 象 的 getResponseHeader () 方 法 并 传人 头 部 字段 名 称 ， 可 以 取得 相应 的 响应 头 部 信 
而 调用 getAllResponseHeaders() 方 法 则 可 以 取得 一 个 包含 所 有 头 部 信息 的 长 字符 串 。 来 看 下 











面 的 例子 。 


Var myHeader = xhr.getResponseHeader ("MyHeader"); 
Var allHeaders = xhr.getAllResponseHeaders (); 


在 服务 器 端 ， 也 可 以 利用 头 部 信息 向 浏览 器 发 送 额 外 的 、 结 构 化 的 数据 。 在 没有 自 定义 信息 的 情况 






































下 ，getAllResponseHeaders () 方 法 通常 会 返回 如 下 所 示 的 多 行文 本 内 容 : 

Date: Sun, 14 Nov 2004 18:04:03 GMT 

Server: Apache/1.3.29 (Unix) 

Vary: Accept 

X-Powered-By: PHP/4.3.8 

Connection: close 

Content-Type: text/html; charset=iso-8859-1 

这 种 格式 化 的 输出 可 以 方便 我 们 检查 响应 中 所 有 头 部 字段 的 名 称 , 而 不 必 一 个 一 个 地 检查 某 个 字段 
是 否 存在 。 


21.1.3 GET 请 求 





GET 是 最 常见 的 请 求 类 型 ， 最 常用 于 向 服务 需 查 询 某 些 信息 。 必 要 时 ， 可 以 将 查询 字符 串 参 数 追 加 





到 URL 的 末尾 ,以 便 将 信息 发 送 给 服务 器 。 对 XHR 而 言 , 位 于 传人 open () 方 法 的 URL 末尾 的 查询 字 


符 虽 








必须 经 过 正确 的 编码 才 行 。 























使 用 GET 请 求 经 常会 发 生 的 一 个 错误 , 就 是 查询 字符 串 的 格式 有 问题 。 查 询 字符 串 中 每 个 参数 的 名 

















称 和 值 都 必须 使 用 encodeURIComponent () 进行 编码 ， 然 后 才能 放 到 URL 的 末尾 ; 而 且 所 有 名 - 值 对 


儿 都 必须 由 和 号 (有 & ) 分 隔 ， 如 下 面 的 例子 所 示 。 











xhr.open("get", "example.php?namel=valuel&name2=value2", true); 
下 面 这 个 函数 可 以 辅助 向 现 有 URL 的 末尾 添加 查询 字符 串 参 数 : 


function addURLParam(url, name, value) { 
Url :+a (url.indexOQf ("?") sa -1 2? MP 3 MVE") 
url += encodeURIComponent (name) + "=" + encodeURIComponent (value); 
return url; 

















} 
这 个 adaaURLParam() 函数 接受 三 个 参数 : 要 添加 参数 的 URL、 参 数 的 名 称 和 参数 的 值 。 这 个 函数 





首先 检查 URL 是 否 包含 问号 ( 以 确定 是 否 已 经 有 参数 存在 )。 如 果 没 有 ， 就 添加 一 个 问号 ; 否则 ， 就 添 




















加 一 个 和 号 。 然 后 , 将 参数 名 称 和 值 进行 编码 ,再 添加 到 URL 的 末尾 。 最 后 返回 添加 参数 之 后 的 URL。 
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下 面 是 使 用 这 个 函数 来 构建 请 求 URL 的 示例 。 





Var url = "example.php"; 

// 添 加 参数 

url = addURLParam(url, "name", "Nicholas"); 

Url = addURLParam(url, "book", "Professional JavaScript"); 
/ /初始化 请 求 


xhr.open("get", url, false); 


在 这 里 使 用 addURLParam() 函数 可 以 确保 查询 字符 串 的 格式 良好 ， 并 可 靠 地 用 于 XHR 对 象 。 

















21.1.4 ”PosT 请 求 


使 用 频率 仅 次 于 GET 的 是 PosT 请 求 ， 通 常用 于 向 服务 器 发 送 应 该 被 保存 的 数据 。PosT 请 求 应 该 
把 数据 作为 请 求 的 主体 提交 ， 而 GET 请 求 传 统 上 不 是 这 样 。PosT 请 求 的 主体 可 以 包含 非常 多 的 数据 ， 
而 且 格式 不 限 。 在 open ( 0 方法 第 一 个 参数 的 位 置 传人 "post"， 就 可 以 初始 化 一 个 PosT 请 求 ， 如 下 面 
的 例子 所 示 。 

xhr.open("post", "example.php", true); 

发 送 PosT 请 求 的 第 二 步 就 是 向 send ( ) 方 法 中 传人 某 些 数据 。 由 于 XHR 最 初 的 设计 主要 是 为 了 处 
理 XML， 因 此 可 以 在 此 传人 XML DOM 文档 ， 传 入 的 文档 经 序列 化 之 后 将 作为 请 求 主体 被 提交 到 服务 
器 。 当 然 ， 也 可 以 在 此 传人 任何 想 发 送 到 服务 器 的 字符 串 。 

默认 情况 下 ， 服 务 器 对 PosT 请 求 和 提交 Web 表单 的 请 求 并 不 会 一 视 同仁 。 因 此 ， 服务 右 端 必须 有 
程序 来 读 取 发 送 过 来 的 原始 数据 ， 并 从 中 解析 出 有 用 的 部 分 。 不 过 ， 我 们 可 以 使 用 XHR 来 模仿 表单 提 
交 : 首先 将 content-Type 头 部 信息 设置 为 application/x-www-form-urlencoded， 也 就 是 表单 
提交 时 的 内 容 类 型 ， 其 次 是 以 适当 的 格式 创建 一 个 字符 串 。 第 14 章 曾经 讨论 过 ，PosmT 数据 的 格式 与 查 
询 字符 串 格式 相同 。 如 果 需 要 将 页 面 中 表单 的 数据 进行 序列 化 ， 然后 再 通过 过 XHR 发 送 到 服务 器 ， 那 么 
就 可 以 使 用 第 14 章 介绍 的 serialize() 函数 来 创建 这 个 字符 串 : 


function SubmitData(){ 
Var xhr = createXHR(); 
xhr.onreadystatechange = function()1{ 




































































if (xhr.readyState == 4){ 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 


xhr.open("post", "postexample.php", true); 

xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 
var form = document .getElementById("user-info"); 
xhr.send(serialize(form)); 


XHRPostExample01.htm 
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这 个 函数 可 以 将 了 为 "user-info" 的 表单 中 的 数据 序列 化 之 后 发 送 给 服务 器 。 而 下 面 的 示例 PHP 
文件 postexample.php 就 可 以 通过 $_PosmT 取得 提交 的 数据 了 : 


<?php 
header ("Content-Type: text/plain"); 
echo <<<EOF 

Name: {$_POST[ ‘user-name’” ]} 

Email: {S$_POST[ ‘user-email’” ]} 

EOF; 


?> 











postexample.php 


如 果 不 设置 content-Type 头 部 信息 , 那么 发 送 给 服务 器 的 数据 就 不 会 出 现在 $_Posm 超级 全 局 变 
量 中 。 这 时 候 ， 要 访问 同样 的 数据 ， 就 必须 借助 SHTTP_RAW_POST_DATA。 























与 GET 请 求 相 比 ，POST 请 求 消耗 的 资源 会 更 多 一 些 。 从 性 能 角度 来 看 ， 以 发 送 


相同 的 数据 计 ，GET 请 求 的 速度 最 多 可 达到 POST 请 求 的 两 倍 。 





21.2 ”XMLHttpRequest 2 级 


鉴于 XHR 已 经 得 到 广泛 接受 ， 成 为 了 事实 标准 ，W3C 也 着 手 制定 相应 的 标准 以 规范 其 行为 。 
XMLHttpRequest 1 级 只 是 把 已 有 的 XHR 对 象 的 实现 细节 描述 了 出 来 。 而 XMLHttpRequest2 级 则 进一步 
发 展 了 XHR。 并 非 所 有 浏览 器 都 完整 地 实现 了 XMLHttpRequest 2 级 规范 ， 但 所 有 浏览 器 都 实现 了 它 规 
定 的 部 分 内 容 。 





21.2.1 FormData 


现代 Web 应 用 中 频繁 使 用 的 一 项 功能 就 是 表单 数据 的 序列 化 ，XMLHttpRequest 2 级 为 此 定义 了 
FormData 类 型 。 FormData 为 序列 化 表单 以 及 创建 与 表单 格式 相同 的 数据 ( 用 于 通过 XHR 传输 ) 提供 
了 便利 。 下 面 的 代码 创建 了 一 个 Formpata 对 象 ， 并 向 其 中 添加 了 一 些 数据 。 


Var data = new FormData(); 
data.append("name", "Nicholas"); 


这 个 append () 方 法 接收 两 个 参数 : 键 和 值 ， 分 别 对 应 表单 字段 的 名 字 和 字段 中 包含 的 值 。 可 以 像 
这 样 添加 任意 多 个 键 值 对 儿 。 而 通过 向 Formpata 构造 函数 中 传人 表单 元 素 , 也 可 以 用 表单 元 素 的 数据 
预先 向 其 中 填 人 键 值 对 儿 ， 

Var data = new FormData(dqocument .forms[0]) ; 


创建 了 Formpata 的 实例 后 ， 可 以 将 它 直 接 传 给 XHR 的 send() 方 法 ， 如 下 所 示 : 









































Var xhr = createXHR(); 
xhr.onreadystatechange = function()t{ 
if (xhr.readyState == 4)f{ 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 
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} else { 
alert("Request was unsuccessful: " + xhr.status); 


} 
站 
xhr.open("post","postexample.php", true); 


Var form = document .getElementById("user-info"); 
xhr.send(new FormData(form)); 


XHRFormDataExample01.htm 
使 用 Formpata 的 方便 之 处 体现 在 不 必 明 确 地 在 xHR 对 象 上 设置 请 求 头 部 。XHR 对 象 能 够 识别 传 
入 的 数据 类 型 是 Formpata 的 实例 ， 并 配置 适当 的 头 部 信息 。 
支持 FormData 的 浏览 器 有 Firefox 4+、Safari $S+、Chrome 和 Android 3+ 版 WebKit。 


21.2.2 ”超时 设 定 


IE8 为 XHR 对 象 添加 了 一 个 timeout 属性 ， 表 示 请 求 在 等 待 响应 多 少 毫秒 之 后 就 终止 。 在 给 
timeout 设置 一 个 数值 后 ， 如 果 在 规定 的 时 间 内 浏览 器 还 没有 接收 到 响应 ,那么 就 会 触发 timeout 事 
件 ， 进而 会 调用 ontimeout 事件 处 理 程序 。 这 项 功能 后 来 也 被 收入 了 XMLHttpRequest 2 级 规范 中 。 来 
看 下 面 的 例子 。 


Var xhr = createXxHR(); 















































叶 ) xhr.onreadystatechange = function()f{ 
if (xhr.readyState == 4)f{ 
CE A 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 


alert (xhr.responseText);} 


} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 
} catch (ex){ 

/ /假设 由 ontimeout 事件 处 理 程序 处 理 
} 


xhr.open("get", "timeout.php", true); 
xhr.timeout = 1000; // 将 超时 设置 为 1 秒 钟 ( 仅 适 用 于 IE8+) 
xhr.ontimeout = function(){ 

alert ("Request did not return in a second."); 


xhr.send (null); 


XHRTimeoutExample01.htm 


这 个 例子 示范 了 如 何 使 用 timeout 属性 。 将 这 个 属性 设置 为 1000 毫秒 ， 意 味 着 如 果 请 求 在 1 秒 钟 
内 还 没有 返回 ， 就 会 自动 终止 。 请 求 终止 时 ， 会 调用 ontimeout 事件 处 理 程序 。 但 此 时 readystate 
可 能 已 经 改变 为 4 了 ， 这 意味 着 会 调用 onreadystatechange 事件 处 理 程序 。 可 是 ， 如 果 在 超时 终止 
请 求 之 后 再 访问 status 属性 ， 就 会 导致 错误 。 为 避免 浏览 器 报告 错误 ， 可 以 将 检查 status 属性 的 语 
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句 封 装 在 一 人 try-catch 语句 当中 。 
在 写作 本 书 时 ，IE 8+ 仍 然 是 唯一 文 持 超时 设 定 的 浏览 需 。 

















21.2.3 overrideMimeType() 方 法 








Firefox 最 早 引 入 了 overrideMimeType() 方 法 ， 用 于 重 写 XHR 响应 的 MIME 类 型 。 这 个 方法 后 
来 也 被 纳入 了 XMLHttpRequest 2 级 规范 。 因 为 返回 啊 应 的 MIME 类 型 决定 了 XHR 对 象 如 何 处 理 它 , 所 
以 提供 一 种 方法 能 够 重 写 服务 器 返回 的 MIME 类 型 是 很 有 用 的 。 

比如 , 服务 器 返回 的 MIME 类 型 是 text /plain, 但 数据 中 实际 包含 的 是 XML。 根据 MIME 类 型 ， 
即使 数据 是 XML ，responseXML 属性 中 仍然 是 nul1。 通 过 调用 overrideMimeType() 方 法 , 可 以 保 
证 把 响应 当 作 XML 而 非 纯 文 本 来 处 理 。 

var xhr = createXHR(); 

xhr.open("get", "text.php", true); 


xhr.overrideMimeType ("text/xml"); 
xhr.send (null); 


这 个 例子 强迫 XHR 对 象 将 响应 当 作 XML 而 非 纯 文本 来 处 理 。 调 用 overrideMimeType () 必须 在 
send() 方 法 之 前 ， 才 能 保证 重 写 啊 应 的 MIME 类 型 。 
支持 overriadeMimeType () 方 法 的 浏览 器 有 Firefox 、Safari 4+、Opera 10.5 和 Chrome。 


21.3 ”进度 事件 


Progress Events 规范 是 W3C 的 一 个 工作 草案 , 定义 了 与 客户 端 服务 器 通信 有 关 的 事件 。 这 些 事件 最 
早 其 实 只 针对 XHR 操作 ,但 目前 也 被 其 他 API 借 鉴 。 有 以 下 6 个 进度 事件 。 
口 loadstart: 在 接收 到 响应 数据 的 第 一 个 字 节 时 触发 。 
口 progress: 在 接收 响应 期 间 持续 不 断 地 触发 。 
口 error: 在 请 求 发 生 错误 时 触发 。 
口 abort: 在 因为 调用 abort () 方 法 而 终止 连接 时 触发 。 
口 1oad: 在 接收 到 完整 的 响应 数据 时 触发 。 
口 loadend: 在 通信 完成 或 者 触发 error、abort 或 1oad 事件 后 触发 。 
每 个 请 求 都 从 触发 loadstart 事件 开始 ， 接 下 来 是 一 或 多 个 progress 事件 ， 然 后 触发 error、 
abort 或 10ad 事件 中 的 一 个 ， 最 后 以 触发 loadend 事件 结束 。 
支持 前 5 个 事件 的 浏览 器 有 Firefox 3.5+、Safari 4+、Chrome 、iOS 版 Safari 和 Android 版 WebKit。 
Opera( 从 第 11 版 开始 )、IE 8+ 只 支持 load 事件 。 目 前 还 没有 浏览 器 支持 1oadend 事件 。 
这 些 事件 大 都 很 直观 ， 但 其 中 两 个 事件 有 一 些 细节 需要 注意 。 


21.3.1 1load 事 件 


Firefox 在 实现 XHR 对 象 的 某 个 版 本 时 ， 曾 致力 于 简化 异步 交互 模型 。 最 终 ，Firefox 实现 中 引入 了 
load 事件 , 用 以 替代 readystatechange 事件 。 响 应 接收 完毕 后 将 触发 1oad 事件 ， 因 此 也 就 没有 必 
要 去 检查 readyState 属性 了 。 而 onload 事件 处 理 程序 会 接收 到 一 个 event 对 象 ， 其 target 属性 
就 指向 XHR 对 象 实例 ,因而 可 以 访问 到 XHR 对 象 的 所 有 方法 和 属性 。 然 而 , 并非 所 有 浏览 器 都 为 这 个 
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事件 实现 了 适当 的 事件 对 象 。 结 果 ， 开 发 人 员 还 是 要 像 下 面 这 样 被 迫使 用 XHR 对 象 变量 。 


Var xhr = CreateXHR() : 
xhr.onload = function(){ 








if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)t{ 
alert (xhr .responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
}; 
xhr.open("get", "altevents.php", true); 


xhr.send (null); 


XHRProgressEventExample01.htm 


只 要 浏览 器 接收 到 服务 器 的 响应 ,不管 其 状态 如 何 ， 都 会 触发 1oad 事件 。 而 这 意味 着 你 必须 要 检 
查 status 属性 ， 才能 确定 数据 是 否 真 的 已 已 经 可 用 了 。Firefox、Opera、Chrome 和 Safari 都 支持 1oad 
事件 。 














21.3.2 progress 事 件 








山中 











Mozilla 对 XHR 的 另 一 个 革新 是 添加 了 progress 事件 , 这 个 事件 会 在 浏览 器 接收 新 数据 期 间 周期 
性 地 触发 。 而 onprogress 事件 处 理 程序 会 接收 到 一 个 event 对 象 ， 其 target 属性 是 xHR 对 象 ,但 
包含 着 三 个 额外 的 属性 : lengthComputable、 position 和 totalSizeo 其 中 ， lengthComputable 
是 一 个 表示 进度 信息 是 否 可 用 的 布尔 值 ，position 表示 已 经 接收 的 字 节 数 ，totalsize 表示 根据 
Content-Length 响应 头 部 确定 的 预期 字 节 数 。 有 了 这 些 信 息 , 我 们 就 可 以 为 用 户 创建 一 个 进度 指示 器 
了 。 下 面 展 示 了 为 用 户 创 建 进度 指示 带 的 一 个 示例 。 


Var xhr = createXxHR(); 
xhr.onload = function(event)t 
if ((xhr.status >= 200 && xhr.status < 300) || 
xhr.status == 304){ 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 



































} 
xhr.onprogress = function(event)t{ 

var divStatus = document .getElementById("status"); 

if (event.lengthComputable)t{ 

divStatus.innerHTML = "Received " + event.position + " of " + 
event .totalSize +" bytes"; 

}; 
xhr.open("get", "altevents.php", true); 


xhr.send (null); 


XHRProgressEventExample01.htm 
为 确保 正常 执行 , 必须 在 调用 open () 方 法 之 前 添加 onprogress 事件 处 理 程序 。 在 前 面 的 例子 中 ， 
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每 次 触发 progress 事件 ， 都 会 以 新 的 状态 信息 更 新 HTML 元 素 的 内 容 。 如 果 响 应 头 部 中 包含 
Content-Length 字段 ， 那 么 也 可 以 利用 此 信息 来 计算 从 响应 中 已 经 接收 到 的 数据 的 百分比 。 


21.4 ” 跨 源 资源 共享 


通过 XHR 实现 Ajax 通信 的 一 个 主要 限制 ,来 源 于 跨 域 安全 策略 。 默 认 情况 下 ，XHR 对 象 只 能 访 
问 与 包含 它 的 页 面 位 于 同一 个 域 中 的 资源 。 这 种 安全 策略 可 以 预防 某 些 恶 意 行为 。 但 是 ,实现 合 理 的 跨 
域 请 求 对 开发 某 些 浏 览 器 应 用 程序 也 是 至 关 重要 的 。 

CORS ( Cross-Origin Resource Sharing， 跨 源 资源 共享 ) 是 W3C 的 一 个 工作 草案 ,定义 了 在 必须 访 
问 跨 源 资源 时 ， 浏 览 器 与 服务 器 应 该 如 何 沟通 。CORS 背后 的 基本 思想 ， 就 是 使 用 自 定义 的 HTTP 头 部 
让 浏览 器 与 服务 器 进行 沟通 ， 从 而 决定 请 求 或 响应 是 应 该 成 功 ， 还 是 应 该 失败 。 

比如 一 个 简单 的 使 用 GET 或 PosT 发 送 的 请 求 , 它 没有 自 定 义 的 头 部 , 而 主体 内 容 是 text/plain。 在 
发 送 该 请 求 时 ， 需 要 给 它 附 加 一 个 额外 的 origin 头 部 ， 其 中 包含 请 求 页 面 的 源 信息 ( 协议、 域名 和 端 
口 )， 以 便服 务 器 根据 这 个 头 部 信息 来 决定 是 否 给 予 响应 。 下 面 是 origin 头 部 的 一 个 示例 : 

Origin: http://www.nczonline.net 

如 果 服 务 器 认为 这 个 请 求 可 以 接受 , 就 在 Access-Control-Allow-Origin 头 部 中 回 发 相同 的 源 
信息 (如 果 是 公共 资源 ， 可 以 回 发 "*" ) 。 例 如 : 

Access-Control-Allow-Origin: http://www.nczonline.net 

如 果 没 有 这 个 头 部 ， 或 者 有 这 个 头 部 但 源 信息 不 匹配 ,浏览 器 就 会 驳回 请 求 。 正 常情 况 下 ,浏览 
会 处 理 请 求 。 注 意 ， 请 求 和 响应 都 不 包含 cookie 信息 。 


















































21.4.1 IE 对 CORS 的 实现 


微软 在 IE8 中 引入 了 XDR (XDomainRequest ) 类 型 。 这 个 对 象 与 XHR 类 似 ， 但 能 实现 安全 可 靠 
的 跨 域 通信 。XDR 对 象 的 安全 机 制 部 分 实现 了 W3C 的 CORS 规范 。 以 下 是 XDR 与 XHR 的 一 些 不 同 之 
处 。 

口 cookie 不 会 随 请 求 发 送 ， 也 不 会 随 响应 返回 。 

口 只 能 设置 请 求 头 部 信息 中 的 content-Type 字段 。 

口 不 能 访问 响应 头 部 信息 。 

口 只 支持 GCET 和 posT 请 求 。 

这 些 变化 使 CSRF ( Cross-Site Request Forgery， 跨 站 点 请 求 伪 造 ) 和 XSS ( Cross-Site Scripting， 跨 
站 点 脚本 ) 的 问题 得 到 了 缓解 。 被 请 求 的 资源 可 以 根据 它 认 为 合适 的 任意 数据 ( 用户 代理 、 来 源 页 面 等 ) 
来 决定 是 否 设置 Access-Control- Allow-Origin 头 部 。 作 为 请 求 的 一 部 分 ，origin 头 部 的 值 表 示 
请 求 的 来 源 域 ， 以 便 远 程 资 源 明确 地 识别 XDR 请 求 。 

XDR 对 象 的 使 用 方法 与 XHR 对 象 非常 相似 ,也 是 创建 一 个 XDomainRequest 的 实例 ,调用 open () 
方法 ， 再 调用 send () 方 法 。 但 与 XHR 对 象 的 open () 方 法 不 同 ，XDR 对 象 的 open () 方 法 只 接收 两 个 
参数 : 请 求 的 类 型 和 URL。 

所 有 XDR 请 求 都 是 异步 执行 的 ， 不 能 用 它 来 创建 同步 请 求 。 请 求 返 回 之 后 ,会 触发 10ad 
响应 的 数据 也 会 保存 在 responseText 属性 中 ， 如 下 所 示 。 
























































有 件 ， 


山中 





图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


21.4 跨 源 资源 共享 583 





Var xdr = new XDomainRequest (); 
xdr.onload = function(){ 
alert (xdr.responseText); 
过 
xdr.open("get", "http://www.somewhere-else.com/page/"); 
xdr.send (null); 


XDomainRequestExample01.htm 
在 接收 到 响应 后 ， 你 只 能 访问 响应 的 原始 文本 ; 没有 办 法 确定 响应 的 状态 代码 。 而 且 ， 只 要 响应 有 











效 就 会 触发 1oad 事件 ， 如 果 失 败 (包括 响应 中 缺少 Access-control-Allow-origin 头 部 ) 就 会 触 
发 error 事件 。 遗 憾 的 是 ， 除 了 错误 本 身 之 外 ， 没 有 其 他 信息 可 用 ， 因 此 唯一 能 够 确定 的 就 只 有 请 求 


未 成 功 了 。 要 检测 错误 ， 可 以 像 下 面 这 样 指定 一 个 onerror 事件 处 理 程序 。 


Var xdr = new XDomainRequest (); 
xdr.onload = function(){ 
alert (xdr.responseText);} 





xdr.onerror = Eunction(){ 
alert ("An error occurred."); 


xdr.open("get", "http://www.somewhere-else.com/page/"); 
xdr.send (null); 


XDomainRequestExample01.htm 


鉴于 导致 XDR 请 求 失败 的 因素 很 多 , 因此 建议 你 不 要 忘记 通过 onerror 事件 处 


理 程序 来 捕获 该 事件 ; 否则 ， 即 使 请 求 失败 也 不 会 有 任何 提示 。 





在 请 求 返回 前 调用 abort () 方 法 可 以 终止 请 求 : 
Xdr.abort (); // 终 止 请 求 
与 XHR 一 样 ，XDR 对 象 也 支持 timeout 属性 以 及 ontimeout 事件 处 理 程序 。 下 面 是 一 个 例子 。 


var xdr = new XDomainRequest () ; 
xdr.onload = function(){ 
alert (xdr.responseText); 


上 
xdr.onerror = function(){ 

alert ("An error occurred."); 
} 


xdr.timeout = 1000; 
xdr.ontimeout = Eunction(){ 
alert ("Request took too long."); 


xdr.open("get", "http://www.somewhere-else.com/page/"); 
xdr.send (null); 


这 个 例子 会 在 运行 1 秒 钟 后 超时 ， 并 随即 调用 ontimeout 事件 处 理 程序 。 
为 支持 PosT 请 求 ，XDR 对 象 提 供 了 contentType 属性 ,用 来 表示 发 送 数据 的 格式 ， 如 下 面 的 例 
子 所 示 。 
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Var xdr = new XDomainReduest () ; 
xdr.onload = function()t{ 
alert (xdr.responseText); 


xdr.onerror = function()t{ 
alert ("An error occurred."); 


xdr.open("post", "http://www.somewhere-else.com/page/"); 
xdr.contentType = "application/x-www-form-urlencoded"; 
xdr.send("namel=valuel&name2=value2"); 


这 个 属性 是 通过 XDR 对 象 影响 头 部 信息 的 唯一 方式 。 


21.4.2 ”其 他 浏览 器 对 CORS 的 实现 

Firefox 3.5 十 、Safari 4+ 、Chrome 、iOS 版 Safari 和 Android 平 台中 的 WebKit 都 通过 xMLHttpRequest 
对 象 实现 了 对 CORS 的 原生 支持 。 在 尝试 打开 不 同 来 源 的 资源 时 ， 无 需 额外 编写 代码 就 可 以 触发 这 个 行 
为 。 要 请 求 位 于 另 一 个 域 中 的 资源 , 使 用 标准 的 XHR 对 象 并 在 open () 方 法 中 传人 绝对 URL 即 可 , 例如 : 


Var xhr = createXxHR(); 
xhr.onreadystatechange = function()t{ 























Jl 





if (xhr.readyState == 4){ 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 
} 
J 
xhr.open("get", "http://www.somewhere-else.com/page/", true); 
xhr.send (null); 


与 正中 的 XDR 对 象 不 同 ， 通 过 跨 域 XHR 对 象 可 以 访问 status 和 statusText 属性 ， 而 且 还 支 
持 同步 请 求 。 跨 域 XHR 对 象 也 有 一 些 限制 ,但 为 了 安全 这 些 限 制 是 必需 的 。 以 下 就 是 这 些 限 种 
口 不 能 使 用 setRequestHeader () 设 置 自 定义 头 部 。 
口 不 能 发 送 和 接收 cookie。 
口 调用 getAllResponseHeaders () 方 法 总 会 返回 空 字 符 串 。 

由 于 无 论 同 源 请 求 还 是 跨 源 请 求 都 使 用 相同 的 接口 , 因此 对 于 本 地 资源 ,最 好 使 用 相对 URL, 在 访 
问 远程 资源 时 再 使 用 绝对 URL。 这 样 做 能 消除 歧义 ， 避 免 出 现 限制 访问 头 部 或 本 地 cookie 信息 等 问题 。 


























ds 
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21.4.3 Preflighted Reqeusts 


CORS 通过 一 种 叫做 Preflighted Requests 的 透明 服务 器 验证 机 制 支 持 开发 人 员 使 用 自 定 义 的 头 部 、 
GET 或 POST 之 外 的 方法 ,以 及 不 同类 型 的 主体 内 容 。 在 使 用 下 列 高 级 选项 来 发 送 请 求 时 ,就 会 向 服务 
器 发 送 一 个 Preflight 请 求 。 这 种 请 求 使 用 OPTIONS 方法 ， 发 送 下 列 头 部 。 

口 origin: 与 简单 的 请 求 相 同 。 
口 Access-Control-Request-Method: 请 求 自 身 使 用 的 方法 。 

口 Access-Control-Request-Headers: (可 选 ) 自 定义 的 头 部 信息 ， 多 个 头 部 以 逗号 分 隔 。 
以 下 是 一 个 带 有 自 定义 头 部 NCZ 的 使 用 PosT 方法 发 送 的 请 求 。 
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Origin: http://ww.nczonline.net 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: NCZ 


发 送 这 个 请 求 后 ,服务 器 可 以 决定 是 否 允 许 这 种 类 型 的 请 求 。 服 务 器 通过 在 响应 中 发 送 如 下 头 部 与 
浏览 器 进行 沟通 。 
口 Access-Control-Allow-Origin: 与 简单 的 请 求 相 同 。 
口 Access-Control-Allow-Methods: 允许 的 方法 ， 多 个 方法 以 逗号 分 隔 。 
口 Access-Control-Allow-Headers: 人 允许 的 头 部 ， 多 个 头 部 以 逗号 分 隔 。 
口 Access-Control-Max-Age: 应 该 将 这 个 Preflight 请 求 缓 存 多 长 时 间 ( 以 秒表 示 ) 。 
例如 : 
Access-Control-Allow-Origin: http://ww.nczonline.net 
Access-Control-Allow-Methods: POST, GET 


Access-Control-Allow-Headers: NCZ 
Access-Control-Max-Age: 1728000 


Preflight 请 求 结 束 后 ， 结 果 将 按照 响应 中 指定 的 时 间 缓 存 起 来 。 而 为 此 付出 的 代价 只 是 第 一 次 发 送 
这 种 请 求 时 会 多 一 次 HTTP 请 求 。 
支持 Preflight 请 求 的 浏览 器 包括 Firefox 3.5+、Safari 4+ 和 Chrome。1IE 10 及 更 早 版 本 都 不 支持 。 


21.4.4” 带 凭据 的 请 求 


默认 情况 下 ， 蜂 源 请 求 不 提供 凭据 (cookie 、HTTP 认证 及 客户 端 SSL 证 明 等 )。 通 过 将 
withcredentials 属性 设置 为 true， 可 以 指定 某 个 请 求 应 该 发 送 凭据 。 如 果 服 务 器 接受 带 凭 据 的 请 
求 ， 会 用 下 面 的 HITP 头 部 来 响应 。 

Access-Control-Allow-Credentials: true 

如 果 发 送 的 是 带 凭据 的 请 求 , 但 服务 器 的 响应 中 没有 包含 这 个 头 部 ,那么 浏览 屁 就 不 会 把 响应 交 给 
JavaScript ( 于 是 ，responseText 中 将 是 空 字符 串 ，status 的 值 为 0， 而 且 会 调用 onerror () 事 件 处 
理 程序 )。 另 外 ， 服 务 器 还 可 以 在 Preflight 响应 中 发 送 这 个 HTTP 头 部 ， 表 示人 允许 源 发 送 带 凭据 的 请 求 。 

支持 withcredentials 属性 的 浏览 器 有 Firefox 3.5+、Safari4+ 和 Chrome。IE 10 及 更 早 版 本 都 不 
支持 。 


21.4.5 ”路 浏览 器 的 CORS 


即使 浏览 器 对 CORS 的 支持 程度 并 不 都 一 样 , 但 所 有 浏览 器 都 支持 简单 的 ( 非 Preflight 和 不 带 凭据 
的 ) 请 求 ， 因 此 有 必要 实现 一 个 跨 浏览 器 的 方案 。 检 测 XHR 是 否 支持 CORS 的 最 简单 方式 ， 就 是 检查 
是 否 存在 withcredentials 属性 。 再 结合 检测 XxDomainRequest 对 象 是 否 存在 ,就 可 以 兼顾 所 有 浏 
览 器 了 。 


function createCORSRequest (method, url1)f{ 
Var xhr = new XMLHttpRequest (); 
if ("withCredentials" in xhr)t 
xhr.open (method, url, true); 
} else if (typeof XDomainRequest != "undefined")t{ 
vxhr = new XDomainRequest(); 
xhr.open (method, url); 
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} else { 

Wi ee Ts 
} 
return xhr; 


} 


Var request = createCORSRequest ("get", "http://www.somewhere-else.com/page/"); 
if (request)t{ 
request.onload = function(){ 
// 对 request.responseText 进行 处 理 
} . 


request.send(); 


CrossBrowserCORSRequestExample01.htm 











Firefox 、Safari 和 Chrome 中 的 XMLHttpRequest 对 象 与 正中 的 XDomainRequest 对 象 类 似 ， 都 
提供 了 够 用 的 接口 ， 因 此 以 上 模式 还 是 相当 有 用 的 。 这 两 个 对 象 共 同 的 属性 /方法 如 下 。 
口 abort () : 用 于 停止 正在 进行 的 请 求 。 
口 onerror: 用 于 替代 onreadystatechange 检测 错误 。 
口 onload: 用 于 替代 onreadystatechange 检测 成 功 。 
口 responseText: 用 于 取得 响应 内 容 。 
口 send () : 用 于 发 送 请 求 。 
以 上 成 员 都 包含 在 createcCORSRequest () 函数 返回 的 对 象 中 ， 在 所 有 浏览 器 中 都 能 正常 使 用 。 


21.5 ”其 他 跨 域 技术 


在 CORS 出 现 以 前 , 要 实现 跨 域 Ajax 通信 颇 费 一 些 周折 。 开发 人 员 想 出 了 一 些 办 法 , 利用 DOM 中 
能 够 执行 跨 域 请 求 的 功能 ， 在 不 依赖 XHR 对 象 的 情况 下 也 能 发 送 某 种 请 求 。 虽 然 CORS 技术 已 经 无 处 
不 在 ,但 开发 人 员 自 己 发 明 的 这 些 技术 仍然 被 广泛 使 用 ， 毕 竞 这 样 不 需要 修改 服务 器 端 代码 。 


21.5.1 ”图像 Ping 


上 述 第 一 种 跨 域 请 求 技 术 是 使 用 <img> 标 签 。 我 们 知道 ， 一 个 网 页 可 以 从 任何 网 页 中 加 载 图 像 ， 不 
用 担心 跨 域 不 跨 域 。 这 也 是 在 线 广告 跟踪 浏览 量 的 主要 方式 。 正 如 第 13 章 讨论 过 的 ， 也 可 以 动态 地 创 
建 图 像 ， 使 用 它们 的 onload 和 onerror 事件 处 理 程序 来 确定 是 否 接收 到 了 响应 。 

动态 创建 图 像 经 常用 于 图 像 Ping。 图 像 Ping 是 与 服务 器 进行 简单 、 单 向 的 跨 域 通信 的 一 种 方式 。 
请 求 的 数据 是 通过 查询 字符 串 形式 发 送 的 ， 而 响应 可 以 是 任意 内 容 , 但 通常 是 像素 图 或 204 响应 。 通 过 
图 像 Ping， 浏览 器 得 不 到 任何 具体 的 数据 ， 但 通过 侦 听 loaqa 和 error 事件 ， 它 能 知道 响应 是 什么 时 
候 接 收 到 的 。 来 看 下 面 的 例子 。 


中 Var img = new Image(); 

















































































































img.onload = img.onerror = function(){ 
alert ("Done!"); 
3 


img.src = "http://www.example.com/test?name=Nicholas"; 


ImagePingExample01.htm 
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这 里 创建 了 一 个 Image 的 实例 ， 然 后 将 onload 和 onerror 事件 处 理 程序 指定 为 同一 个 函数 。 这 
样 无 论 是 什么 响应 ， 只 要 请 求 完 成 ， 就 能 得 到 通知 。 请 求 从 设置 src 属性 那 一 刻 开始 ， 而 这 个 例子 在 请 
求 中 发 送 了 一 个 name 参数 。 

图 像 Ping 最 常用 于 跟踪 用 户 点 击 页 面 或 动态 广告 曝光 次 数 。 图 像 Ping 有 两 个 主要 的 缺点 ， 一 是 只 
能 发 送 GET 请 求 ， 二 是 无 法 访问 服务 器 的 响应 文本 。 因 此 ， 图 像 Ping 只 能 用 于 浏览 器 与 服务 器 间 的 单 
向 通信 。 


21.5.2 JSONP 


JSONP 是 JSON with padding ( 填充 式 JSON 或 参数 式 JSON ) 的 简写 ， 是 应 用 JSON 的 一 种 新 方法 ， 
在 后 来 的 Web 服务 中 非常 流行 JSONP 看 起 来 与 JSON 差不多 , 只 不 过 是 被 包含 在 函数 调用 中 的 JSON， 
就 像 下 面 这 样 。 

callback({ "name": "Nicholas" }); 

JSONP 由 两 部 分 组 成 : 回调 函数 和 数据 。 回 调 函 数 是 当 响 应 到 来 时 应 该 在 页 面 中 调用 的 函数 。 回 调 
函数 的 名 字 一 般 是 在 请 求 中 指定 的 。 而 数据 就 是 传人 回调 函数 中 的 JSON 数 据 。 下 面 是 一 个 典型 的 JSONP 
请 求 。 


http://freegeoip.net/json/?callback=handleResponse 


这 个 URL 是 在 请 求 一 个 JSONP 地 理 定位 服务 。 通 过 查询 字符 串 来 指定 JSONP 服务 的 回调 参数 是 很 
常见 的 ， 就 像 上 面 的 URL 所 示 ， 这 里 指定 的 回调 函数 的 名 字 叫 handleResponse ()。 

JSONP 是 通过 动态 <script> 元 素 (要 了 解 详细 信息 ， 请 参考 第 13 章 ) 来 使 用 的 ,使 用 时 可 以 为 
src 属性 指定 一 个 跨 域 URL。 这 里 的 <script> 元 素 与 <img> 元 素 类 似 ， 都 有 能 力 不 受 限制 地 从 其 他 域 
加 载 资源 。 因 为 ISONP 是 有 效 的 JavaScript 代码 ， 所 以 在 请 求 完 成 后 ， 即 在 JSONP 响应 加 载 到 页 面 中 
以 后 ， 就 会 立即 执行 。 来 看 一 个 例子 。 

function handqleResponse (zesponse){ 


alert("You’ re at IP address " + response.ip + ", which is in " + 
response.city + ", " + response.region name); 






















































































Var Script = document.createElement ("script"); 
script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
document .body.insertBefore(script, document.body.firstChild); 


JSONPExample01.htm 


这 个 例子 通过 查询 地 理 定位 服务 来 显示 你 的 全 地 址 和 位 置信 息 。 

JSONP 之 所 以 在 开发 人 员 中 极为 流行 ， 主 要 原因 是 它 非常 简单 易 用 。 与 图 像 Ping 相 比 ， 它 的 优点 
在 于 能 够 直接 访问 响应 文本 ， 支 持 在 浏览 絮 与 服务 器 之 间 双 向 通信 。 不 过 ，JSONP 也 有 两 点 不 足 。 
首先 , JSONP 是 从 其 他 域 中 加 载 代 码 执 行 。 如果 其 他 域 不 安全 , 很 可 能 会 在 响应 中 夹带 一 些 恶 意 代 
码 , 而 此 时 除了 完全 放弃 JSONP 调用 之 外 , 没有 办 法 追究 。 因 此 在 使 用 不 是 你 自己 运 维 的 Web 服务 时 ， 
一 定 得 保证 它 安全 可 靠 。 
其 次 ， 要 确定 JSONP 请 求 是 否 失败 并 不 容易 。 虽 然 HTML5 给 <script> 元 素 新 增 了 一 个 onerror 
事件 处 理 程序 , 但 目前 还 没有 得 到 任何 浏览 器 支持 。 为 此 , 开发 人 员 不 得 不 使 用 计时 器 检测 指定 时 间 内 
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是 否 接收 到 了 响应 。 但 就 算 这 样 也 不 能 尽 如 人 意 ， 毕 竟 不 是 每 个 用 户 上 网 的 速度 和 带宽 都 一 样 。 





21.5.3 Comet 

Comet 是 Alex Russell 发 明 的 一 个 词 儿 , 指 的 是 一 种 更 高 级 的 Ajax 技术 (经 常 也 有 人 称 为 “服务 器 
推送 ”)。Ajax 是 一 种 从 页 面向 服务 器 请 求 数据 的 技术 ， 而 Comet 则 是 一 种 服务 器 向 页 面 推送 数据 的 技 
术 。Comet 能 够 让 信息 近乎 实时 地 被 推送 到 页 面 上 ， 非 常 适合 处 理 体 育 比 赛 的 分 数 和 股票 报价 。 

有 两 种 实现 Comet 的 方式 : 长 轮 询 和 流 。 长 轮 询 是 传统 轮 询 ( 也 称 为 短 轮 询 ) 的 一 个 翻版 ， 即 浏览 
器 定时 向 服务 器 发 送 请 求 ， 看 有 没有 更 新 的 数据 。 图 21-1 展示 的 是 短 轮 询 的 时 间 线 。 


浏览 器 W 
| 
服务 器 


图 21-1 
长 轮 询 把 短 轮 询 颠倒 了 一 下 。 页 面 发 起 一 个 到 服务 器 的 请 求 ， 然 后 服务 器 一 直 保 持 连接 打开 ， 直 到 
有 数据 可 发 送 。 发 送 完 数据 之 后 ,浏览 器 关闭 连接 ， 随即 又 发 起 一 个 到 服务 器 的 新 请 求 。 这 一 过 程 在 页 
面 打开 期 间 一 直 持 续 不 断 。 图 21-2 展示 了 长 轮 询 的 时 间 线 。 


浏览 器 















































图 21-2 


无 论 是 短 轮 询 还 是 长 轮 询 ， 浏 览 器 都 要 在 接收 数据 之 前 ， 先 发 起 对 服务 器 的 连接 。 两 者 最 大 的 区 别 
在 于 服务 器 如 何 发 送 数据 。 短 轮 询 是 服务 需 立 即 发 送 响应 ,无论 数 据 是 否 有 效 ， 而 长 轮 询 是 等 待 发 送 响 
应 。 轮 询 的 优势 是 所 有 浏览 器 都 支持 ， 因 为 使 用 XHR 对 象 和 setTimeout () 就 能 实现 。 而 你 要 做 的 就 
是 决定 什么 时 候 发 送 请 求 。 
第 二 种 流行 的 Comet 实现 是 HTTP 流 。 流 不 同 于 上 述 两 种 轮 询 , 因为 它 在 页 面 的 整个 生命 周期 内 只 
使 用 一 个 HTTP 连接 。 具 体 来 说 ， 就 是 浏览 器 向 服务 咒 发 送 一 个 请 求 ， 而 服务 器 保持 连接 打开 ， 然 后 周 
期 性 地 向 浏览 需 发 送 数据 。 比 如 ， 下 面 这 段 PHP 脚本 就 是 采用 流 实现 的 服务 器 中 常见 的 形式 。 
<?php 
$i = 0; 
while(true){ 






























































GD Alex Russell 是 著名 JavaScript 框架 Dojo 的 创始 人 。 
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// 输 出 一 些 数据 ， 然 后 立即 刷新 输出 缓存 
echo "Number is $i"; 
flush(); 


// 等 几 秒 钟 
Sleep(10) ; 


$i++; 


} 

所 有 服务 器 端 语言 都 支持 打印 到 输出 缓存 然后 刷新 ( 将 输出 缓存 中 的 内 容 一 次 性 全 部 发 送 到 客户 
端 ) 的 功能 。 而 这 正 是 实现 HITP 流 的 关键 所 在 。 

在 Firefox 、Safari 、Opera 和 Chrome 中 ， 通 过 侦 听 readystatechange 事件 及 检测 readystate 
的 值 是 否 为 3， 就 可 以 利用 XHR 对 象 实现 HTTP 流 。 在 上 述 这 些 浏览 器 中 ， 随 着 不 断 从 服务 器 接收 数 
据 ，readystate 的 值 会 周期 性 地 变 为 3。 当 readystate 值 变 为 3 时 ，responseText 属性 中 就 会 保 
存 接收 到 的 所 有 数据 。 此 时 ， 就 需要 比较 此 前 接收 到 的 数据 ,决定 从 什么 位 置 开始 取得 最 新 的 数据 。 使 
用 XHR 对 象 实现 HTTP 流 的 典型 代码 如 下 所 示 。 


function createStreamingClient (url, progress, finished)t 








C9 var xhr = new XMLHttpRequest(), 
received = 0; 


xhr.open("get", url, true); 
xhr.onreadystatechange = function()1{ 
Var result; 


if (xhr.readyState == 3){ 
// 只 取得 最 新 数据 并 调整 计数 器 


result = xhr.responseText.substring (received); 
received += result.length; 





// 调 用 progress 回调 函数 
progress (result); 


} else if (xhr.readyState == 4)f{ 
finished(xhr.responseText); 


: 


}3 
xhr.send (null); 
return xhr; 


} 


var client = createStreamingClient ("streaming.php", function(data)t{ 
alert ("Received: " + data); 
}, function(data)t 
alert ("Done!"); 


}); 
HTTPStreamingExample01.htm 


这 个 createstreamingclient () 函数 接收 三 个 参数 : 要 连接 的 URL、 在 接收 到 数据 时 调用 的 函 
数 以 及 关闭 连接 时 调用 的 函数 。 有 时 候 ， 当 连接 关闭 时 ,很 可 能 还 需要 重新 建立 ， 所 以 关注 连接 什么 时 
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候 关 闭 还 是 有 必要 的 。 
只 要 readystatechange 事件 发 生 , 而 日 readystate 值 为 3， 就 对 responseText 进行 分 割 以 

取得 最 新 数据 .这 这 里 的 received 变量 用 于 记录 已 经 处 理 了 多 少 个 字符 , 每 次 readystate 值 为 3 时 都 
递增 。 然 后 ， 通 过 progress 回调 函数 来 处 理 传 人 的 新 数据 。 而 当 readystate 值 为 4 时 ， 则 执行 
finished 回调 函数 ， 传 人 响应 返回 的 全 部 内 容 。 

虽然 这 个 例子 比较 简单 ， 而 且 也 能 在 大 多 数 浏览 器 中 正常 运行 〈 正 除外 )， 但 管理 Comet 的 连接 是 
很 容易 出 错 的 ， 需 要 时 间 不 断 改进 才能 达到 完美 。 浏 览 需 社 区 认为 Comet 是 未 来 Web 的 一 个 重要 组 成 
部 分 ， 为 了 简化 这 一 技术 ， 又 为 Comet 创建 了 两 个 新 的 接口 。 


21.5.4 服务 器 发 送 事 件 


SSE ( Server-Sent Events ， 服 务 器 发 送 事件 ) 是 围绕 只 读 Comet 交互 推出 的 API 或 者 模式 。SSE API 
用 于 创建 到 服务 器 的 单 向 连接 ， 服 务 器 通过 这 个 连接 可 以 发 送 任意 数量 的 数据 。 服 务 器 响应 的 MIME 
类 型 必须 是 text/event-stream， 而 且 是 浏览 器 中 的 JavaScript API 能 解析 格式 输出 。SSE 支持 短 轮 
询 、 长 轮 询 和 HITP 流 ， 而 且 能 在 断 开 连接 时 自动 确定 何 时 重新 连接 。 有 了 这 么 简单 实用 的 API， 再 实 
现 Comet 就 容易 多 了 。 

支持 SSE 的 浏览 器 有 Firefox 6+、Safari 5+、Opera 11+、Chrome 和 iOS 4+ 版 Safari。 

1. SSE API 

SSE 的 JavaScriptAPI 与 其 他 传递 消息 的 JavaScript API 很 相似 。 要 预订 新 的 事件 流 ， 首 先 要 创建 一 


个 新 的 Eventsource 对 象 ， 并 传 进 一 个 人 口 点 : 







































































Var source = new EventSource("myevents.php"); 


注意 ,传人 的 URL 必须 与 创建 对 象 的 页 面 同 源 ( 相同 的 URL 模式 、 域 及 端口 )。EventSource 的 
实例 有 一 个 readystate 属性 ， 值 为 0 表示 正 连接 到 服务 器 , 值 为 1 表示 打开 了 连接 , 值 为 2 表示 关闭 
了 连接 。 

另外 ， 还 有 以 下 三 个 事件 。 

口 open: 在 建立 连接 时 触发 。 

口 message: 在 从 服务 器 接收 到 新 事件 时 触发 。 

口 error: 在 无 法 建立 连接 时 触发 。 

就 一 般 的 用 法 而 言 ，onmessage 事件 处 理 程序 也 没有 什么 特别 的 。 





























source.onmessage = function(event) { 
var data = event.data; 
/ /处理 数据 


}; 

服务 器 发 回 的 数据 以 字符 串 形 式 保 存在 event .data 中 。 

默认 情况 下 ，EventSource 对 象 会 保持 与 服务 器 的 活动 连接 。 如 果 连 接 断 开 ， 还 会 重新 连接 。 这 
就 意味 着 SSE 适合 长 轮 询 和 HTTP 流 。 如 果 想 强制 立即 断 开 连接 并 且 不 再 重新 连接 , 可 以 调用 close 
方法 。 

source.close(); 

2. 事件 流 

所 谓 的 服务 需 事 件 会 通过 一 个 持久 的 HTTP 响应 发 送 ， 这 个 响应 的 MIME 类 型 为 text/event- 
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stream。 响 应 的 格式 是 纯 文本 ， 最 简单 的 情况 是 每 个 数据 项 都 带 有 前 级 aata: ， 例 如 : 
data: foo 
data: bar 


data: foo 
data: bar 


对 以 上 响应 而 言 ， 事件 流 中 的 第 一 个 message 事件 返回 的 event .data 值 为 "foo" ， 第 二 个 
message 事件 返回 的 event .data 值 为 "bar"， 第 三 个 message 事件 返回 的 event .data 值 为 
"foo\nbar"( 注意 中 间 的 换行 符 )。 对 于 多 个 连续 的 以 data :开头 的 数据 行 ， 将 作为 多 段 数据 解析 ， 
每 个 值 之 间 以 一 个 换行 符 分 隔 。 只 有 在 包含 data: 的 数据 行 后 面 有 空 行 时 ， 才 会 触发 message 事件 ， 
因此 在 服务 器 上 生成 事件 流 时 不 能 忘 了 多 添加 这 一 行 。 

通过 ia: 前 绥 可 以 给 特定 的 事件 指定 一 个 关联 的 ID ， 这 个 人 D 行 位 于 data: 行 前 面 或 后 面 丝 可 : 

data: foo 

Ed 1 

设置 了 ID 后 ，EventSource 对 象 会 跟踪 上 一 次 触发 的 事件 。 如 果 连 接 断 开 , 会 向 服务 器 发 送 一 个 
包含 名 为 Last-Event-ID 的 特殊 HITP 头 部 的 请 求 ， 以 便服 务 器 知道 下 一 次 该 触发 哪个 事件 。 在 多 次 
连接 的 事件 流 中 ， 这 种 机 制 可 以 确保 浏览 器 以 正确 的 顺序 收 到 连接 的 数据 段 。 





















































21.5.5 Web Sockets 


要 说 最 令 人 津津 乐 道 的 新 浏览 器 API， 就 得 数 Web Sockets 了 。Web Sockets 的 目标 是 在 一 个 单独 的 
持久 连接 上 提供 全 双 工 、 双 向 通信 。 在 JavaScript 中 创建 了 Web Socket 之 后 ， 会 有 一 个 HTTP 请 求 发 送 
到 浏览 器 以 发 起 连接 。 在 取得 服务 器 响应 后 ， 建 立 的 连接 会 使 用 HTTP 升级 从 HTTP 协议 交换 为 Web 
Socket 协议 。 也 就 是 说 ， 使 用 标准 的 HTTP 服务 器 无 法 实现 Web Sockets， 只 有 支持 这 种 协议 的 专门 服 
务 右 才能 正常 工作 。 

由 于 Web Sockets 使 用 了 自 定义 的 协议 ,所 以 URL 模式 也 略 有 不 同 。 未 加 密 的 连接 不 再 是 http://， 
而 是 ws://; 加 密 的 连接 也 不 是 https://， 而 是 wss://。 在 使 用 Web Socket URL 时 ， 必 须 带 着 这 个 
模式 ， 因 为 将 来 还 有 可 能 支持 其 他 模式 。 
使 用 自 定义 协议 而 非 HTTP 协议 的 好 处 是 ,能够 在 客户 端 和 服务 器 之 间 发 送 非常 少量 的 数据 ， 而 不 
必 担 心 HTTP 那样 字 节 级 的 开销 。 由 于 传递 的 数据 包 很 小 ， 因 此 Web Sockets 非常 适合 移动 应 用 。 毕 竞 
对 移动 应 用 而 言 ， 带 宽 和 网 络 延迟 都 是 关键 问题 。 使 用 自 定义 协议 的 缺点 在 于 ,制定 协议 的 时 间 比 制定 
JavaScript API 的 时 间 还 要 长 。Web Sockets 曾 几 度 搁浅 ， 就 因为 不 断 有 人 发 现 这 个 新 协议 存在 一 致 性 和 
安全 性 的 问题 。Firefox 4 和 Opera 11 都 曾 默认 启用 Web Sockets， 但 在 发 布 前 夕 又 禁用 了 ， 因 为 又 发 现 
了 安全 隐患 。 目 前 支持 Web Sockets 的 浏览 器 有 Firefox 6+ 、Safari 5+、Chrome 和 iOS 4+ 版 Safari。 

1. Web Sockets API 

要 创建 Web Socket， 先 实例 一 个 Websocket 对 象 并 传人 要 连接 的 URL 


Var Socket = new WebSocket ("ws://www.example.com/server.php"); 


注意 ， 必 须 给 websocket 构造 函数 传人 绝对 URL。 同 源 策略 对 Web Sockets 不 适用 ， 因 此 可 以 通 
过 它 打开 到 任何 站 点 的 连接 。 至 于 是 否 会 与 某 个 域 中 的 页 面 通信 ， 则 完全 取决 于 服务 器 。( 通过 握手 信 
息 就 可 以 知道 请 求 来 自 何方 。) 
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实例 化 了 WebSocket 对 象 后 ,浏览 器 就 会 马上 尝试 创建 连接 。 与 XHR 类 似 ，WebSsocket 也 有 一 
个 表示 当前 状态 的 readystate 属性 。 不 过 ， 这 个 属性 的 值 与 XHR 并 不 相同 ， 而 是 如 下 所 示 。 
口 Websocket .OPENING (0): 正在 建立 连接 。 
口 WepSocket .OPEN (1): 已 经 建立 连接 。 
口 WebSocket .CLOSING (2): 正在 关闭 连接 。 
口 WebSocket .CLOSE (3): 已 经 关闭 连接 。 
WebSocket 没有 readystatechange 事件 ;不 过 , 它 有 其 他 事件 ,对 应 着 不 同 的 状态 ,readystate 
的 值 永远 从 0 开始 。 
要 关闭 Web Socket 连接 ， 可 以 在 任何 时 候 调 用 close () 方 法 。 


socket.close(); 


调用 了 close() 之 后 ，readystate 的 值 立即 变 为 2 (正在 关闭 )， 而 在 关闭 连接 后 就 会 变 成 3。 

2. 发 送 和 接收 数据 

Web Socket 打开 之 后 ， 就 可 以 通过 连接 发 送 和 接收 数据 。 要 向 服务 器 发 送 数 据 ， 使 用 send () 方 法 
并 传人 任意 字符 串 ， 例 如 : 


Var Socket = new WebSocket ("ws://www.example.com/server.php"); 
Socket .send("Hello world!"); 


为 Web Sockets 只 能 通过 连接 发 送 纯 文 本 数据 , 所 以 对 于 复杂 的 数据 结构 , 在 通过 连接 发 送 之 前 ， 
必须 进行 序列 化 。 下 面 的 例子 展示 了 先 将 数据 序列 化 为 一 个 JSON 字符 串 ， 然 后 再 发 送 到 服务 器 : 
Var message = { 
time: new Date() ， 


text: "Hello world!", 
clientId: "asdfp8734rew" 







































































3 

socket.send(JSON.stringify (message)); 

接 下 来 ， 服 务 器 要 读 取 其 中 的 数据 ， 就 要 解析 接收 到 的 JSON 字符 串 。 

当 服 务 器 向 客户 端 发 来 消息 时 ，websocket 对 象 就 会 触发 message 事件 。 这 个 message 
其 他 传递 消息 的 协议 类 似 ， 也 是 把 返回 的 数据 保存 在 event .data 属性 中 。 


socket.onmessage = function(event) { 
var data = event.data; 











山中 


件 与 











// 处 理 数 据 

js 

与 通过 send () 发 送 到 服务 器 的 数据 一 样 ，event .data 中 返回 的 数据 也 是 字符 串 。 如 果 你 想得到 
其 他 格式 的 数据 ， 必 须 手 工 解析 这 些 数据 。 

3. 其 他 事件 

WebSocket 对 象 还 有 其 他 三 个 事件 ， 在 连接 生命 周期 的 不 同 阶段 触发 。 
口 open: 在 成 功 建立 连接 时 触发 。 
口 error: 在 发 生 错 误 时 和 触发， 连接 不 能 持续 。 
口 close: 在 连接 关闭 时 触发 。 
WebSocket 对 象 不 支持 DOM 2 级 事件 侦 听 器 ， 因 此 必须 使 用 DOM 0 级 语法 分 别 定义 每 个 事件 处 
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理 程序 。 





Var Socket = new WebSocket ("ws://www.example.com/server.php"); 


Socket .onopen = function()1{ 
aletrt("Connection established."); 


] 


socket.onerror = function(){ 
alert ("Connection error."); 


] 





Socket .onclose = function(){ 
alert ("Connection closed."); 








> 


在 这 三 个 事件 中 ， 只 有 close 事件 的 event 对 象 有 额外 的 信息 。 这 个 事件 的 事件 对 象 有 三 个 额外 
的 属性 : wasclean、code 和 reason。 其 中 ,wasClean 是 一 个 布尔 值 ， 表 示 连 接 是 否 已 经 明确 地 关 
闭 ; code 是 服务 器 返回 的 数值 状态 码 ; 而 reason 是 一 个 字符 串 ， 包 含 服务 器 发 回 的 消息 。 可 以 把 这 
些 信 息 显 示 给 用 户 ， 也 可 以 记录 到 日 志 中 以 便 将 来 分 析 。 

Socket .onclose = function(event){ 


console.log("Was clean? " + event.wasClean + " Code=" + event.code + " Reason=" 
+ event.reason); 














二 这 
21.5.6 SSE 与 Web Sockets 


面 对 某 个 具体 的 用 例 , 在 考虑 是 使 用 SSE 还 是 使 用 Web Sockets 时 , 可 以 考虑 如 下 几 个 因素 。 首先 ， 
你 是 否 有 自由 度 建立 和 维护 Web Sockets 服务 器 ? 因为 Web Socket 协议 不 同 于 HITP， 所 以 现 有 服务 器 
不 能 用 于 Web Socket 通信 。SSE 倒是 通过 常规 HTTP 通信 ， 因 此 现 有 服务 器 就 可 以 满足 需求 。 

第 二 个 要 考虑 的 问题 是 到 底 需 不 需要 双向 通信 。 如 果 用 例 只 需 读 取 服 务 器 数据 ( 如 比赛 成 绩 )， 那 
么 SSE 比较 容易 实现 。 如 果 用 例 必 须 双 向 通信 (如 聊天 室 )， 那 么 Web Sockets 显然 更 好 。 别 忘 了 ,在 
不 能 选择 Web Sockets 的 情况 下 ， 组 合 XHR 和 SSE 也 是 能 实现 双向 通信 的 。 


21.6 ”安全 


讨论 Ajax 和 Comet 安全 的 文章 可 谓 连 篇 累 肤 ， 而 相关 主题 的 书 也 已 经 出 了 很 多 本 了 。 大 型 Ajax 应 
用 程序 的 安全 问题 涉及 面 非 常 之 广 ， 但 我 们 可 以 从 普遍 意义 上 探讨 一 些 基本 的 问题 。 
首先 ， 可 以 通过 XHR 访问 的 任何 URL 也 可 以 通过 浏览 器 或 服务 器 来 访问 。 下 面 的 URL 就 是 一 个 
例子 。 

/getuserinfo.php?id=23 

如 果 是 向 这 个 URL 发 送 请 求 ， 可 以 想象 结果 会 返回 ID 为 23 的 用 户 的 某 些 数据 。 谁 也 无 法 保证 别 
人 不 会 将 这 个 URL 的 用 户 ID 修改 为 24、56 或 其 他 值 。 因 此 , getuserinfo.php 文件 必须 知道 请 求 者 
是 否 真 的 有 权限 访问 要 请 求 的 数据 ; 否则 , 你 的 服务 器 就 会 门户 大 开 , 任何 人 的 数据 都 可 能 被 泄漏 出 去 。 

对 于 未 被 授权 系统 有 权 访 问 某 个 资源 的 情况 ， 我 们 称 之 为 CSRF ( Cross-Site Request Forgery ， 跨 站 
点 请 求 伪 造 )。 未 被 授权 系统 会 伪装 自己 , 让 处 理 请 求 的 服务 器 认为 它 是 合法 的 。 受 到 CSRF 攻击 的 Ajax 
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程序 有 大 有 小 ， 攻 击 行为 既 有 旨 在 揭示 系统 漏洞 的 恶作剧 ， 也 有 恶意 的 数据 窃取 或 数据 销毁 。 

为 确保 通过 XHR 访问 的 URL 安全 ， 通 行 的 做 法 就 是 验证 发 送 请 求 者 是 否 有 权限 访问 相应 的 资源 。 
有 下 列 几 种 方式 可 供 选择 。 
口 要 求 以 SSL 连接 来 访问 可 以 通过 XHR 请 求 的 资源 。 
口 要 求 每 一 次 请 求 都 要 附带 经 过 相应 算法 计算 得 到 的 验证 码 。 
请 注意 ， 下 列 措施 对 防范 CSRF 攻击 不 起 作用 。 



































口 要 求 发 送 PosT 而 不 是 GET 请 求 很 容易 改变 。 
口 检查 来 源 URL 以 确定 是 否 可 信 一 一 来 源 记录 很 容易 伪造 。 
口 基于 cookie 信息 进行 验证 一 一 同样 很 容易 伪造 。 




















XHR 对 象 也 提供 了 一 些 安全 机 制 ， 虽然 表面 上 看 可 以 保证 安全 ,但 实际 上 却 相当 不 可 靠 。 实际 上 ， 
前 面 介 绍 的 open () 方 法 还 能 再 接收 两 个 参数 : 要 随 请 求 一 起 发 送 的 用 户 名 和 密码 。 带 有 这 两 个 参数 的 
请 求 可 以 通过 SSL 发 送 给 服务 器 上 的 页 面 ， 如 下 面 的 例子 所 示 。 





























xhr.open("get"，"example.bhp"，true，"username"， "password" ); // 不 要 这 样 做 | | 





即便 可 以 考虑 这 种 安全 机 制 ， 但 还 是 尽量 不 要 这 样 做 。 把 用 户 名 和 密码 保存 在 
JavaScript 代码 中 本 身 就 是 极为 不 安全 的 。 任 何人 ， 只 要 他 会 使 用 JavaScript 调试 器 ， 
就 可 以 通过 查看 相应 的 变量 发 现 纯 文本 形式 的 用 户 名 和 密码 。 






21.7 小 结 


Ajax 是 无 需 刷新 页 面 就 能 够 从 服务 器 取得 数据 的 一 种 方法 。 关 于 Ajax， 可 以 从 以 下 几 方 面 来 总 结 
一 下 。 
口 负责 Ajax 运作 的 核心 对 象 是 xMLHttpRequest (XHR ) 对 象 。 
口 XHR 对 象 由 微软 最 早 在 IE5 中 引入 ， 用 于 通过 JavaScript 从 服务 器 取得 XML 数据 。 
口 在 此 之 后 ，Firefox 、Safari 、Chrome 和 Opera 都 实现 了 相同 的 特性 ,使 XHR 成 为 了 Web 的 一 个 



































事实 标准 。 
口 虽然 实现 之 间 存 在 差异 , 但 XHR 对 象 的 基本 用 法 在 不 同 浏览 器 间 还 是 相对 规范 的 ,因此 可 以 放 
心地 用 在 Web 开发 当中 。 








同 源 策略 是 对 XHR 的 一 个 主要 约束 ， 它 为 通信 设置 了 “相同 的 域 、 相 同 的 端口 、 相 同 的 协议 ”这 一 
限制 。 试 图 访问 上 述 限制 之 外 的 资源 ， 都 会 引发 安全 错误 ， 除非 采用 被 认可 的 跨 域 解决 方案 。 这 个 解决 
方案 叫做 CORS ( Cross-Origin Resource Sharing， 跨 源 资源 共享 )，IE8 通过 XDomainRequest 对 象 支持 
CORS ， 其 他 浏览 器 通过 XHR 对 象 原生 支持 CORS。 图 像 Ping 和 JSONP 是 另外 两 种 跨 域 通信 的 技术 ， 
但 不 如 CORS 稳妥 。 

Comet 是 对 Ajax 的 进一步 扩展 ， 让 服务 器 几乎 能 够 实时 地 向 客户 端 推 送 数据 。 实 现 Comet 的 手段 
主要 有 两 个 : 长 轮 询 和 HTTP 流 。 所 有 浏览 器 都 支持 长 轮 询 , 而 只 有 部 分 浏览 器 原生 支持 HTTP 流 。SSE 
( Server-Sent Events， 服 务 器 发 送 事件 ) 是 一 种 实现 Comet 交互 的 浏览 器 API， 既 支持 长 轮 询 ， 也 支持 
HTTP 流 。 
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Web Sockets 是 一 种 与 服务 器 进行 全 双 工 、 双 向 通信 的 信道 。 与 其 他 方案 不 同 ，Web Sockets 不 使 用 
HTTP 协议 ， 而 使 用 一 种 自 定义 的 协议 。 这 种 协议 专门 为 快速 传输 小 数据 设计 。 虽 然 要 求 使 用 不 同 的 
Web 服务 器 ， 但 却 具有 速度 上 的 优势 。 

各 方面 对 Ajax 和 Comet 的 鼓吹 吸引 了 越 来 越 多 的 开发 人 员 学 习 JavaScript, 人 们 对 Web 开发 的 关注 
也 再 度 升温 。 与 Ajax 有 关 的 概念 都 还 相对 比较 新 ， 这 些 概 念 会 随 着 时 间 推 移 继续 发 展 。 





Ajax 是 一 个 非常 庞大 的 主题 , 完整 地 讨论 这 个 主题 超出 了 本 书 的 范围 。 要 想 了 解 


有 关 Ajax 的 更 多 信息 ， 请 读者 参考 《Ajax 高 级 程序 设计 (第 2 版 )》。 
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本 章 内 容 

口 使 用 高 级 函数 
口 防 算 改 对 象 

DQ Yielding Timers 






































J avaScript 是 一 种 极其 灵活 的 语言 ， 具 有 多 种 使 用 风格 。 一 般 来 说 ,编写 JavaScript 要 么 使 用 过 
程 方式 ， 要 么 使 用 面向 对 象 方式 。 然 而 ， 由 于 它 天 生 的 动态 属性 ， 这 种 语言 还 能 使 用 更 为 复杂 
和 有 趣 的 模式 。 这 些 技巧 要 利用 ECMAScript 的 语言 特点 、BOM 扩展 和 DOM 功能 来 获得 强大 的 效果 。 


22.1 高 级 函数 


函数 是 JavaScript 中 最 有 趣 的 部 分 之 一 。 它 们 本 质 上 是 十 分 简单 和 过 程 化 的 ， 但 也 可 以 是 非常 复杂 
和 动态 的 。 一 些 额 外 的 功能 可 以 通过 使 用 闭 包 来 实现 。 此 外 ， 由 于 所 有 的 函数 都 是 对 象 ， 所 以 使 用 函数 
旧 针 非常 简单 。 这 些 令 JavaScript 函数 不 仅 有 趣 而 且 强 大 。 以 下 几 节 描绘 了 几 种 在 JavaScript 中 使 用 函数 
的 高 级 方法 。 


22.1.1 安全 的 类 型 检测 


JavaScript 内 置 的 类 型 检测 机 制 并 非 完 全 可 靠 。 事 实 上 ， 发 生 错 误 和 否定 及 错误 肯定 的 情况 也 不 在 少 
数 。 比 如 说 typeof 操作 符 吧 ， 由 于 它 有 一 些 无 法 预知 的 行为 ， 经 常会 导致 检测 数据 类 型 时 得 到 不 靠 谱 
的 结果 。Safari ( 直至 第 4 版 ) 在 对 正则 表达 式 应 用 typeof 操作 符 时 会 返回 function"， 因 此 很 难 确 
定 某 个 值 到 底 是 不 是 函数 。 

再 比如 ，instanceof 操作 符 在 存在 多 个 全 局 作用 域 ( 像 一 个 页 面包 含 多 个 frame ) 的 情况 下 ， 也 
是 问题 多 多 。 一 个 经 典 的 例子 (第 5 章 也 提 到 过 ) 就 是 像 下 面 这 样 将 对 象 标识 为 数组 。 

Var isArray = Value instanceof Array; 

以 上 代码 要 返回 true, value 必须 是 一 个 数组 ,而且 还 必须 与 Array 构造 函数 在 同 个 全 局 作用 域 
中 。( 别 忘 了 ,Array 是 window 的 属性 。) 如 果 value 是 在 另 个 frame 中 定义 的 数组 ,那么 以 上 代码 
就 会 返回 false。 

在 检测 某 个 对 象 到 底 是 原生 对 象 还 是 开发 人 员 自 定义 的 对 象 的 时 候 , 也 会 有 问题 。 出 现 这 个 问题 的 
原因 是 浏览 器 开始 原生 支持 JSON 对 象 了 。 因 为 很 多 人 一 直 在 使 用 Douglas Crockford 的 JSON 库 ， 而 该 
库 定义 了 一 个 全 局 JSoN 对 象 。 于 是 开发 人 员 很 难 确定 页 面 中 的 JsoN 对 象 到 底 是 不 是 原生 的 。 

解决 上 述 问题 的 办 法 都 一 样 。 大 家 知道 ， 在 任何 值 上 调用 object 原生 的 tostring () 方 法 ， 都 会 
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返回 一 个 [object NativeconstructorName] 格 式 的 字符 串 。 每 个 类 在 内 部 都 有 一 个 [[class]] 属 

性 ， 这 个 属性 中 就 指定 了 上 述 字 符 串 中 的 构造 函数 名 。 举 个 例子 吧 。 
alert (Object .prototype.tostring.call (value)); //"[object Array]" 

由 于 原生 数组 的 构造 函数 名 与 全 局 作用 域 无 关 ， 因 此 使 用 tostring () 就 能 保证 返回 一 致 的 值 。 利 

用 这 一 点 ， 可 以 创建 如 下 函数 : 


























function isArray (value)f{ 
return Object .prototype.toString.call(value) == "[object Array]"; 


} 
同样 ， 也 可 以 基于 这 一 思路 来 测试 某 个 值 是 不 是 原生 函数 或 正则 表达 式 : 


function isFunction(value)t 

return Object.prototype.toString.call (value) == "[object Function]"; 
} 
function isRegExp (value)f{ 

return Object.prototype.toString.call (value) == "[object RegExp]"; 








} 


不 过 要 注意 , 对 于 在 正中 以 COM 对 象形 式 实 现 的 任何 函数 ，isFunction () 都 将 返回 false ( 
为 它们 并 非 原生 的 JavaScript 函数 ， 请 参考 第 10 章 中 更 详细 的 介绍 ) 。 

这 一 技巧 也 广泛 应 用 于 检测 原生 JSON 对 象 。object 的 tostring () 方 法 不 能 检测 非 原生 构造 函 
数 的 构造 函数 名 。 因 此 ， 开 发 人 员 定 义 的 任何 构造 函数 都 将 返回 [object Object]。 有 些 JavaScript 库 会 
含 与 下 面 类 似 的 代码 。 

Var isNativeJSON = window.JSON && Object.prototype.toSstring.call (JSON) == 

(9 "[object JSON]"; 

在 Web 开发 中 能 够 区 分 原生 与 非 原 生 JavaScript 对 象 非常 重要 。 只 有 这 样 才能 确切 知道 某 个 对 象 到 

底 有 哪些 功能 。 这 个 技巧 可 以 对 任何 对 象 给 出 正确 的 结论 。 























































请 注意 ，Object.prototpye.toString() 本 身 也 可 能 会 被 修改 。 本 节 讨 论 的 
技巧 假设 Object.prototpye.toSstring() 是 未 被 修改 过 的 原生 版 本 。 





22.1.2 ”作用 域 安 全 的 构造 函数 

第 6 章 讲述 了 用 于 自 定义 对 象 的 构造 函数 的 定义 和 用 法 。 你 应 该 还 记得 , 构造 函数 其 实 就 是 一 个 使 
用 new 操作 符 调用 的 函数 。 当 使 用 new 调用 时 ,构造 函数 内 用 到 的 this 对 象 会 指向 新 创建 的 对 象 实 
例 ， 如 下 面 的 例子 所 示 : 








function Person(name, age, job){ 
CY) this.name = name; 
this.age = age; 
this .Job = JOb; 


} 





Var person = new Person("Nicholas", 29, "Software Engineer"); 


ScopeSafeConstructorsExample01.htm 
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哥 作 





上 面 这 个 例子 中 , Person 构造 函数 使 用 this 对 象 给 三 个 属性 赋值 : name、age 和 job。 当 和 new 
符 连 用 时 ， 则 会 创建 一 个 新 的 Person 对象， 同时 会 给 它 分 配 这 些 属性 。 问 题 出 在 当 没有 使 用 new 
符 来 调用 该 构造 函数 的 情况 上 。 由 于 该 this 对 象 是 在 运行 时 绑 定 的 ， 所 以 直接 调用 Person () ， 





























this 会 映射 到 全 局 对 象 window 上 ， 导 致 错误 对 象 属性 的 意外 增加 。 例 如 : 
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Var person = Person("Nicholas", 29, "Software Engineer"); 


alert (window.name); //"Nicholas" 
alert (window.age); /29 
alert (window.job); //"Software Engineer" 





ScopeSafeConstructorsExample01.htm 


这 里 , 原本 针对 Person 实例 的 三 个 属性 被 加 到 wingdow 对 象 上 ， 因 为 构造 函数 是 作为 普通 函数 调 
, 忽略 了 new 操作 符 。 这 个 问题 是 由 this 对 象 的 晚 绑 定 造成 的 , 在 这 里 this 被 解析 成 了 window 
。 由 于 window 的 name 属性 是 用 于 识别 链接 目标 和 frame 的 ， 所 以 这 里 对 该 属性 的 偶然 获 盖 可 能 
致 该 页 面 上 出 现 其 他 错误 。 这 个 问题 的 解决 方法 就 是 创建 一 个 J] DOD0D000000。 
作用 域 安全 的 构造 函数 在 进行 任何 更 改 前 ， 首 先 确认 this 对 象 是 正确 类 型 的 实例 。 如 果 不 是 ， 那 
创建 新 的 实例 并 返回 。 请 看 以 下 例子 : 
function Person(name, age, job)t 
if (this instanceof Person){ 
this.name = name; 
this.age = age; 
this.job = job; 
} else { 
return new Person(name, age, job); 





















































} 
} 


var personl = Person("Nicholas", 29, "Software Engineer"); 
alert (window.name); ly fh 
alert (personl .name); //"Nicholas" 


Var person2 = new Person("Shelby", 34, "Ergonomist"); 
alert (person2 .name); //"Shelby" 


ScopeSafeConstructorsExample02.htm 


这 上段 代码 中 的 Person 构造 函数 添加 了 一 个 检查 并 确保 this 对 象 是 Person 实例 的 if£ 语句， 它 
要 么 使 用 new 操作 符 , 要么 在 现 有 的 Person 实例 环境 中 调用 构造 函数 。 任何 一 种 情况 下 ,对 象 初 
都 能 正常 进行 。 如 果 this 并 非 Person 的 实例 , 那么 会 再 次 使 用 new 操作 符 调用 构造 函数 并 返回 
。 最 后 的 结果 是 , 调用 Person 构造 聘 数 时 无 论 是 否 使 用 new 操作 符 , 都 会 返回 一 个 Person 的 新 
， 这 就 避免 了 在 全 局 对 象 上 意外 设置 属性 。 
关于 作用 域 安全 的 构造 函数 的 贴心 提示 。 实 现 这 个 模式 后 ， 你 就 锁定 了 可 以 调用 构造 函数 的 环境 。 
你 使 用 构造 函数 窃取 模式 的 继承 且 不 使 用 原型 链 ， 那 么 这 个 继承 很 可 能 被 破坏 。 这 里 有 个 例子 : 
function Polygon(sides)1{ 

if (this instanceof Polygon) { 


this.sides = sides; 
this.getArea = function()t{ 










































































图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


22.1 了 录 数 599 


到 
演 
区 





} else { 
return new Polygon (sides); 


function Rectangle (width, height)f{ 
Polygon.call (this, 2); 
this.width = width; 
this.height = height; 
this.getArea = function()t{ 
return this.width * this.height; 
3 
} 


Var rect = new Rectangle(5, 10);} 
alert (rect.sides); //undefined 


ScopeSafeConstructorsExample03.htm 


在 这 段 代 码 中 ，Polygon 构造 函数 是 作用 域 安全 的 ， 然而 Rectangle 构造 函数 则 不 是 。 新 创建 一 
个 Rectangle 实例 之 后 , 这 个 实例 应 该 通过 Polygon .call () 来 继承 Polygon 的 sides 属性 ,但 是 ， 
由 于 Polygon 构造 函数 是 作用 域 安全 的 ，this 对 象 并 非 Polygon 的 实例 ， 所 以 会 创建 并 返回 一 个 新 
的 Polygon 对 象 。Rectangle 构造 图 数 中 的 this 对 象 并 没有 得 到 增长 ， 同 时 Polygon.call() 返 回 
的 值 也 没有 用 到 ， 所 以 Rectangle 实例 中 就 不 会 有 sides 属性 。 
如 果 构 造 函 数 欠 取 结合 使 用 原型 链 或 者 寄生 组 合 则 可 以 解决 这 个 问题 。 考 虑 以 下 例子 : 
时 ) function Polygon (sides) { 
if (this instanceof Polygon) { 
this.sides = sides; 


this.getArea = function()t{ 
return 0; 

















7 
} else { 
return new Polygon (sides); 





} 
} 


function Rectangle (width, height)f{ 
Polygon.call (this, 2); 
this.width = width; 
this.height = height; 
this.getArea = function()t{ 
return this.width * this.height; 
}3 
} 


Rectangle.prototype = new Polygon(); 


Var rect = new Rectangle(5, 10);} 
alert (rect.sides); /7172 


ScopeSafeConstructorsExample04.htm 
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上 面 这 段 重 写 的 代码 中 ,一 个 Rectangle 实 例 也 同时 是 一 个 Polygon 实 例 ,所 以 Polygon.call1() 
会 照 原意 执行 ， 最 终 为 Rectangle 实例 添加 了 sides 属性 。 

多 个 程序 员 在 同一 个 页 面 上 写 JavaScript 代码 的 环境 中 ， 作 用 域 安全 构造 函数 就 很 有 用 了 。 届 时 ， 
对 全 局 对 象 意外 的 更 改 可 能 会 导致 一 些 常 常 难以 追踪 的 错误 。 除 非 你 单纯 基于 构造 函数 窃取 来 实现 继 
承 ， 推 荐 作用 域 安全 的 构造 函数 作为 最 佳 实践 。 


22.1.3 ” 情 性 载 入 函数 


因为 浏览 器 之 间 行 为 的 差异 ， 多 数 JavaScript 代码 包含 了 大 量 的 ifE 语句 ， 将 执行 引导 到 正确 的 代 
人 码 中 。 看 看 下 面 来 自 上 一 章 的 createXHR () 国 数 。 


function createXxHR(){ 



























































if (typeof XMLHttpRequest != "undefined")t{ 
return new XMLHttpRequest (); 
} else if (typeof ActiveXxObject != "undefined")t{ 
if (typeof arguments.callee.activexSstring != "string")t{ 
Var versions = ["MSXML2 .XMLHttp.6.0", "MSXML2 .XMLHttp.3.0", 


"MSXML2 .XMLHttp"], 
i,1len; 


for (i=0,len=versions.length; i < len; i++){ 

try { 
new ActiveXObject (versions[i]); 
arguments .callee.activeXString = versions[i]; 
break; 

} catch (ex){ 
// 跳 过 

} 


} 


return new ActiveXObject (arguments.callee.activexString); 
} else { 
throw new Error("No XHR object available."); 
了 
} 


每 次 调用 createXHR () 的 时 候 ， 它 都 要 对 浏览 器 所 支持 的 能 力 仔细 检查 。 首 先 检 查 内 置 的 XHR， 
然后 测试 有 没有 基于 ActiveX 的 XHR, 最 后 如 果 都 没有 发 现 的 话 就 抛 出 一 个 错误 。 每 次 调用 该 函数 都 是 
这 样 ， 即 使 每 次 调用 时 分 支 的 结果 都 不 变 : 如 果 浏 览 器 支持 内 置 XHR， 那 么 它 就 一 直 文 持 了 ,那么 这 
种 测试 就 变 得 没 必要 了 。 即 使 只 有 一 个 if 语句 的 代码 ， 也 肯定 要 比 没有 if 语句 的 慢 ， 所 以 如 果 if 语 
名 不必 每 次 执行 ,那么 代码 可 以 运行 地 更 快 一 些 。 解 决 方案 就 是 称 之 为 惰性 载 人 的 技巧 。 

惰性 载 入 表示 函数 执行 的 分 支 仅 会 发 生 一 次 。 有 两 种 实现 惰性 载 人 的 方式 ， 第 一 种 就 是 在 函数 被 调 
用 时 再 处 理 函数 。 在 第 一 次 调用 的 过 程 中 ,该 函数 会 被 覆盖 为 男 外 一 个 按 合适 方式 执行 的 函数 ， 这 样 任 
何 对 原 函 数 的 调用 都 不 用 再 经 过 执行 的 分 支 了 。 例 如 ， 可 以 用 下 面 的 方式 使 用 惰性 载重 写 


CTeateXHR () 。 








































































































function CreateXHR () { 
思 if (typeof XMLHttpRequest != "undqefined" ){ 
createXHR = Eunction(){ 
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return new XMLHttpRequest (); 


}; 
} else if (typeof ActiveXOobject != "undefined")f{ 
CreatexXHR = function(){ 
if (typeof arguments.callee.activexSstring != "string")t{ 
Var versions = ["MSXML2 .XMLHttp.6.0", "MSXML2 .XMLHttp.3.0", 
"MSXML2 .XMLHttp"], 
i, len; 
for (i=0,len=versions.length; i < len; i++){ 
try { 
new ActiveXxObject (versions[i]); 
arguments .callee.activeXString = versions[i]; 
break; 
} catch (ex){ 
//skip 
} 
} 
} 
return new ActivexobJject (arguments.callee.activeXString); 
}; 
} else { 
CreateXHR = function(){ 
throw new Error("No XHR object available."); 
}; 
} 


return createXHR(); 


LazyLoadingExample01.htm 
在 这 个 惰性 载 人 的 createxHR () 中，if 语句 的 每 一 个 分 支 都 会 为 createXHR 变量 赋值 ， 有 效 徐 





盖 了 原 有 的 函数 。 最 后 一 步 便 是 调用 新 赋 的 函数 。 下 一 次 调用 createxHR() 的 时 候 ， 就 会 直接 调用 被 
分 配 的 函数 ， 这 样 就 不 用 再 次 执行 i£ 语句 了 。 
第 二 种 实现 惰性 载 入 的 方式 是 在 声明 函数 时 就 指定 适当 的 函数 。 这样 , 第 一 次 调用 函数 时 就 不 会 损 
失 性 能 了 ， 而 在 代码 首次 加 载 时 会 损失 一 点 性 能 。 以 下 就 是 按照 这 一 思路 重 写 前 面 例子 的 结果 。 
Var createxHR = (Eunction(){ 
if (typeof XMLHttpRequest != "undefined")t{ 


return function(){ 
return new XMLHttpRequest (); 









































}3 
} else if (typeof ActiveXObject != "undefined")t{ 
return function(){ 
if (typeof arguments.callee.activexSstring != "string")t{ 
Var versions = ["MSXML2 .XMLHttp.6.0", "MSXML2 .XMLHttp.3.0", 
"MSXML2 .XMLHttp"], 
i, len; 
for (i=0,len=versions.length; i < len; i++)f{ 
try { 


new ActiveXObject (versions[i]); 
arguments .callee.activeXString = versions[i]; 
break; 
} catch (ex){ 
//skip 
} 
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} 
return new ActiveXObject (arguments .callee.actiVeXString) : 
3 
} else { 
return function(){ 
throw new Error("No XHR object available."); 


LazyLoadingExample02.htm 




















这 个 例子 中 使 用 的 技巧 是 创建 一 个 匿名 、 自 执行 的 函数 ， 用 以 确定 应 该 使 用 哪 一 个 函数 实现 。 实 际 
的 逻辑 都 一 样 。 不 一 样 的 地 方 就 是 第 一 行 代码 (使 用 var 定义 函数 ) 、 新 增 了 自 执行 的 匿名 函数 ,另外 

















每 个 分 支 都 返回 正确 的 函数 定义 ， 以 便 立 即将 其 赋值 给 createxHR ()。 




















惰性 载 入 函数 的 优点 是 只 在 执行 分 支 代码 时 牺牲 一 点 儿 性 能 。 至 于 哪 种 方式 更 合适 ,就 要 看 你 的 具 











体 需求 而 定 了 。 不 过 这 两 种 方式 都 能 避免 执行 不 必要 的 代码 。 


22.1.4 ”函数 绑 定 











另 一 个 日 益 流 行 的 高 级 技巧 叫做 函数 绑 定 。 函 数 绑 定 要 创建 一 个 函数 ， 可 以 在 特定 的 this 环境 中 














以 指定 参数 调用 另 一 个 函数 。 该 技巧 常常 和 回调 函数 与 事件 处 理 程序 一 起 使 用 ,以便 在 将 函数 作为 变 





传递 的 同时 保留 代码 执行 环境 。 请 看 以 下 例子 : 


var handler = { 
message: "Event handled", 


handleClick: function(event)t{ 
alert (this.message); 
} 
了 


Var btn = document .getElementBylid("my-btn"); 
EventUtil.addHandler (btn, "click", handler.handleClick); 


三 


里 


在 上 面 这 个 例子 中 ,创建 了 一 个 叫做 nandler 的 对 象 。nandler .handleClick() 方 法 被 分 配 为 











一 个 DOM 按钮 的 事件 处 理 程序 。 当 按 下 该 按钮 时 ， 就 调用 该 函数 ， 显 示 一 个 警告 框 。 虽 然 貌似 警告 框 
































应 该 显示 Event handled ， 然 而 实际 上 显示 的 是 undefiengd。 这 个 问题 在 于 没有 保存 
handler .handleClick() 的 环境 , 所 以 this 对 象 最 后 是 指向 了 DOM 按钮 而 非 nandler (在 下 8 中 ， 











this 指向 window。 ) 可 以 如 下 面 例子 所 示 ， 使 用 一 个 闭 包 来 修正 这 个 问题 。 


var handler = { 
message: "Event handled", 





handleClick: function(event)t{ 
alert (this.message); 
} 
区 


var btn = document .getElementById("my-btn"); 

EventUtil.addHandler (btn, "click", function(event){ 
handler.handleClick (event); 

}); 
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这 个 解决 方案 在 onclick 事件 处 理 程序 内 使 用 了 一 个 闭 包 直接 调用 hanaler .handleclick ()。 
当然 ,这 是 特定 于 这 段 代 码 的 解决 方案 。 创建 多 个 闭 包 可 能 会 令 代 码 变 得 难于 理解 和 调试 。 因 此 ,很 多 
JavaScript 库 实 现 了 一 个 可 以 将 函数 绑 定 到 指定 环境 的 函数 。 这 个 函数 一 般 都 叫 bina() 。 
一 个 简单 的 bina() 函数 接受 一 个 函数 和 一 个 环境 , 并 返回 一 个 在 给 定 环 境 中 调用 给 定 函数 的 函数 ， 
并 且 将 所 有 参数 原封 不 动 传递 过 去 。 语 法 如 下 : 
C9 function bind(fn, context){ 


return function(){ 
return fn.apply (context, arguments); 














上 


FunctionBindingExample01.htm 


这 个 函数 似乎 简单 ， 但 其 功能 是 非常 强大 的 。 在 bina() 中 创建 了 一 个 财 包 ， 闭 包 使 用 apply () 调 
用 传 入 的 函数 ， 并 给 apply () 传递 context 对 象 和 参数 。 注 意 这 里 使 用 的 arguments 对 象 是 内 部 函 
数 的 ， 而 非 pina () 的 。 当 调用 返回 的 函数 时 ， 它 会 在 给 定 环境 中 执行 被 传人 的 函数 并 给 出 所 有 参数 。 
bind() 函数 按 如 下 方式 使 用 : 


Var handler = { 
message: "Event handled", 

















handleClick: function(event)t 
alert (this.message); 





} 
了 





Var btn = document .getElementByIid("my-btn"); 
EventUtil.addHandler (btn, "click", bind(handler.handleClick, handler)); 


FunctionBindingExample01.htm 
在 这 个 例子 中 ,我 们 用 bina() 函数 创建 了 一 个 保持 了 执行 环境 的 图 数 ， 并 将 其 传 给 EventUtil . 
addHandler () 。event 对 象 也 被 传 给 了 该 函数 ， 如 下 所 示 : 


var handler = { 
“9 message: "Event handled", 


handleClick: function(event)t 
alert (this.message + ":" + event.type); 














} 
} 


Var btn = document .getElementByIid("my-btn"); 
EventUtil.addHandler (btn, "click", bind(handler.handleClick, handler)); 
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handler .handleClick () 方 法 和 平时 一 样 获得 了 event 对 象 ,因为 所 有 的 参数 都 通过 被 绑 定 的 函 
数 直接 传 给 了 它 。 

ECMAScript 5 为 所 有 函数 定义 了 一 个 原生 的 bina() 方 法 ,进一步 简 单 了 操作 。 换 句 话 说 ,你 不 用 
再 自己 定义 bind() 三 数 了 ， 而 是 可 以 直接 在 函数 上 调用 这 个 方法 。 例 如 : 
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Var handler = { 
message: "Event handled", 
handleClick: function(event)t{ 

alert (this .message + ":" + event.type); 

} 

下 

Var btn = document .getElementById("my-btn"); 





EventUtil.addHandler (btn, "click", handler.handleClick.bind(handler)); 


原生 


FunctionBindingExample02.htm 
的 bina() 方 法 与 前 面 介绍 的 自 定义 pina() 方 法 类 似 , 都 是 要 传人 作为 this 值 的 对 象 。 支持 








原生 pind() 方 法 的 浏览 器 有 IE9+、Firefox 4+ 和 Chrome。 
只 要 是 将 某 个 函数 指针 以 值 的 形式 进行 传递 ， 同 时 该 函数 必须 在 特定 环境 中 执行 ,被 绑 定 函数 的 效 


用 就 突显 
定 函 数 与 





以 最 好 只 在 必要 时 使 用 。 


22.1.5 








出 来 了 。 它 们 主要 用 于 事件 处 理 程序 以 及 setTimeout () 和 setInterval()。 然 而 ， 被 绑 
普通 函数 相 比 有 更 多 的 开销 ， 它 们 需要 更 多 内 存 ， 同 时 也 因为 多 重 函 数 调 用 稍微 慢 一 点 ， 所 























函数 柯 里 化 





与 函数 绑 定 紧密 相关 的 主题 是 函数 柯 里 化 (function currying )， 它 用 于 创建 已 经 设置 好 了 一 个 或 多 


个 参数 的 

在 于 ， 当 
func 
} 
func 
} 


aler 
aler 





函数 。 函 数 柯 里 化 的 基本 方法 和 函数 绑 定 是 一 样 的 : 使 用 一 个 闭 包 返 回 一 个 函数 。 两 者 的 区 别 
函数 被 调用 时 ， 返回 的 函数 还 需要 设置 一 些 传 人 的 参数 。 请 看 以 下 例子 。 


tion add (numl, num2){ 
return numl + num2; 














tion curriedAdd (num2){ 
return add(5, num2); 


(add (2, 3)); /5 
(curriedAdd(3)); //8 





这 段 代码 定义 了 两 个 函数 : add () 和 curriedaqdd()。 后 者 本 质 上 是 在 任何 情况 下 第 一 个 参数 为 5 


的 adq() 





版 本 。 尽 管 从 技术 上 来 说 curriedaga() 并 非 柯 里 化 的 函数 ,但 它 很 好 地 展示 了 其 概念 。 











柯 里 化 函数 通常 由 以 下 步 又 动态 创建 : 调用 男 一 个 函数 并 为 它 传 人 要 柯 里 化 的 函数 和 必要 参数 。 下 
面 是 创建 柯 里 化 函数 的 通用 方式 。 








个 func 


tion curry (fn)t{ 
Var args = Array.prototype.slice.call(arguments, 1); 
return function(){ 
Var innerArgs = Array.prototype.slice.call(arguments); 
Var finalArgs = args.concat (innerArgs); 
return fn.apply (null, finalArgs); 


FunctionCurryingExample01.htm 
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curry () 函数 的 主要 工作 就 是 将 被 返回 函数 的 参数 进行 排序 。curry () 的 第 一 个 参数 是 要 进行 柯 里 
化 的 函数 ， 其 他 参数 是 要 传 入 的 值 。 为 了 获取 第 一 个 参数 之 后 的 所 有 参数 ， 在 arguments 对 象 上 调用 
了 slice() 方 法 , 并 传人 参数 1 表示 被 返回 的 数组 包含 从 第 二 个 参数 开始 的 所 有 参数 。 然 后 args 数组 
包含 了 来 自 外 部 函数 的 参数 。 在 内 部 函数 中 ,创建 了 innerargs 数组 用 来 存放 所 有 传人 的 参数 (又 一 
次 用 到 了 slice() ) 。 有 了 存放 来 自 外 部 函数 和 内 部 函数 的 参数 数组 后 ,就 可 以 使 用 concat () 方 法 将 
它们 组 合 为 finalArgs， 然 后 使 用 apply () 将 结果 传递 给 该 函数 。 注 意 这 个 函数 并 没有 考虑 到 执行 环 
境 ， 所 以 调用 apply () 时 第 一 个 参数 是 nul1l1。curry () 函数 可 以 按 以 下 方式 应 用 。 


function add(numl, num2){ 
return numl + num2; 











} 


Var curriedAdd = curry(add, 5); 
alert (curriedadd (3)); //8 


FunctionCurryingExample01.htm 


在 这 个 例子 中 ， 创 建 了 第 一 个 参数 绑 定 为 5 的 aaa() 的 柯 里 化 版 本 。 当 调用 curriedaqa() 并 传 
入 3 时 ，3 会 成 为 add() 的 第 二 个 参数 ， 同 时 第 一 个 参数 依然 是 5， 最 后 结果 便 是 和 8。 你 也 可 以 像 下 
面 例子 这 样 给 出 所 有 的 函数 参数 : 


function add(numl, num2){ 
return numl + num2; 


























} 


var curriedAdd = curry(add, 5, 12); 
alert (curriedadd()); //17 
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在 这 里 ， 柯 里 化 的 aaa () 函数 两 个 参数 都 提供 了 ， 所 以 以 后 就 无 需 再 传递 它们 了 。 
函数 柯 里 化 还 常常 作为 函数 绑 定 的 一 部 分 包含 在 其 中 ， 构 造 出 更 为 复杂 的 bina () 函数 。 例 如 : 


function bind(fn, context)t{ 
var args = Array.prototype.slice.call(arguments, 2); 
return function(){ 
Var innerArgs = Array.prototype.slice.call(arguments); 
var finalArgs = args.concat (innerArgs); 
return fn.apply(context, finalArgs); 





FunctionCurryingExample02.htm 


对 curry () 函数 的 主要 更 改 在 于 传人 的 参数 个 数 ， 以 及 它 如 何 影响 代码 的 结果 。curry () 仅仅 接受 
一 个 要 包 右 的 函数 作为 参数 , 而 bind () 同时 接受 函数 和 一 个 object 对 象 。 这 表示 给 被 绑 定 的 函数 的 参 
数 是 从 第 三 个 开始 而 不 是 第 二 个 ， 这 就 要 更 改 slice() 的 第 一 处 调用 。 男 一 处 更 改 是 在 倒数 第 3 行将 
object 对 象 传 给 apply() 。 当 使 用 pina() 时 ， 它 会 返回 绑 定 到 给 定 环境 的 函数 ,并 且 可 能 它 其 中 某 些 
函数 参数 已 经 被 设 好 。 当 你 想 除 了 event 对 象 再 额外 给 事件 处 理 程序 传递 参数 时 ， 这 非常 有 用 ， 例 如 : 
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var handler = { 
message: "Event handled", 


handleClick: function(name, event){ 
alert (this.message + ":"+ name + ":"+ event .type); 
} 
于 





Var btn = document .getElementBylid("my-btn"); 
EventUtil.addHandler (btn, "click", bind(handler.handleClick, handler, "my-btn")); 


FunctionCurryingExample02.htm 


在 这 个 更 新 过 的 例子 中 ,handler .handleClick() 方 法 接受 了 两 个 参数 : 要 处 理 的 元 素 的 名 字 和 
event 对 象 。 作 为 第 三 个 参数 传递 给 bind () 函数 的 名 字 ， 又 被 传递 给 了 handler .handleclick()， 








而 handler.handleclick() 也 会 同时 接收 到 event 对 象 。 








ECMAScript 5 的 bind () 方 法 也 实现 函数 柯 里 化 ， 只 要 在 this 的 值 之 后 再 传人 另 一 个 参数 即 可 。 





Var handler = { 
message: "Event handled", 


handleClick: function(name, event){ 
alert(this.message + ":" + name + ":" + event.type); 
} 
5 





Var btn = document .getElementBylid("my-btn"); 
EventUtil.addHandler (btn, "click", handler.handleClick.bind(handler, "my-btn")); 


FunctionCurryingExample03.htm 
JavaScript 中 的 柯 里 化 函数 和 绑 定 函 数 提供 了 强大 的 动态 函数 创建 功能 。 使 用 bina() 还 是 curry () 























要 根据 是 否 需要 object 对 象 响 应 来 决定 。 它 们 都 能 用 于 创建 复杂 的 算法 和 功能 , 当然 两 者 都 不 应 小 月 








因为 每 个 函数 都 会 带 来 额外 的 开销 。 


22.2 ” 防 算 改 对 象 




















| 





和 


JavaScript 共享 的 本 质 一 直 是 开发 人 员 心 头 的 痛 。 因 为 任何 对 象 都 可 以 被 在 同一 环境 中 运行 的 代码 
修改 。 开 发 人 员 很 可 能 会 意外 地 修改 别人 的 代码 ， 其 至 更 糟糕 地 ， 用 不 兼容 的 功能 重 写 原 生 对 象 。 

















ECMAScript 5 致力 于 解决 这 个 问题 ， 可 以 让 开发 人 员 定 义 防 算 改 对 象 (tamper-proof object ) 。 
第 6 章 讨 论 了 对 象 属性 的 问题 ， 也 讨论 了 如 何 手工 设置 每 个 属性 的 [ [Configurable]]、 





























[[Writable]]、 [[Enumerable]]、[[Value]] 、[[Get]] 以 及 [[set]] 特 性 ， 以 改变 属性 的 行为 。 





类 似 地 ，ECMAScript 5 也 增加 了 几 个 方法 ， 通 过 它们 可 以 指定 对 象 的 行为 。 
不 过 请 注意 : 一 旦 把 对 象 定义 为 防 自 改 ， 就 无 法 撤销 了 。 
22.2.1 不 可 扩展 对 象 


默认 情况 下 ， 所 有 对 象 都 是 可 以 扩展 的 。 也 就 是 说 ,任何 时 候 都 可 以 向 对 象 中 添加 属性 和 方法 。 
如 ， 可 以 像 下 面 这 样 先 定义 一 个 对 象 ， 后 来 再 给 它 添加 一 个 属性 。 
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Var person 
person.age 


即使 第 一 行 代码 已 经 完整 定义 person 对 象 ,， 但 第 二 行 代码 仍然 能 给 它 添加 属性 。 现 在 ,使 用 
Object.preventExtensions() 方 法 可 以 改变 这 个 行为 ， 让 你 不 能 再 给 对 象 添 加 属性 和 方法 。 
例如 : 


Var person = { name: "Nicholas" }; 
Object .preventExtensions (person); 


{ name: "Nicholas" }; 
29'; 














person.age = 29; 
alert (person.age); //undefined 


NonExtensibleObjectsExample01.htm 


在 调用 了 object .preventExtensions () 方 法 后 ， 就 不 能 给 person 对 象 添加 新 属性 和 方法 了 。 
在 非 严 格 模式 下 ， 给 对 象 添加 新 成 员 会 导致 静默 失败 ， 因 此 person.age 将 是 undefinegd。 而 在 严格 
模式 下 ， 尝 试 给 不 可 扩展 的 对 象 添加 新 成 员 会 导致 抛 出 错误 。 
虽然 不 能 给 对 象 添加 新 成 员 , 但 已 有 的 成 员 则 丝毫 不 受 影响 。 你 仍然 还 可 以 修改 和 删除 已 有 的 成 员 。 
另外 ,使 用 object .istExtensible() 方 法 还 可 以 确定 对 象 是 否 可 以 扩展 。 


Var person = { name: "Nicholas" }; 
alert (Object .isExtensible(person)); //true 






































Object.preventExtensions (person); 
alert (Object .isExtensible(person)); //false 


NonExtensibleObjectsExample02.htm 


22.2.2 ”密封 的 对 象 


ECMAScript 5 为 对 象 定义 的 第 二 个 保护 级 别 是 密封 对 象 ( sealed object ) 。 密 封 对 象 不 可 扩展 ， 而 
且 已 有 成 员 的 [ [configurable] ] 特 性 将 被 设置 为 false。 这 就 意味 着 不 能 删除 属性 和 方法 ,因为 不 能 
使 用 object .defineProperty() 把 数据 属性 修改 为 访问 器 属性 ， 或 者 相反 。 属 性 值 是 可 以 修改 的 。 

要 密封 对 象 ， 可 以 使 用 object .seal () 方 法 。 























Var person = { name: "Nicholas" }; 
Object .seal (person); 


person.age = 29; 
alert (person.age); //undefined 


delete person.name; 
alert (person.name); //"Nicholas" 


SealedObjectsExample01.htm 
在 这 个 例子 中 , 添加 age 属性 的 行为 被 忽略 了 。 而 尝试 删除 name 属性 的 操作 也 被 忽略 了 ， 因 此 这 


个 属性 没有 受 任何 影响 。 这 是 在 非 严 格 模 式 下 的 行为 。 在 严格 模式 下， 尝试 添加 或 删除 对 象 成 员 都 会 导 
致 抛 出 错误 。 
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使 用 object.issealedf() 方 法 可 以 确定 对 象 是 否 被 密封 了 。 因 为 被 密封 的 对 象 不 可 扩展 ， 所 以 用 
Object .isExtensible() 检 测 密封 的 对 象 也 会 返回 false。 
Var person = { name: "Nicholas" }; 


alert (Object .isExtensible(person)); //true 
alert (Object .isSealed (person)); //false 











Object.seal (person); 
alert (Object .isExtensible(person)); //false 
alert (Object .isSealed (person)); //true 


SealedObjectsExample02.htm 


22.2.3 ”冻结 的 对 象 


最 严格 的 防 自 改 级 别 是 冻结 对 象 ( frozen object ) 。 冻 结 的 对 象 既 不 可 扩展 ,又 是 密封 的 ， 而且 对 象 
数据 属性 的 [ [writapble] 1] 特性 会 被 设置 为 false。 如 果 定 义 [[set]1 函 数 , 访问 器 属性 仍然 是 可 写 的 。 
ECMAScript 5 定义 的 object .freeze() 方 法 可 以 用 来 冻结 对 象 。 























eal 

















Var person = { name: "Nicholas" }; 
Object .freeze (person); 


person.age = 29; 
alert (person.age); //undefined 


delete person.name; 


alert (person.name); //"Nicholas" 
person.name = "Greg"; 
alert (person.name); //"Nicholas" 


FrozenObjectsExample01.htm 

与 密封 和 不 允许 扩展 一 样 ， 对 冻结 的 对 象 执 行 非法 操作 在 非 严格 模式 下 会 被 忽略 ， 而 在 严格 模式 下 
会 抛 出 错误 。 

当然 也 有 一 个 object .isFrozen () 方 法 用 于 检测 冻结 对 象 。 因 为 冻结 对 象 既 是 密封 的 又 是 不 可 


扩展 的 ， 所 以 用 object.isExtensible() 和 object.issealed() 检 测 冻 结对 象 将 分 别 返 回 false 
和 true。 








Var person { name: "Nicholas" }; 


alert (Object.isExtensible (person)); //true 
alert (Object.isSealed (person)); //false 
alert (Object.isFrozen (person)); //false 








Object.freeze (person); 

alert (Object.isExtensible (person)); //false 
alert (Object.isSealed (person)); //true 
alert (Object.isFrozen (person)); //true 


FrozenObjectsExample02.htm 
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对 JavaScript 库 的 作者 而 言 , 冻结 对 象 是 很 有 用 的 。 因 为 JavaScript 库 最 怕 有 人 意外 (或 有 意 ) 地 修 
改 了 库 中 的 核心 对 象 。 冻 结 (或 密封 ) 主要 的 库 对 象 能 够 防止 这 些 问 题 的 发 生 。 


22.3 ”高 级 定时 器 


使 用 setTimeout () 和 setInterval () 创建 的 定时 器 可 以 用 于 实现 有 趣 且 有 用 的 功能 。 虽 然 人 们 
对 JavaScript 的 定时 器 存在 普遍 的 误解 ， 认 为 它们 是 线程 ， 其 实 JavaScript 是 运行 于 单线 程 的 环境 中 的 ， 
而 定时 器 仅仅 只 是 计划 代码 在 未 来 的 某 个 时 间 执 行 。 执 行 时 机 是 不 能 保证 的 , 因为 在 页 面 的 生命 周期 中 ， 
不 同时 间 可 能 有 其 他 代码 在 控制 JavaScript 进程 。 在 页 面 下 载 完 后 的 代码 运行 、 事 件 处 理 程序 、Ajax 回 
调 函 数 都 必须 使 用 同样 的 线程 来 执行 。 实 际 上 ,浏览 絮 负 责 进行 排序 ， 指 派 某 段 代码 在 某 个 时 间 点 运行 
的 优先 级 。 

可 以 把 JavaScript 想象 成 在 时 间 线 上 运行 的 。 当 页 面 载 人 时 , 首先 执行 是 任何 包含 在 <script> 元 素 
中 的 代码 , 通常 是 页 面 生命 周期 后 面 要 用 到 的 一 些 简单 的 函数 和 变量 的 声明 , 不 过 有 时 候 也 包含 一 些 初 
始 数据 的 处 理 。 在 这 之 后 ，JavaScript 进程 将 等 待 更 多 代码 执行 。 当 进程 空闲 的 时 候 ， 下 一 个 代码 会 被 
触发 并 立刻 执行 。 例 如 ， 当 点 击 某 个 按钮 时 ，onclick 事件 处 理 程序 会 立刻 执行 ， 只 要 JavaScript 进程 
处 于 空 亲 状态。 这 样 一 个 页 面 的 时 间 线 类 似 于 图 22-1。 

















































































































JavaScript 进程 时 间 线 
页 面 的 初始 加 载 空闲 | handle Click() 
0 100 200 300 400 500 600 700 800 
单位 : 毫秒 
图 22-1 








除了 主 JavaScript 执行 进程 外 ， 还 有 一 个 需要 在 进程 下 一 次 空闲 时 执行 的 代码 队列 。 随 着 页 面 在 其 
生命 周期 中 的 推移 ， 代 码 会 按照 执行 顺序 添加 入 队列 。 例 如 ， 当 某 个 按钮 被 按 下 时 ， 它 的 事件 处 理 程序 
代码 就 会 被 添加 到 队列 中 ， 并 在 下 一 个 可 能 的 时 间 里 执行 。 当 接收 到 某 个 Ajax 响应 时 ， 回 调 函 数 的 代 
码 会 被 添加 到 队列 。 在 JavaScript 中 没有 任何 代码 是 立刻 执行 的 ， 但 一 旦 进程 空闲 则 尽快 执行 。 

定时 器 对 队列 的 工作 方式 是 ， 当 特定 时 间 过 去 后 将 代码 搬入。 注意 ,给 队列 添加 代码 并 不 意味 着 对 
它 立刻 执行 , 而 只 能 表示 它 会 尽快 执行 。 设 定 一 个 150ms 后 执行 的 定时 器 不 代表 到 了 150ms 代码 就 立刻 
执行 ， 它 表示 代码 会 在 150ms 后 被 加 入 到 队列 中 。 如 果 在 这 个 时 间 点 上 ， 队 列 中 没有 其 他 东西 ,那么 这 
段 代码 就 会 被 执行 ,表面 上 看 上 去 好 像 代码 就 在 精确 指定 的 时 间 点 上 执行 了 。 其 他 情况 下 ,代码 可 能 明 
显 地 等 待 更 长 时 间 才 执行 。 

请 看 以 下 代码 : 

Var btn = document .getElementById("my-btn"); 

btn.onclick = function(){ 

setTimeout (function(){ 


document .getElementById( "message") .style.visibility = "visible"; 
}y 250)» 


// 其 他 代码 
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在 这 里 给 一 个 按钮 设置 了 一 个 事件 处 理 程序 。 事 件 处 理 程序 设置 了 一 个 250ms 后 调用 的 定时 器 。 
点 击 该 按钮 后 ， 首 先 将 onclick 事件 处 理 程序 加 入 队列 。 该 程序 执行 后 才 设置 定时 器 ， 再 有 250ms 
后 ， 指 定 的 代码 才 被 添加 到 队列 中 等 竺 执行。 实际 上 ， 对 setTimeout () 的 调用 表示 要 晚点 执行 某 些 
代码 。 

关于 定时 器 要 记 住 的 最 重要 的 事情 是 ,指定 的 时 间 间 隔 表示 何 时 将 定时 器 的 代码 添加 到 队列 ， 而 不 
是 何 时 实际 执行 代码 。 如 果 前 面 例子 中 的 onclick 事件 处 理 程序 执行 了 300ms， 那 么 定时 器 的 代码 至 
少 要 在 定时 器 设置 之 后 的 300ms 后 才 会 被 执行 。 队 列 中 所 有 的 代码 都 要 等 到 JavaScript 进程 空闲 之 后 才 
能 执行 ， 而 不 管 它 们 是 如 何 添加 到 队列 中 的 。 见 图 22-2。 


JavaScript 进程 时 间 线 













































































onclick 定时 融 代 码 | 空闲 
| | | 
0 100 200 300 400 500 600 700 800 
之 SS 
定时 器 代码 添加 到 队列 中 
单位 : 毫秒 











5 
创建 了 间隔 为 250 的 定时 器 
图 22-2 


如 图 22-2 所 示 ， 尽 管 在 255ms 处 添加 了 定时 器 代码 ， 但 这 时 候 还 不 能 执行 ， 因 为 onclick 事件 处 
理 程序 仍 在 运行 。 定 时 器 代码 最 早 能 执行 的 时 机 是 在 300ms 处 ， 即 onclick 事件 处 理 程序 结束 之 后 。 

实际 上 Firefox 中 定时 需 的 实现 还 能 让 你 确定 定时 器 过 了 多 入 才 执 行 ， 这 需 传递 一 个 实际 执行 的 时 
间 与 指定 的 间隔 的 差 值 。 如 下 面 的 例子 所 示 。 


// 仅 Firefox 中 
setTimeout (function (diff)t{ 
LE CALEE: > OQ), A 
// 晚 调用 
} else if (diff < 0){ 
// 早 调用 
} else { 
// 调 用 及 时 








} 
};, 250); 
执行 完 一 套 代码 后 ，JavaScript 进程 返回 一 段 很 短 的 时 间 ， 这 样 页 面 上 的 其 他 处 理 就 可 以 进行 了 。 
1 于 JavaScript 进程 会 阻塞 其 他 页 面 处 理 ， 所 以 必须 有 这 些小 间隔 来 防止 用 户 界面 被 锁定 〈 代码 长 时 间 
运行 中 还 有 可 能 出 现 ) 。 这 样 设 置 一 个 定时 器 ， 可 以 确保 在 定时 器 代码 执行 前 至 少 有 一 个 进程 间隔 。 


22.3.1 重复 的 定时 器 

使 用 setInterval () 创建 的 定时 器 确保 了 定时 需 代 码 规则 地 搬入 队列 中 。 这 个 方式 的 问题 在 于 ， 
定时 器 代码 可 能 在 代码 再 次 被 添加 到 队列 之 前 还 没有 完成 执行 ， 结 果 导 致 定时 器 代码 连续 运行 好 几 次 ， 
而 之 间 没 有 任何 停顿 。 幸 好 ，JavaScript 引擎 够 聪明 ， 能 避免 这 个 问题 。 当 使 用 setInterval() 时 , 仅 
当 没 有 该 定时 器 的 任何 其 他 代码 实例 时 , 才 将 定时 器 代码 添加 到 队列 中 。 这 确保 了 定时 器 代码 加 入 到 队 
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列 中 的 最 小 时 间 间 隔 为 指定 间隔 。 

这 种 重复 定时 器 的 规则 有 两 个 问题 : (D) 某 些 间隔 会 被 跳 过 ; (2) 多 个 定时 器 的 代码 执行 之 间 的 间隔 
能 会 比 预期 的 小 。 假 设 ， 某 个 onclick 事件 处 理 程序 使 用 setInterval () 设置 了 一 个 200ms 间隔 
重复 定时 器 。 如 果 事 件 处 理 程 序 花 了 300ms 多 一 点 的 时 间 完 成 ,同时 定时 占 代 码 也 花 了 差不多 的 时 间 ， 
会 同时 出 现 跳 过 间隔 且 连 续 运 行 定时 器 代码 的 情况 。 参 见 图 22-3。 
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图 22-3 


这 个 例子 中 的 第 1 个 定时 器 是 在 205ms 处 添加 到 队列 中 的 , 但 是 直到 过 了 300ms 处 才能 够 执行 。 当 
执行 这 个 定时 器 代码 时 , 在 405ms 处 又 给 队列 添加 了 另外 一 个 副本 。 在 下 一 个 间隔 , 即 605ms 处 ,第 一 
个 定时 器 代码 仍 在 运行 ， 同时 在 队列 中 已 经 有 了 一 个 定时 器 代码 的 实例 。 结果 是 ,在 这 个 时 间 点 上 的 定 
时 器 代码 不 会 被 添加 到 队列 中 。 结 果 在 Sms 处 添加 的 定时 器 代码 结束 之 后 , 405Sms 处 添加 的 定时 器 代码 
就 立刻 执行 。 

为 了 避免 setInterval () 的 重复 定时 器 的 这 2 个 缺点 ,你 可 以 用 如 下 模式 使 用 链 式 setTimeout () 
调用 。 


setTimeout (function()t 


























// 处 理 中 





setTimeout (arguments.callee, interval); 


}, interval); 

这 个 模式 链 式 调用 了 setTimeout () ， 每 次 函数 执行 的 时 候 都 会 创建 一 个 新 的 定时 器 。 第 二 个 
setTimeout () 调 用 使 用 了 arguments .callee 来 获取 对 当前 执行 的 函数 的 引用 ， 并 为 其 设置 男 外 一 
个 定时 器 。 这 样 做 的 好 处 是 ， 在 前 一 个 定时 器 代码 执行 完 之 前 ， 不 会 向 队列 插入 新 的 定时 器 代码 ,确保 
不 会 有 任何 缺失 的 间隔 。 而 且 ， 它 可 以 保证 在 下 一 次 定时 器 代码 执行 之 前 ， 至 少 要 等 待 指定 的 间隔 ， 避 
免 了 连续 的 运行 。 这 个 模式 主要 用 于 重复 定时 器 ， 如 下 例 所 示 。 


setTimeout (function()t{ 























2 





var div = document.getElementById("myDiv"); 
left = parseInt (div.style.left) + 5; 
div.style.left = left + "px"; 


i (left < 200)1{ 
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setTimeout (arguments.callee, 50); 


}, 50); 


RepeatingTimersExample.htm 


这 段 定 时 器 代码 每 次 执行 的 时 候 将 一 个 <qaiv> 元 素 向 右 移动 ， 当 左 坐 标 在 200 像素 的 时 候 停止 。 
JavaScript 动画 中 使 用 这 个 模式 很 常见 。 











每 个 浏览 器 窗口 、 标 签 页 、 或 者 frame 都 有 其 各 自 的 代码 执行 队列 。 这 意味 着 ， 
进行 跨 frame 或 者 跨 窗 口 的 定时 调用 ， 当 代码 同时 执行 的 时 候 可 能 会 导致 竞争 条 件 。 
无 论 何 时 需要 使 用 这 种 通信 类 型 ， 最 好 是 在 接收 frame 或 者 窗口 中 创建 一 个 定时 器 来 
执行 代码 。 


22.3.2 Yielding Processes 


运行 在 浏览 器 中 的 JavaScript 都 被 分 配 了 一 个 确定 数量 的 资源 。 不 同 于 桌面 应 用 往往 能 够 随意 控制 
他 们 要 的 内 存 大 小 和 处 理 器 时 间 ，JavaScript 被 严格 限制 了 ， 以 防止 恶意 的 Web 程序 员 把 用 户 的 计算 机 
搞 挂 了 。 其 中 一 个 限制 是 长 时 间 运 行 脚本 的 制约 ， 如 果 代 码 运行 超过 特定 的 时 间或 者 特定 语句 数量 就 不 
让 它 继续 执行 。 如 果 代 码 达 到 了 这 个 限制 ， 会 弹出 一 个 浏览 器 错误 的 对 话 框 ， 告 诉 用 户 某 个 脚本 会 用 过 
长 的 时 间 执 行 ， 询 问 是 允许 其 继续 执行 还 是 停止 它 。 所 有 JavaScript 开发 人 员 的 目标 就 是 ， 确 保 用 户 永 
远 不 会 在 浏览 器 中 看 到 这 个 令 人 费解 的 对 话 框 。 定 时 需 是 绕 开 此 限制 的 方法 之 一 。 

脚本 长 时 间 运 行 的 问题 通常 是 由 两 个 原因 之 一 造成 的 : 过 长 的 、 过 深 媒 套 的 函数 调用 或 者 是 进行 大 
量 处 理 的 循环 。 这 两 者 中 ， 后 者 是 较为 容易 解决 的 问题 。 长 时 间 运 行 的 循环 通常 遵循 以 下 模式 : 


for (var i=0, len=data.length; i < len; I++){ 
process (datal{[lil]); 




























































































} 

这 个 模式 的 问题 在 于 要 处 理 的 项 目的 数量 在 运行 前 是 不 可 知 的 。 如 果 完 成 process () 要 人 花 100ms， 
只 有 2 个 项 目的 数组 可 能 不 会 造成 影响 ， 但 是 10 个 的 数组 可 能 会 导致 脚本 要 运行 一 秒 钟 才 能 完成 。 数 
组 中 的 项 目 数量 直接 关系 到 执行 完 该 循环 的 时 间 长 度 。 同 时 由 于 JavaScript 的 执行 是 一 个 阻塞 操作 ， 脚 
本 运行 所 花 时 间 越 入， 用 户 无 法 与 页 面 交互 的 时 间 也 越久 。 

在 展开 该 循环 之 前 ， 你 需要 回答 以 下 两 个 重要 的 问题 。 

口 该 处 理 是 否 必须 同步 完成 ”如果 这 个 数据 的 处 理会 造成 其 他 运行 的 阻塞 , 那么 最 好 不 要 改动 它 。 

不 过 ， 如 果 你 对 这 个 问题 的 回答 确定 为 “ 否 ”"， 那 么 将 某 些 处 理 推 迟到 以 后 是 个 不 错 的 备 选项 。 

口 数据 是 否 必须 按 顺 序 完 成 ? 通常 ， 数 组 只 是 对 项 目的 组 合 和 迭代 的 一 种 简便 的 方法 而 无 所 谓 顺 
序 。 如 果 项 目的 顺序 不 是 非常 重要 ， 那 么 可 能 可 以 将 某 些 处 理 推 迟到 以 后 。 

当 你 发 现 某 个 循环 占用 了 大 量 时 间 ， 同 时 对 于 上 述 两 个 问题 ， 你 的 回答 都 是 “ 否 ”， 那么 你 就 可 以 
使 用 定时 器 分 割 这 个 循环 。 这 是 一 种 叫做 数组 分 块 ( array chunking ) 的 技术 ， 小 块 小 块 地 处 理 数组 ， 通 
常 每 次 一 小 块 。 基 本 的 思路 是 为 要 处 理 的 项 目 创建 一 个 队列 ， 然 后 使 用 定时 器 取出 下 一 个 要 处 理 的 项 目 
进行 处 理 ， 接 着 再 设置 另 一 个 定时 器 。 基 本 的 模式 如 下 。 
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setTimeout (function(){ 


// 取 出 下 一 个 条 目 并 处 理 
Var item = array.shift(); 
process (Item) ; 


// 若 还 有 条 目 ， 再 设置 另 一 个 定时 器 
if(array.length > 0){ 
setTimeout (arguments.callee, 100); 
} 
F100); 


在 数组 分 块 模式 中 ，array 变量 本 质 上 就 是 一 个 “ 待 办 事宜 ”列表 ， 它 包含 了 要 处 理 的 项 目 。 使 用 
shift() 方 法 可 以 获取 队列 中 下 一 个 要 处 理 的 项 目 ， 然 后 将 其 传递 给 某 个 函数 。 如 果 在 队列 中 还 有 其 他 


项 目 ， 则 设置 另 一 个 定时 器 ， 并 通过 arguments .callee 调用 同一 个 匿名 函数 。 要 实现 数组 分 块 非常 
简单 ， 可 以 使 用 以 下 函数 。 
































function chunk(array, process, context)t{ 
9 setTimeout (function()f{ 
Var item = array.shift(); 
process.call (context, item); 


if (array.length > 0){ 
setTimeout (arguments.callee, 100); 
} 
ky T0073 


ArrayChunkingExample.htm 


chunk () 方 法 接受 三 个 参数 : 要 处 理 的 项 目的 数组 ， 用 于 处 理 项 目的 函数 ， 以 及 可 选 的 运行 该 函数 

pe ee 二 的 基本 模式 ,通过 call () 调 用 的 process () 函数 ,这样 可 以 设置 一 
合适 的 执行 环境 ( 如 果 必 须 ) 。 定 时 器 的 时 间 间 隔 设 置 为 了 100ms， 使 得 JavaScript 进程 有 时 间 在 处 

We ee es 的 需要 更 改 这 个 间隔 大 小 , 不 过 100ms 在 大 多 数 情 况 下 效果 

不 错 。 可 以 按 如 下 所 示 使 用 该 函数 : EE 


CY) var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342]; 



































function printValue (item)f{ 
var div = document.getElementById("myDiv"); 
div.innerHTML += item + "<br>"; 





} 


chunk (data, printValue); 


ArrayChunkingExample.htm 
这 个 例子 使 用 printValue () 函数 将 data 数组 中 的 每 个 值 输出 到 一 个 <aiv> 元 素 。 由 于 函数 处 在 
全 局 作用 域内 ， 因 此 无 需 给 chunk () 传递 一 个 context 对 象 。 
必须 当心 的 地 方 是 , 传递 给 chunk () 的 数组 是 用 作 一 个 队列 的 ， 0 数组 中 的 
条 目 也 在 改变 。 如 果 你 想 保 持原 数组 不 变 ， 则 应 该 将 该 数组 的 克隆 传递 给 cpunk () ， 如 下 例 所 示 : 


chunk (data.concat(), printValue); 
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当 不 传递 任何 参数 调用 某 个 数组 的 concat () 方 法 时 ， 将 返回 和 原来 数组 中 项 目 一 样 的 数组 。 这 样 
你 就 可 以 保证 原 数 组 不 会 被 该 函数 更 改 。 

数组 分 块 的 重要 性 在 于 它 可 以 将 多 个 项 目的 处 理 在 执行 队列 上 分 开 ， 在 每 个 项 目 处 理 之 后 , 给 予 其 
他 的 浏览 器 处 理 机 会 运行 ， 这 样 就 可 能 避免 长 时 间 运 行 脚本 的 错误 。 


















一 旦 某 个 函数 需要 花 50ms 以 上 的 时 间 完 成 ， 那 么 最 好 看 看 能 否 将 任务 分 割 为 一 
系列 可 以 使 用 定时 器 的 小 任务 。 





22.3.3 ”函数 节 流 


浏览 需 中 某 些 计算 和 处 理 要 比 其 他 的 昂贵 很 多 。 例 如 ，DOM 操作 比 起 非 DOM 交互 需要 更 多 的 内 

存 和 CPU 时间。 连续 尝试 进行 过 多 的 DOM 相关 操作 可 能 会 导致 浏览 器 挂 起 , 有 时 候 甚 至 会 月 演 。 尤其 
在 I 中 使 用 onresize 事件 处 理 程序 的 时 候 容 易 发 生 ， 当 调整 浏览 器 大 小 的 时 候 , 该 事件 会 连续 触发 。 
在 onresize 事件 处 理 程序 内 部 如 果 尝 试 进行 DOM 操作 ， 其 高 频率 的 更 改 可 能 会 让 浏览 右 衣 演 。 为 了 
绕 开 这 个 问题 ， 你 可 以 使 用 定时 器 对 该 函数 进行 节 流 。 
困 数 节 流 背后 的 基本 思想 是 指 , 某 些 代 码 不 可 以 在 没有 间断 的 情况 连续 重复 执行 。 第 一 次 调用 函数 ， 
创建 一 个 定时 器 , 在 指定 的 时 间 间 隔 之 后 运行 代码 。 当 第 二 次 调用 该 函数 时 ， 它 会 清除 前 一 次 的 定时 器 
并 设置 另 一 个 。 如 果 前 一 个 定时 器 已 经 执行 过 了 ， 这 个 操作 就 没有 任何 意义 。 然 而 ， 如 果 前 一 个 定时 器 
尚未 执行 ,其 实 就 是 将 其 替换 为 一 个 新 的 定时 器 。 目 的 是 只 有 在 执行 函数 的 请 求 停止 了 一 段 时 间 之 后 才 
执行 。 以 下 是 该 模式 的 基本 形式 : 


var processor = { 
timeoutId: null, 















































志 





























// 实 际 进行 处 理 的 方法 
PerformProcessing: function(){ 
// 实 际 执行 的 代码 
} 
// 初 始 处 理 调用 的 方法 
process: function()f{ 
clearTimeout (this.timeoutId); 


var that = this; 
this.timeoutId = setTimeout (function(){ 
that .performPprocessing(); 
}, 100); 
} 
2 


// 尝 试 开始 执行 

processor.process(); 

在 这 段 代 码 中 ， 创建 了 一 个 叫做 processor 对 象 。 这 个 对 象 还 有 2 个 方法 : process() 和 
performProcessing ()。 前 者 是 初始 化 任何 处 理 所 必须 调用 的 ， 后 者 则 实际 进行 应 完成 的 处 理 。 当 调 
用 了 process() ， 第 一 步 是 清除 存 好 的 timeoutIda， 来 阻止 之 前 的 调用 被 执行 。 然 后 ， 创 建 一 个 新 的 
定时 器 调用 performProcessing()。 由 于 setTimeout () 中 用 到 的 国 数 的 环境 总 是 window， 所 以 有 
必要 保存 this 的 引用 以 方便 以 后 使 用 。 
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时 间 间 隔 设 为 了 100ms， 这 表示 最 后 一 次 调用 process () 之 后 至 少 100ms 后 才 会 调用 perform- 
Processing()。 所 以 如 果 100ms 之 内 调用 了 process () 共 20 次 ，performanceProcessing() 仍 只 
会 被 调用 一 次 。 

这 个 模式 可 以 使 用 throttle() 函数 来 简化 ， 这 个 函数 可 以 自动 进行 定时 器 的 设置 和 清除 ， 如 下 例 
所 示 : 


function throttle(method, context) { 
于 clearTimeout (method.tIQ) ; 
method.tId= setTimeout (function(){ 
method.call (context); 
}, 100); 











ThrottlingExample.htm 


throttle() 函数 接受 两 个 参数 : 要 执行 的 函数 以 及 在 哪个 作用 域 中 执行 。 上 面 这 个 函数 首先 清除 
之 前 设置 的 任何 定时 器 。 定 时 器 ID 是 存储 在 函数 的 tIa 属性 中 的 ,第 一 次 把 方法 传递 给 throttle() 
的 时 候 , 这 个 属性 可 能 并 不 存在 。 接 下 来 , 创建 一 个 新 的 定时 器 , 并 将 其 ID 储存 在 方法 的 tIa 属性 中 。 
如 果 这 是 第 一 次 对 这 个 方法 调用 throttle() 的话 ,那么 这 段 代码 会 创建 该 属性 。 定 时 器 代码 使 用 
call () 来 确保 方法 在 适当 的 环境 中 执行 。 如 果 没 有 给 出 第 二 个 参数 ， 那 么 就 在 全 局 作用 域内 执行 该 方 

前 面 提 到 过 ， 节 流 在 resize 事件 中 是 最 常用 的 。 如 果 你 基于 该 事件 来 改变 页 面 布局 的 话 ， 最 好 控 
制 处 理 的 频率 ， 以 确保 浏览 器 不 会 在 极 短 的 时 间 内 进行 过 多 的 计算 。 例 如 ， 假 设 有 一 个 <aiv/> 元 素 需 
要 保持 它 的 高 度 始终 等 同 于 宽度 。 那 么 实现 这 一 功能 的 JavaScript 可 以 如 下 编写 : 



































window.onresize = function()t{ 
var div = document.getElementById("myDiv"); 
div.style.height = div. offsetWidth + "px"; 





}3 
这 上段 非常 简单 的 例子 有 两 个 问题 可 能 会 造成 浏览 器 运行 缓慢 。 首 先 ， 要 计算 offsetwidth 属性 ， 


如 果 该 元 素 或 者 页 面 上 其 他 元 素 有 非常 复杂 的 CSS 样式 , 那么 这 个 过 程 将 会 很 复杂 。 其 次 , 设置 某 个 元 


Ho FN 


素 的 高 度 需 要 对 页 面 进行 回流 来 令 改动 生效 。 如 果 页 面 有 很 多 元 素 同 时 应 用 了 相当 数量 的 CSS 的 话 , 这 
又 需要 很 多 计算 。 这 就 可 以 用 到 throttle() 函数 ， 如 下 例 所 示 : 


CD function resizeDiv()t{ 
var div = document.getElementById("myDiv"); 
div.style.height = div.offsetWidth + "px"; 

} 



































window.onresize = function(){ 
throttle(resizeDiv); 


3 


ThrottlingExample.htm 


这 里 ， 调 整 大 小 的 功能 被 放 入 了 一 个 叫做 resizeDiv () 的 单独 函数 中 。 然 后 onresize 事件 处 理 
悍 序 调用 thzrottle() 并 传人 resizeDiv 陈 数 ,而 不 是 直接 调用 resizeDiv ()。 多数 情 况 下 ， 用户 是 
感觉 不 到 变化 的 ,虽然 给 浏览 右 节 省 的 计算 可 能 会 非常 大 。 


DN 








Dt 








| 
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只 要 代码 是 周期 性 执行 的 ， 都 应 该 使 用 节 流 ,但 是 你 不 能 控制 请 求 执行 的 速率 。 这 里 展示 的 
thzottle() 函数 用 了 100ms 作为 间隔 ， 你 当然 可 以 根据 你 的 需要 来 修改 它 。 


22.4 自 定义 事件 


在 本 书 前 面 ， 你 已 经 学 到 事件 是 JavaScript 与 浏览 器 交互 的 主要 途径 。 事 件 是 一 种 叫做 观察 者 的 设 
计 模 式 , 这 是 一 种 创建 松散 类 合 代码 的 技术 。 对 象 可 以 发 布 事件 ， 用 来 表示 在 该 对 象 生命 周期 中 某 个 有 
趣 的 时 刻 到 了 。 然 后 其 他 对 象 可 以 观察 该 对 象 ， 等 待 这 些 有 趣 的 时 刻 到 来 并 通过 运行 代码 来 响应 。 

观察 者 模式 由 两 类 对 象 组 成 : 主体 和 观察 者 。 主 体 负责 发 布 事件 ， 同 时 观察 者 通过 订阅 这 些 事 件 来 
观察 该 主体 。 该 模式 的 一 个 关键 概念 是 主体 并 不 知道 观察 者 的 任何 事情 , 也 就 是 说 它 可 以 独自 存在 并 正 
常 运作 即使 观察 者 不 存在 。 从 另 一 方面 来 说 , 观察 者 知道 主体 并 能 注册 事件 的 回调 函数 ( 事件 处 理 程 序 )。 
涉及 DOM 上 时 ，DOM 元 素 便 是 主体 ， 你 的 事件 处 理 代码 便 是 观察 者 。 

事件 是 与 DOM 交互 的 最 常见 的 方式 , 但 它们 也 可 以 用 于 非 DOM 代码 中 一 一 通过 实现 自 定 义 事件 。 
自 定义 事件 背后 的 概念 是 创建 一 个 管理 事件 的 对 象 , 让 其 他 对 象 监听 那些 事件 。 实 现 此 功能 的 基本 模式 
可 以 如 下 定义 : 


电 function EventTarget (){ 
\ this.handlers = {}; 
























































} 


EventTarget .prototype = { 
constructor: EventTarget, 
addHandler: function(type, handler)f{ 
if (typeof this.handqlers [type] == "undefined")t{ 
this.handlers[type] = []; 
} 


this.handlers [type]l .push (handler); 
和 


fire: function(event)t 
if (!levent.target)t{ 
event.target = this; 
} 
if (this.handlers[event.type] instanceof Array)t{ 
Var handlers = this.handlers[event.typel]; 
for (var i=0, len=handlers.length; i < len; i++){ 
handlers[il] (event); 


} 
}, 


removeHandler: function(type, handler)t 
if (this.handlers[type] instanceof Array) 1{ 

Var handlers = this.handlers[typel]; 

for (var i=0, len=handlers.length; i < len; i++){ 
if (handlers[i] === handler)t{ 

break; 

} 

} 


handlers.splice(i, 1); 
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EventTarget.js 


EventTarget 类 型 有 一 个 单独 的 属性 handlers ， 用 于 储存 事件 处 理 程序 。 还 有 三 个 方法 : 
adqqHandler() ， 用 于 注册 给 定 类 型 事件 的 事件 处 理 程序 ; fire() ， 用 于 触发 一 个 事件 ; 
removeHandler () ， 用 于 注销 某 个 事件 类 型 的 事件 处 理 程序 。 

addHandler () 方 法 接受 两 个 参数 : 事件 类 型 和 用 于 处 理 该 事件 的 函数 。 当 调用 该 方法 时 ， 会 进行 
一 次 检查 ,看 看 nandlers 属性 中 是 否 已 经 存在 一 个 针对 该 事件 类 型 的 数组 ; 如 果 没 有 ， 则 创建 一 个 新 
的 。 然 后 使 用 push () 将 该 处 理 程序 添加 到 数组 的 末尾 。 

如 果 要 触发 一 个 事件 ， 要 调用 fire() 困 数 。 该 方法 接受 一 个 单独 的 参数 ， 是 一 个 至 少 包含 type 
属性 的 对 象 。fire () 方 法 先 给 event 对 象 设置 一 个 target 属性 ， 如 果 它 尚未 被 指定 的 话 。 然 后 它 就 
查找 对 应 该 事件 类 型 的 一 组 处 理 程序 ， 调 用 各 个 函数 ， 并 给 出 event 对 象 。 因 为 这 些 都 是 自 定义 事件 ， 
所 以 event 对 象 上 还 需要 的 额外 信息 由 你 自己 决定 。 

removeHandler () 方 法 是 addHandler () 的 辅助 ， 它 们 接受 的 参数 一 样 : 事件 的 类 型 和 事件 处 理 
程序 。 这 个 方法 搜索 事件 处 理 程序 的 数组 找到 要 删除 的 处 理 程序 的 位 置 。 如 果 找 到 了 ， 则 使 用 break 
操作 符 退 出 for 循环 。 然 后 使 用 splice () 方 法 将 该 项 目 从 数组 中 删除 。 

然后 ， 使 用 EventTarget 类 型 的 自 定 义 事件 可 以 如 下 使 用 : 


function handleMessage (event){ 
alert ("Message received: " + event.message); 


















































































































































: 


/ /创建 一 个 新 对 象 


Var target = new EventTarget (); 





/ /添加 一 个 事件 处 理 程 序 
target .addHandler ("message", handleMessage); 


// 触 发 事件 


target.fire({ type: "message'", message: "Hello world!"}); 





/ /删除 事件 处 理 程序 


target.removeHandler ("message", handleMessage); 


// 再 次 ， 应 没有 处 理 程序 


target.fire({ type: "messagde"，message: "Hello world!"}); 








EventTargetExample01.htm 
在 这 段 代码 中 ， 定 义 了 handleMessage() 函数 用 于 处 理 message 事件 。 它 接受 event 对 象 并 输 


出 message 属性 ,调用 target 对 象 的 aqdHandler () 方 法 并 传 给 "message" 以 及 handleMessage () 
函数 。 在 接 下 来 的 一 行 上 ,调用 了 fire() 图 数 ， 并 传递 了 包含 2 个 属性 ， 即 type 和 message 的 对 象 
直接 量 。 它 会 调用 message 事件 的 事件 处 理 程序 ,这 样 就 会 显示 一 个 警告 框 ( 来 自 handleMessage() )。 
然后 删除 了 事件 处 理 程序 ， 这 样 即使 事件 再 次 触发 ， 也 不 会 显示 任何 警告 框 。 


为 这 种 功能 是 封装 在 一 种 自 定义 类 型 中 的 ， 其 他 对 象 可 以 继承 EventTarget 并 获得 这 个 行为 ， 
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如 下 例 所 示 : 


二 function Person (name，age){ 


} 


EventTarget.call (this); 
this.name = name; 
this.age = age; 


inheritPrototype (Person,EventTarget); 


Person.prototype.say = function(message)t{ 


this.fire({type: "message", message: message}); 


外 有 


EventTargetExample02.htm 

















Person 类 型 使 用 了 寄生 组 合 继承 (参见 第 6 章 ) 方法 来 继承 EventTarget。 一旦 调用 了 say () 


方法 ， 


便 触 发 了 事件 , 它 包 含 了 消息 的 细节 。 在 某 种 类 型 的 另外 的 方法 中 调用 fire() 方 法 是 很 常见 的 ， 








同时 它 通常 不 是 公开 调用 的 。 这 段 代码 可 以 照 如 下 方式 使 用 : 


在 


} 


/ 


unction handleMessage (event)t{ 
alert (event.target.name + " says: " + event.message); 





/创建 新 person 


Var person = new Person("Nicholas", 29); 


/ 


/添加 一 个 事件 处 理 程序 


person.addHandler ("message", handleMessage); 


/ 


/在 该 对 象 上 调用 1 个 方法 ， 它 触发 消息 事件 


person.say ("Hi there."); 


EventTargetExample02.htm 


这 个 例子 中 的 handleMessage() 因数 显示 了 某 人 名 字 (通过 event . target .mame 获得 ) 的 一 个 
警告 框 和 消息 正文 。 当 调用 say ( ) 方 法 并 传递 一 个 消息 时 ， 就 会 触发 message 事件 。 接 下 来 ， 它 又 会 


调用 handleMessage () 国 数 并 显示 警告 框 
































当代 码 中 存在 多 个 部 分 在 特定 时 刻 相互 交互 的 情况 下 ， 自 定义 事件 就 非常 有 用 了 。 这 时 ， 如 果 每 个 
对 象 都 有 对 其 他 所 有 对 象 的 引用 ,那么 整个 代码 就 会 紧密 耦合 ， 同 时 维护 也 变 得 很 困难 ， 因 为 对 某 个 对 
象 的 修改 也 会 影响 到 其 他 对 象 。 使 用 自 定义 事件 有 助 于 解 耦 相关 对 象 , 保持 功能 的 隔绝 。 在 很 多 情况 中 ， 
触发 事件 的 代码 和 监听 事件 的 代码 是 完全 分 离 的 。 


22.5 拖 放 


拖 放 是 一 种 非常 流行 的 用 户 界面 模式 。 它 的 概念 很 简单 : 点 击 某 个 对 象 ， 并 按 住 鼠 标 按钮 不 放 ， 将 
鼠标 移动 到 另 一 个 区 域 ， 然 后 释放 鼠标 按钮 将 对 象 “ 放 ”在 这 里 。 拖 放 功能 也 流行 到 了 Web 上 ， 成 为 






































了 一 些 更 传统 的 配置 界面 的 一 种 候选 方案 。 
拖 放 的 基本 概念 很 简单 : 创建 一 个 绝对 定位 的 元 素 , 使 其 可 以 用 鼠标 移动 。 这 个 技术 源 自 一 种 叫做 
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“鼠标 拖 尾 ” 的 经 典 网 页 技巧 。 和 鼠标 拖 尾 是 一 个 或 者 多 个 图 片 在 页 面 上 跟着 鼠标 指针 移动 。 单元 素 鼠 标 
拖 尾 的 基本 代码 需要 为 文档 设置 一 个 onmousemove 事件 处 理 程 序 ， 它 总 是 将 指定 元 素 移动 到 鼠标 指针 
的 位 置 ， 如 下 面 的 例子 所 示 。 


) EventUtil.addHandler (document, "mousemove", function(event)t 
Var myDiv = document .getElementById ("myDiv"); 
myDiv.style.left = event.clientX + "px"; 
myDiv.style.top = event.clientyY + "px"; 
}); 

















DragAndDropExample01.htm 


在 这 个 例子 中 ， 元 素 的 left 和 top 坐标 设置 为 了 event 对 象 的 clientx 和 clientY 属性 ， 这 
就 将 元 素 放 到 了 视 口 中 指针 的 位 置 上 。 它 的 效果 是 一 个 元 素 始 终 跟 随 指针 在 页 面 上 的 移动 。 只 要 正确 的 
时 刻 ( 当 鼠 标 按钮 按 下 的 时 候 ) 实现 该 功能 ， 并 在 之 后 删除 它 〈 当 释 放 鼠 标 按钮 时 )， 就 可 以 实现 拖 放 
了 。 最 简单 的 拖 放 界 面 可 用 以 下 代码 实现 : 


Var DragDrop = function(){ 



































var dragging = null; 





function handleEvent (event){ 


/ /获取 事件 和 目标 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 








/ /确定 事件 类 型 
switch(event.type)t 
case "mousedown": 
if (target.className.indexOf ("draggable") > -1){ 
dragging = target; 





. 


break; 


case "mousemove": 
if (dragging !== null)t 





/ /指定 位 置 

dragging.style.left = event.clientX + "px"; 

dragging.style.top = event.clientyY + "px"; 
} 


break; 


case "mouseup": 
dragging = null; 
break; 


> 


/ /公共 接口 
return { 

enable: function(){ 
EventUtil.addHandler (document, "mousedown", handleEvent); 
EventUtil.addHandler (document, "mousemove", handleEvent); 
EventUtil.addHandler (document, "mouseup", handleEvent); 
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disable: function(){ 
EventUtil.removeHandler (document, "mousedown", handleEvent); 
EventUtil.removeHandler (document, "mousemove", handleEvent); 
EventUtil.removeHandler (document, "mouseup", handleEvent); 
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DragDrop 对 象 封装 了 拖 放 的 所 有 基本 功能 。 这 是 一 个 单 例 对 象 ， 并 使 用 了 模块 模式 来 隐藏 某 些 实 
现 细节 。gdragging 变量 起 初 是 null, 将 会 存放 被 拖 动 的 元 素 , 所 以 当 该 变量 不 为 null 时 ， 就 知道 正 
在 拖 动 某 个 东西 。handleEvent () 困 数 处 理 拖 放 功 能 中 的 所 有 的 三 个 鼠标 事件 。 它 首先 获取 event 对 
象 和 事件 目标 的 引用 。 之 后 ， 用 一 个 switch 语句 确定 要 触发 哪个 事件 样式 。 当 mousedown 事件 发 生 
时 ， 会 检查 target 的 class 是 否 包 仿 "draggable" 类 ， 如 果 是 ， 那 么 将 target 存放 到 dragging 
中 。 这 个 技巧 可 以 很 方便 地 通过 标记 语言 而 非 JavaScript 脚本 来 确定 可 拖 动 的 元 素 。 

handleEvent () 的 mousemove 情况 和 前 面 的 代码 一 样 ， 不 过 要 检查 dragging 是 否 为 null。 当 
它 不 是 nul1， 就 知道 aragging 就 是 要 拖 动 的 元 素 ， 这 样 就 会 把 它 放 到 恰当 的 位 置 上 。mouseup 情况 
就 仅仅 是 将 aragging 重 置 为 null1， 让 mousemove 事件 中 的 判断 失效 。 

DragDrop 还 有 两 个 公共 方法 : enable () 和 disable()， 它们 只 是 相应 添加 和 删除 所 有 的 事件 处 
理 程序 。 这 两 个 函数 提供 了 额外 的 对 拖 放 功 能 的 控制 手段 。 

要 使 用 DragDrop 对 象 ， 只 要 在 页 面 上 包含 这 些 代码 并 调用 enable () 。 拖 放 会 自动 针对 所 有 包含 
"draggable" 类 的 元 素 启 用 ， 如 下 例 所 示 : 


<div class="draggable" style="position:absolute; background:red"> </div> 


注意 为 了 元 素 能 被 拖 放 ， 它 必须 是 绝对 定位 的 。 





























































































































22.5.1 修缮 拖 动 功能 


当 你 试 了 上 面 的 例子 之 后 ,你 会 发 现 元 素 的 左上 角 总 是 和 指针 在 一 起 。 这 个 结果 对 用 户 来 说 有 一 点 
不 夹 ， 因 为 当 鼠 标 开始 移动 的 时 候 ， 元 素 好 像 是 突然 跳 了 一 下 。 理 想 情 况 是 ， 这 个 动作 应 该 看 上 去 好 像 
这 个 元 素 是 被 指针 “ 拾 起 ”的 ， 也 就 是 说 当 在 拖 动 元 素 的 时 候 ， 用 户 点 击 的 那 一 点 就 是 指针 应 该 保持 的 
位 置 ( 见 图 22-4 )。 

R 





















































用 户 首先 点 击 的 是 这 里 被 拖 动 后 ， 指 针 就 跑 到 这 里 了 











图 22-4 
要 达到 需要 的 效果 ， 必 须 做 一 些 额外 的 计算 。 你 需要 计算 元 素 左上 角 和 指针 位 置 之 间 的 差 值 。 这 个 
差 值 应 该 在 mousedown 事件 发 生 的 时 候 确 定 , 并 且 一 直 保持 , 直到 mouseup 事件 发 生 。 通过 将 event 
的 clientx 和 clientY 属性 与 该 元 素 的 offsetLeft 和 offsetTop 属性 进行 比较 , 就 可 以 算出 水 平 
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方向 和 垂直 方向 上 需要 多 少 空间 ， 见 图 22-5。 


六 咬 | 外 Drag and Drop Example 











element.offsetTop 


N\ event.clientY 


element.offsetLeft 
| event.clientX 


图 。22-5 











为 了 保存 x 和 yy 坐标 上 的 差 值 , 还 需要 几 个 变量 。 giffx 和 diffY 这 些 变量 需要 在 onmousemove 
事件 处 理 程序 中 用 到 ， 来 对 元 素 进 行 适当 的 定位 ， 如 下 面 的 例子 所 示 。 





中 Var DragDrop = function()t{ 
var dragging = null; 
diffx = 0; 
diffyYy = 0; 





function handleEvent (event){ 


// 获 取 事 件 和 目标 
event = EventUtil.getEvent (event); 
Var target = EventUtil.getTarget (event); 











// 确 定 事 件 类 型 
switch(event.type)t{ 
case "mousedown": 
if (target.className.indexOf ("draggable") > -1)f{ 
dragging = target; 
diffx event.clientX - target .offsetLeft; 
diffY = event.clientY - target.offsetTop; 





} 


break; 


case "mousemove": 
if (dragging !== null)t 


/ /指定 位 置 

dragging.style.left = (event.clientxX - diffxX) + "px"; 

dragging.style.top = (event.clientyY - diffY) + "px"; 
} 


break; 


case "mouseup": 
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dragging = null; 
break; 


3 


/ /公共 接 口 
return { 
enable: function(){ 
EventUtil.addHandler (document, 
EventUtil.addHandler (document, 
EventUtil.addHandler (document, 


"mousedown", handleEvent); 
"mousemove", handleEvent); 
handleEvent); 








"mouseup", 


}, 


disable: function(){ 


EventUtil.removeHandler (document, 
EventUtil.removeHandler (document, 
EventUtil.removeHandler (document, 





diffx 和 aiffy 变 


"mousedown", handleEvent); 
"mousemove", handleEvent); 
handleEvent); 








"mouseup", 


DragAndDropExample03.htm 


量 是 私有 的 ， 因 为 只 有 handleEvent () 函数 需要 用 到 它们 。 当 mousedovwn 事 





件 发 生 时 , 通过 clientx 减 去 目标 的 offsetLeft,，clientY 减 去 目标 的 offsetTop, 可 以 计算 到 这 


两 个 变量 的 值 。 当 触发 了 mousemove 事件 后 ， 就 可 以 使 用 这 些 变量 从 指针 坐标 




















减 去 ， 得 到 最 终 的 坐 








标 。 最 后 得 到 一 个 更 加 平滑 的 拖 动 体验 ， 更 加 符合 用 户 所 期 望 的 方式 。 


22.5.2 ”添加 自 定义 事件 


拖 放 功 能 还 不 能 真正 应 用 起 来 ,除非 能 知道 什么 时 候 拖 动 开 始 了 。 从 这 点 上 看 ,前 面 的 代码 没有 提 























生 ， 让 应 用 的 其 他 部 分 与 拖 动 功能 进行 交互 。 


供 任何 方法 表示 拖 动 开 始 、 正 在 拖 动 或 者 已 经 结束 。 


这 时 ， 可 以 使 用 自 定义 事件 来 指示 这 几 个 事件 的 发 








由 于 DragDrop 对 象 是 一 个 使 用 了 模块 模式 的 单 例 ， 所 以 需要 进行 一 些 更 改 来 使 用 EventTarget 
类 型 。 首 先 ， 创 建 一 个 新 的 EventTarget 对 象 ， 然 后 添加 enable() 和 disable() 方 法 ， 最 后 返回 这 











个 对 象 。 看 以 下 内 容 。 
Var DragDrop = function(){ 


Var dragdrop = new EventTarget(), 


dragging = null, 
drEfXx sO; 
ifEY S03 


function handleEvent (event 


~ 


/ /获取 事件 和 对 象 





event = 
var target = 


/ /确定 事件 类 型 





EventUtil.getEvent (event); 
EventUtil.getTarget (event); 
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switch(event.type)t 
case "mousedown": 
if (target.className.indexOf ("draggable") > -1){ 
dragging = target; 
QiffX = event.clientX - target.offsetLeft; 
diffY = event.clientY - target.offsetTop; 
dragdrop.fire({type:"dragstart", target: dragging, 
x: event.clientX, y: event.clientY}); 


} 


break; 


case "mousemove": 


if (dragging !== null)t 
/ /指定 位 置 
dragging.style.left = (event.clientX - QiffX) + "px"; 
dragging.style.top = (event.clientyY - diffY) + "px"; 
// 触 发 自 定义 事件 


dragdrop.fire({type:"drag", target: dragging, 
x: event.clientxX, y: event.clientY}); 
} 
break; 


case "mouseup": 
dragdrop.fire({type:"dragend", target: dragging, 
x: event.clientxX, y: event.clientY}); 
dragging = null; 
break; 


}3 


/ /公共 接口 

dragdrop.enable = function(){ 
EventUtil.addHandler (document, "mousedown", handleEvent); 
EventUtil.addHandler (document, "mousemove", handleEvent); 
EventUtil.addHandler (document, "mouseup", handleEvent); 





dragdrop.disable = function(){ 
EventUtil.removeHandler (document, "mousedown", handleEvent); 
EventUtil.removeHandler (document, "mousemove", handleEvent); 
EventUtil.removeHandler (document, "mouseup", handleEvent); 


return dragdrop; 
FG 


DragAndDropExample04.htm 

这 段 代 码 定义 了 三 个 事件 : dragstart、drag 和 dragend, 它 们 都 将 被 拖 动 的 元 素 设置 为 站 target， 

并 给 出 了 x 和 y 属性 来 表示 当前 的 位 置 。 它 们 触发 于 aragdrop 对 象 上 ， 之 后 在 返回 对 象 前 给 对 象 增 
加 enable() 和 disable() 方 法 。 这 些 模块 模式 中 的 细小 更 改 令 DragDrop 对 象 支持 了 事件 ， 如 下 : 
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DragDrop.addHandler ("dragstart", function(event)t{ 
Var status = document .getElementById("status"); 
status.innerHTML = "Started dragging " + event.target.id; 


用 





DragDrop.addHandler ("drag", function(event)t 
Var status = document .getElementById("status"); 
status.innerHTML += "<br/> Dragged " + event.target.id + " to (" + event.x + 
”+ event.y + ")"; 





J 


DragDrop.addHandler ("dragend", function(event)t{ 
Var status = document .getElementById("status"); 
status.innerHTML += "<br/> Dropped " + event.target.id + " at (" + event.x 十 
" + event.y + ")"; 








DragAndDropExample04.htm 




















这 里 , 为 DragDrop 对 象 的 每 个 事件 添加 了 事件 处 理 程序 。 还 使 用 了 一 个 元 素来 实现 被 拖 动 的 元 素 
当前 的 状态 和 位 置 。 一 旦 元 素 被 放下 了 ， 就 可 以 看 到 从 它 一 开始 被 拖 动 之 后 经 过 的 所 有 的 中 间 步 又 。 

为 DragDrop 添加 自 定义 事件 可 以 使 这 个 对 象 更 健壮 ， 它 将 可 以 在 网 络 应 用 中 处理 复杂 的 拖 放 
功能 。 


22.6 小结 


JavaScript 中 的 函数 非常 强大 ， 因 为 它们 是 第 一 类 对 象 。 使 用 闭 包 和 函数 环境 切换 ， 还 可 以 有 很 多 
使 用 函数 的 强大 方法 。 可 以 创建 作用 域 安全 的 构造 函数 , 确保 在 缺少 new 操作 符 时 调用 构造 函数 不 会 改 
变 错 误 的 环境 对 象 。 

口 可 以 使 用 惰性 载 人 函数 ， 将 任何 代码 分 支 推迟 到 第 一 次 调用 琐 数 的 时 候 。 

口 函数 绑 定 可 以 让 你 创建 始终 在 指定 环境 中 运行 的 函数 ， 同 时 函数 柯 里 化 可 以 让 你 创建 已 经 填 了 

某 些 参数 的 函数 。 

口 将 绑 定 和 柯 里 化 组 合 起 来 ， 就 能 够 给 你 一 种 在 任意 环境 中 以 任意 参数 执行 任意 函数 的 方法 。 

ECMAScript 5 允许 通过 以 下 几 种 方式 来 创建 防 算 改 对 象 。 

口 不 可 扩展 的 对 象 ， 不 允许 给 对 象 添 加 新 的 属性 或 方法 。 

口 密封 的 对 象 ， 也 是 不 可 扩展 的 对 象 ， 不 允许 删除 已 有 的 属性 和 方法 。 

口 冻结 的 对 象 ， 也 是 密封 的 对 象 ， 不 允许 重 写 对 象 的 成 员 。 

JavaScript 中 可 以 使 用 setTimeout () 和 setInterval() 如 下 创建 定时 器 。 

口 定时 器 代码 是 放 在 一 个 等 待 区 域 , 直到 时 间 间 隔 到 了 之 后 ,此 时 将 代码 添加 到 JavaScript 的 处 理 

队列 中 ， 等 待 下 一 次 JavaScript 进程 空闲 时 被 执行 。 

口 每 次 一 段 代码 执行 结束 之 后 ， 都 会 有 一 小 段 空 闪 时 间 进 行 其 他 浏览 器 处 理 。 

口 这 种 行为 意味 着 ， 可 以 使 用 定时 器 将 长 时 间 运 行 的 脚本 切 分 为 一 小 块 一 小 块 可 以 在 以 后 运行 的 
代码 段 。 这 种 做 法 有 助 于 Web 应 用 对 用 户 交 互 有 更 积极 的 响应 。 

JavaScript 中 经 常 以 事件 的 形式 应 用 观察 者 模式 。 虽 然 事 件 常常 和 DOM 一 起 使 用 , 但 是 你 也 可 以 通 
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过 实现 自 定义 事件 在 自己 的 代码 中 应 用 。 使 用 自 定义 事件 有 助 于 将 不 同 部 分 的 代码 相互 之 间 解 看 ,让 维 
护 更 加 容易 ， 并 减少 引入 错误 的 机 会 。 











拖 放 对 于 桌 1 


看 和 Web 应 用 都 是 一 个 非常 流行 的 用 户 界面 范例 ， 它 能 够 让 用 户 非 常 方便 地 以 一 种 直 





观 的 方式 重新 排列 或 者 配置 东西 。 在 JavaScrip 中 可 以 使 用 鼠标 事件 和 一 些 简单 的 计算 来 实现 这 种 功能 
类 型 。 将 拖 放行 为 和 自 定义 事件 结合 起 来 可 以 创建 一 个 可 重复 使 用 的 框架 ， 它 能 应 用 于 各 种 不 同 的 情 





况 下 。 
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第 学 呈 
离线 应 用 与 客户 端 存储 


本 章 内 容 

口 进行 离线 检测 

口 使 用 离线 缓存 

口 在 浏览 器 中 保存 数据 



































支 Web 应 用 开发 是 HTML5 的 另 一 个 重点 。 所 谓 离线 Web 应 用 ， 就 是 在 设备 不 能 上 
网 的 情况 下 仍然 可 以 运行 的 应 用 。HTML5 把 离线 应 用 作为 重点 ， 主 要 是 基于 开发 人 员 的 
心愿 。 前 端 开 发 人 员 一 直 硕 望 Web 应 用 能 够 与 传统 的 客户 端 应 用 同 场 竞技 , 起 码 做 到 只 要 设备 有 电 
就 能 使 用 。 

开发 离线 Web 应 用 需要 几 个 步 又 。 首 先是 确保 应 用 知道 设备 是 否 能 上 网 ， 以 便 下 一 步 执行 正确 的 
操作 。 然 后 ， 应 用 还 必须 能 访问 一 定 的 资源 (图像 、JavaScript、CSS 等 )， 只 有 这 样 才能 正常 工作 。 最 
后 ， 必 须 有 一 块 本 地 空间 用 于 保存 数据 ， 无 论 能 否 上 网 都 不 妨碍 读 写 。HTMLS 及 其 相关 的 API 让 开发 
离线 应 用 成 为 现实 。 


23.1 离线 检测 


开发 离线 应 用 的 第 一 步 是 要 知道 设备 是 在 线 还 是 离线 ,HTML5 为 此 定义 了 一 个 navigator.onLine 
属性 , 这 个 属性 值 为 true 表示 设备 能 上 网 , 值 为 false 表示 设备 离线 。 这 个 属性 的 关键 是 浏览 器 必须 
知道 设备 能 否 访 问 网 络 ， 从 而 返回 正确 的 值 。 实 际 应 用 中 ，navigator .onLine 在 不 同 浏览 器 间 还 有 
些小 的 差异 。 
口 IE6+ 和 Safari 5+ 能 够 正确 检测 到 网 络 已 断 开 ， 并 将 navigator .onLine 的 值 转换 为 false。 
口 Firefox 3+ 和 Opera 10.6+ 支 持 navigator .onLine 属性 ,但 你 必须 手工 选中 菜单 项 “文件 一 Web 
开发 人 员 (设置 ) 一 脱 机 工作 ”才能 让 浏览 需 正 常 工作 。 
口 Chrome 11 及 之 前 版 本 始终 将 navigator.onLine 属性 设置 为 true。 这 是 一 个 有 待 修复 的 

bug"。 

由 于 存在 上 述 兼容 性 问题 , 单独 使 用 navigator .onLine 属性 不 能 确定 网 络 是 否 连通 。 即 便 如 此 ， 
在 请 求 发 生 错 误 的 情况 下 ， 检 测 这 个 属性 仍然 是 管用 的 。 以 下 是 检测 该 属性 状态 的 示例 。 

if (navigator.onLine){ 

/ /正常 工 作 


} else { 
// 执 行 离线 状态 时 的 任务 





































































































































































































这 个 bug 在 2011 年 10 月 已 被 修复 (http://code.google.com/p/chromium/issues/detail?id=7469 )。 
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OnLineExample01.htm 


除 navigator .onLine 属性 之 外 ,为 了 更 好 地 确定 网 络 是 否 可 用 ，HTML5 还 定义 了 两 个 事件 : 
online 和 offline。 当 网 络 从 离线 变 为 在 线 或 者 从 在 线 变 为 离线 时 , 分别 触发 这 两 个 事件 。 这 两 个 事 
件 在 window 对 象 上 触发 。 


EventUtil.addHandler (window, "online", function(){ 
alert ("Online"); 


























}) 3 

EventUtil.addHandler (window, "offline", function()t{ 
alert ("Offline"); 

})3 





OnlineEventsExample01.htm 











为 了 检测 应 用 是 否 离线 ,在 页 面 加 载 后 ,， 最 好 先 通 过 navigator .onLine 取得 初始 的 状态 。 然 后 ， 
就 是 通过 上 述 两 个 事件 来 确定 网 络 连接 状态 是 否 变化 。 当 上 述 事件 触发 时 ，navigator.onLine 属性 
的 值 也 会 改变 ， 不 过 必须 要 手工 轮 询 这 个 属性 才能 检测 到 网 络 状 态 的 变化 。 

支持 离线 检测 的 浏览 器 有 IE 6+( 只 支持 navigator .onLine 属性 )、Firefox 3、Safari4、Opera 10.6、 
Chrome 、iOS 3.2 版 Safari 和 Android 版 WebKit。 


23.2 ”应 用 缓存 


HTML5 的 应 用 缓存 (application cache ), 或 者 简称 为 appcache,， 是 专门 为 开发 离线 Web 应 用 而 设计 
的 。Appcache 就 是 从 浏览 器 的 缓存 中 分 出 来 的 一 块 缓存 区 。 要 想 在 这 个 缓存 中 保存 数据 , 可 以 使 用 一 个 
描述 文件 (manifest file )， 列 出 要 下 载 和 缓存 的 资源 。 下 面 是 一 个 简单 的 描述 文件 示例 。 


CACHE MANIFEST 
#Comment 
































file.js 
fileé.cGss 


在 最 简单 的 情况 下 ， 描 述 文件 中 列 出 的 都 是 需要 下 载 的 资源 ， 以 备 离线 时 使 用 。 









设置 描述 文件 的 选项 非常 多 ,本 书 不 打算 详细 解释 每 一 个 选项 。 要 了 解 这 些 选项 ， 
推荐 读者 阅读 HTML5Doctor 中 的 文章 “Go offline with application cache” ， 网 址 为 
http://htmlSdoctor.com/go-offline-with-application-cache。 








要 将 描述 文件 与 页 面 关联 起 来 , 可 以 在 <html> 中 的 manifest 属性 中 指定 这 个 文件 的 路 径 , 例如 : 
<html manifest="/offline.manifest"> 


以 上 代码 告诉 页 面 ，/offline.manifest 中 包含 着 描述 文件 。 这 个 文件 的 MIME 类 型 必须 是 


text/cache-mani fest', 
































人) 描述 文件 的 扩展 名 以 前 推荐 用 manifest， 但 现在 推荐 的 是 appcache。 
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虽然 应 用 缓存 的 意 网 是 确保 离线 时 资源 可 用 , 但 也 有 相应 的 JavaScript API 让 你 知道 它 都 在 做 什么 。 
这 个 API 的 核心 是 applicationCache 对 象 ， 这 个 对 象 有 一 个 status 属性 ， 属 性 的 值 是 常量 ， 表 示 
应 用 缓存 的 如 下 当前 状态 。 
口 0: 无 缓存 ， 即 没有 与 页 面相 关 的 应 用 缓存 。 
口 1: 闲置 ， 即 应 用 缓存 未 得 到 更 新 。 
口 2: 检查 中 ， 即 正在 下 载 描述 文件 并 检查 更 新 。 
口 3: 下 载 中 ， 即 应 用 缓存 正在 下 载 描述 文件 中 指定 的 资源 。 
口 4: 更 新 完成 , 即 应 用 缓存 已 经 更 新 了 资源 , 而 且 所 有 资源 都 已 下 载 完 毕 , 可 以 通过 swapcache () 
来 使 用 了 。 
口 5: 废弃 ， 即 应 用 缓存 的 描述 文件 已 经 不 存在 了 ， 因 此 页 面 无 法 再 访问 应 用 缓存 。 
应 用 缓存 还 有 很 多 相关 的 事件 ， 表 示 其 状态 的 改变 。 以 下 是 这 些 事件 。 
口 checking: 在 浏览 器 为 应 用 缓存 查找 更 新 时 触发 。 
口 error: 在 检查 更 新 或 下 载 资 源 期 间 发 生 错误 时 触发 。 
口 noupdate: 在 检查 描述 文件 发 现 文件 无 变化 时 触发 。 
口 dgownloading: 在 开始 下 载 应 用 缓存 资源 时 触发 。 
口 progress: 在 文件 下 载 应 用 缓存 的 过 程 中 持续 不 断 地 触发 。 
口 updateready: 在 页 面 新 的 应 用 缓存 下 载 完 毕 且 可 以 通过 swapcache () 使 用 时 触发 。 
口 cached: 在 应 用 绥 存 完整 可 用 时 触发 。 
一 般 来 讲 ， 这 些 事件 会 随 着 页 面 加 载 按 上 述 顺 序 依次 触发 。 不 过 ， 通 过 调用 update() 方 法 也 可 以 
手工 干预 ， 让 应 用 缓存 为 检查 更 新 而 触发 上 述 事件 。 


applicationCache.update(); 


update() 一 经 调用 ,应 用 缓存 就 会 去 检查 描述 文件 是 否 更 新 ( 触发 checking 事件 ), 然后 就 像 页 
面 刚 刚 加 载 一 样 ， 继 续 执 行 后 续 操 作 。 如 果 触 发 了 cached 事件 ， 就 说 明 应 用 缓存 已 经 准备 就 绪 ， 不 会 
再 发 生 其 他 操作 了 。 如 果 触 发 了 updateready 事件 ， 则 说 明 新 版 本 的 应 用 缓存 已 经 可 用 ， 而 此 时 你 需 
要 调用 swapcache () 来 启用 新 应 用 缓存 。 

EventUtil.addHandler (applicationCache, "updateready", function()t{ 


applicationCache.swapCache(); 


} 3 


支持 HTML5 应 用 缓存 的 浏览 器 有 Firefox 3+、Safari 4+、Opera 10.6、Chrome 、iOS 3.2+ 版 Safari 
及 Android 版 WebKit。 在 Firefox 4 及 之 前 版 本 中 调用 swapcache () 会 抛 出 错误 。 


23.3 ”数据 存储 


随 着 Web 应 用 程序 的 出 现 ， 也 产生 了 对 于 能 够 直接 在 客户 端 上 存储 用 户 信息 能 力 的 要 求 。 想 法 很 
合乎 逻辑 , 属于 某 个 特定 用 户 的 信息 应 该 存在 该 用 户 的 机 器 上 。 无 论 是 登录 信息 、 偏 好 设 定 或 其 他 数据 ， 
Web 应 用 提供 者 发 现 他 们 在 找 各 种 方式 将 数据 存在 客户 端 上 。 这 个 问题 的 第 一 个 方案 是 以 cookie 的 形式 
出 现 的 ，cookie 是 原来 的 网 景 公 司 创造 的 。 一 份 题 为 “Persistent Client State: HTTP Cookes”( 持久 客户 
端 状 态 : HTTP Cookies ) 的 标准 中 对 cookie 机 制 进 行 了 阐述 (该 标准 还 可 以 在 这 里 看 到 : 
http://curl.haxx.se/rfc/cookie_spec.html )。 今 天 ，cookie 只 是 在 客户 端 存 储 数 据 的 其 中 一 种 选项 。 
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23.3.1 Cookie 





HTTP Cookie， 通 常 直 接 叫 做 cookie， 最 初 是 在 客户 端 用 于 存储 会 话 信 息 的 。 该 标准 要 求 服务 器 对 
任意 HTTP 请 求 发 送 Set-Cookie HTTP 头 作 为 响应 的 一 部 分 ， 其 中 包含 会 话 信 息 。 例 如 ， 这 种 服务 器 响 
应 的 头 可 能 如 下 : 

HTTP/1.1] 200 OK 

Content-type: text/html 


Set-Cookie: name=value 
Other-header: other-header-value 


这 个 HTTP 响应 设置 以 name 为 名 称 、 以 value 为 值 的 一 个 cookie， 名 称 和 值 在 传送 时 都 必须 是 
URL 编码 的 。 浏 览 器 会 存储 这 样 的 会 话 信 息 ， 并 在 这 之 后 ， 通 过 为 每 个 请 求 添加 Cookie HTTP 头 将 信 
息 发 送 回 服务 器 ， 如 下 所 示 : 

GET /index.html HTTP/1.1 


Cookie: name=value 
Other-header: other-header-value 


发 送 回 服务 器 的 额外 信息 可 以 用 于 唯一 验证 客户 来 自 于 发 送 的 哪个 请 求 。 

1. 限制 

cookie 在 性 质 上 是 绑 定 在 特定 的 域名 下 的 。 当 设 定 了 一 个 cookie 后 , 再 给 创建 它 的 域名 发 送 请 求 时 ， 
都 会 包含 这 个 cookie。 这 个 限制 确保 了 储存 在 cookie 中 的 信息 只 能 让 批准 的 接受 者 访问 ， 而 无 法 被 其 他 
域 访问 。 

1 于 cookie 是 存在 客户 端 计算 机 上 的 , 还 加 入 了 一 些 限制 确保 cookie 不 会 被 恶意 使 用 , 同时 不 会 占 
据 太 多 磁盘 空间 。 每 个 域 的 cookie 总 数 是 有 限 的 ， 不 过 浏览 器 之 间 各 有 不 同 。 如 下 所 示 。 

口 IE6 以 及 更 低 版 本 限制 每 个 域名 最 多 20 个 cookie。 

口 IE7 和 之 后 版 本 每 个 域名 最 多 50 个 。IE7 最 初 是 支持 每 个 域名 最 大 20 个 cookie， 之 后 被 微软 的 
一 个 补丁 所 更 新 。 

口 Firefox 限制 每 个 域 最 多 50 个 cookie。 

口 Opera 限制 每 个 域 最 多 30 个 cookie。 

口 Safari 和 Chrome 对 于 每 个 域 的 cookie 数量 限制 没有 硬性 规定 。 

当 超 过 单个 域名 限制 之 后 还 要 再 设置 cookie,， 浏 览 需 就 会 清除 以 前 设置 的 cookie。IE 和 Opera 会 删 
除 最 近 最 少 使 用 过 的 (LRU，LeastRecently Used ) cookie， 腾 出 空间 给 新 设置 的 cookie。Firefox 看 上 去 
好 像 是 随机 决定 要 清除 哪个 cookie， 所 以 考虑 cookie 限制 非常 重要 ， 以 免 出 现 不 可 预期 的 后 果 。 

浏览 器 中 对 于 cookie 的 尺寸 也 有 限制 。 大 多 数 浏览 器 都 有 大 约 4096B〈 加 减 1) 的 长 度 限 制 。 为 了 
最 佳 的 浏览 器 兼容 性 ， 最 好 将 整个 cookie 长 度 限制 在 4095B ( 含 4095 ) 以 内 。 尺 二 限制 影响 到 一 个 域 
下 所 有 的 cookie， 而 并 非 每 个 cookie 单独 限制 。 

如 果 你 尝试 创建 超过 最 大 尺寸 限制 的 cookie, 那么 该 cookie 会 被 悄 无 声息 地 丢掉 。 注 意 ， 虽 然 一 个 
字符 通常 占用 一 字 节 ， 但 是 多 字 节 情况 则 有 不 同 。 

2. cookie 的 构成 

cookie 由 浏览 器 保存 的 以 下 几 块 信息 构成 。 

口 名 称 : 一 个 唯一 确定 cookie 的 名 称 。cookie 名 称 是 不 区 分 大 小 写 的 ,所 以 mycookie 和 MyCookie 

被 认为 是 同一 个 cookie。 然 而 ， 实 践 中 最 好 将 cookie 名 称 看 作 是 区 分 大 小 写 的 ， 因 为 某 些 服务 
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需 会 这 样 处 理 cookie。cookie 的 名 称 必 须 是 经 过 URL 编码 的 。 

口 值 : 储存 在 cookie 中 的 字符 串 值 。 值 必须 被 URL 编码 。 

口 域 : cookie 对 于 哪个 域 是 有 效 的 。 所 有 向 该 域 发 送 的 请 求 中 都 会 包含 这 个 cookie 信息 。 这 个 值 
可 以 包含 子 域 subdomain, 如 www.wrox.com), 也 可 以 不 包含 它 ( 如 .wzrox.com, 则 对 于 wrox.com 
的 所 有 子 域 都 有 效 )。 如 果 没 有 明确 设 定 ， 那 么 这 个 域 会 被 认 作 来 自 设置 cookie 的 那个 域 。 

口 路 径 : 对 于 指定 域 中 的 那个 路 径 ， 应 该 向 服务 器 发 送 cookie。 例 如 ， 你 可 以 指定 cookie 只 有 从 
http://www.wrox.com/books/ 中 才能 访问 ， 那 么 http://www.wrox.com 的 页 面 就 不 会 发 
送 cookie 信息 ， 即 使 请 求 都 是 来 自 同一 个 域 的 。 

口 失效 时 间 : 表示 cookie 何 时 应 该 被 删除 的 时 间 惟 (也 就 是 ， 何 时 应 该 停止 向 服务 器 发 送 这 个 
cookie )。 默认 情况 下 , 浏览 器 会 话 结束 时 即将 所 有 cookie 删除 ; 不 过 也 可 以 自己 设置 删除 时 间 。 
这 个 值 是 个 GMT 格式 的 日 期 ( Wdy DD-Mon-YYYY HH:MM:SS GMT )， 用 于 指定 应 该 删除 
cookie 的 准确 时 间 。 因 此 ，cookie 可 在 浏览 器 关闭 后 依然 保存 在 用 户 的 机 器 上 。 如 果 你 设置 的 失 
效 日 期 是 个 以 前 的 时 间 ， 则 cookie 会 被 立刻 删除 。 

口 安全 标志 : 指定 后 ，cookie 只 有 在 使 用 SSL 连接 的 时 候 才 发 送 到 服务 器 。 例 如 ，cookie 信息 只 
能 发 送 给 nttps://www.wrox.com， 而 http://www.wrox.com 的 请 求 则 不 能 发 送 cookie。 

每 一 段 信息 都 作为 Set-cookie 头 的 一 部 分 ， 使 用 分 号 加 空格 分 隔 每 一 段 ， 如 下 例 所 示 。 

HTTP/1.1 200 OK 

Content-type: text/html 


Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain= .wrox.com 
Other-header: other-header-value 


该 头 信息 指定 了 一 个 叫做 name 的 cookie, 它 会 在 格林 威 治 时 间 2007 年 1 月 22 日 7:10:24 失效, 同 
时 对 于 www .wrox.com 和 wrox.com 的 任何 子 域 (如 p2p.wrox.com) 都 有 效 。 
secure 标志 是 cookie 中 唯一 一 个 非 名 值 对 儿 的 部 分 ， 直 接 包 含 一 个 secure 单词 。 如 下 : 


HTTP/1.1 200 OK 

Content-type: text/html 

Set-Cookie: name=value; domain=.wrox.com; path=/; secure 
Other-header: other-header-value 


这 里 , 创建 了 一 个 对 于 所 有 wrox. com 的 子 域 和 域名 下 (由 path 参数 指定 的 ) 所 有 页 面 都 有 效 的 
cookie。 因 为 设置 了 secure 标志 ， 这 个 cookie 只 能 通过 SSL 连接 才能 传输 。 

尤其 要 注意 ， 域 、 路 径 、 失 效 时 间 和 secure 标志 都 是 服务 器 给 浏览 器 的 指示 ， 以 指定 何 时 应 该 发 
送 cookie。 这 些 参数 并 不 会 作为 发 送 到 服务 器 的 cookie 信息 的 一 部 分 ， 只 有 名 值 对 儿 才 会 被 发 送 。 

3. JavaScript 中 的 cookie 

在 JavaScript 中 处 理 cookie 有 些 复杂 ,因为 其 众所周知 的 整 脚 的 接口 , 即 BOM 的 aocument . cookie 
属性 。 这 个 属性 的 独特 之 处 在 于 它 会 因为 使 用 它 的 方式 不 同 而 表现 出 不 同 的 行为 。 当 用 来 获取 属性 值 时 ， 
document .cookie 返回 当前 页 面 可 用 的 (根据 cookie 的 域 、 路 径 、 失 效 时 间 和 安全 设置 ) 所 有 cookie 
的 字符 串 ， 一 系列 由 分 号 隔 开 的 名 值 对 儿 ， 如 下 例 所 示 。 

namel=valuel ;name2=value2;name3=value3 

所 有 名 字 和 值 都 是 经 过 URL 编码 的 ， 所 以 必须 使 用 decodeURIComponent () 来 解码 。 

当 用 于 设置 值 的 时 候 , document .cookie 属性 可 以 设置 为 一 个 新 的 cookie 字符 串 。 这 个 cookie 字 
符 串 会 被 解释 并 添加 到 现 有 的 cookie 集合 中 。 设 置 aocument .cookie 并 不 会 覆盖 cookie, 除非 设置 的 
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cookie 的 名 称 已 经 存在 。 设 置 cookie 的 格式 如 下 ， 和 set-cookie 头 中 使 用 的 格式 一 样 。 

name=value; expires=expiration time; path=domain path; domain=domain name; secure 

这 些 参数 中 ， 只 有 cookie 的 名 字 和 值 是 必需 的 。 下 面 是 一 个 简单 的 例子 。 

document .cookie = "name=Nicholas"; 

这 段 代码 创建 了 一 个 叫 name 的 cookie， 值 为 Nicholas。 当 客户 端 每 次 向 服务 器 端 发 送 请 求 的 时 
候 ， 都 会 发 送 这 个 cookie; 当 浏 览 器 关闭 的 时 候 ， 它 就 会 被 删除 。 虽 然 这 段 代码 没 问题 ,但 因为 这 里 正 
好 名 称 和 值 都 无 需 编 码 ， 所 以 最 好 每 次 设置 cookie 时 都 像 下 面 这 个 例子 中 一 样 使 用 encodeURI- 


Component ( ) 。 














document .cookie = encodeURIComponent ("name") + "=" + 
encodeURIComponent ("Nicholas"); 


要 给 被 创建 的 cookie 指定 额外 的 信息 ， 只 要 将 参数 追加 到 该 字符 串 ， 和 set-cookie 头 中 的 格式 
一 样 ， 如 下 所 示 。 


document .cookie = encodeURIComponent ("name") + "=" + 
encodeURIComponent ("Nicholas") + "; domain=.wrox.com; path=/"; 


由 于 JavaScript 中 读 写 cookie 不 是 非常 直观 ， 常 常 需要 写 一 些 函 数 来 简化 cookie 的 功能 。 基 本 的 
cookie 操作 有 三 种 : 读 取 、 写 入 和 删除 。 它 们 在 cookieUtil 对 象 中 如 下 表示 。 


Var CookieUti1l = { 

















get: function (name)f{ 
Var cookieName = encodeURIComponent (name) + "=", 


cookieStart = document.cookie.indexOf (cookieName), 
CookieValue = null; 
if (cookieStart > -1){ 
Var cookieEnd = document.cookie.indexOf(";", cookieStart); 
if (cookieEnd == -1){ 
cookieEnd = document .cookie.1length; 





} 
cookieValue = decodeURIComponent (document .cookie.substring (cookieStart 
+ CookieName.length, cookieEnd)); 





} 


return cookieValue; 


set: function (name, value, expires, path, domain, secure) { 
Var cookieText = encodeURIComponent (name) + "=" + 
encodeURIComponent (value); 


if (expires instanceof Date) { 
CookieText += "; expires=" + expires.toGMTString(); 


. 


if (path) { 
CookieText += "; path=" + path; 





} 
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if (domain) { 
cookieText += "; domain=" + domain; 
} 
if (secure) { 
CookieText += "; Secure"; 
} 
document .cookie = cookieText; 
站 
unset: function (name, path, domain, secure)t{ 
this.set (name, "", new Date(0), path, domain, secure); 





} 


CookieUtil.get!( 


() 方 法 根据 cookie 的 名 字 获 取 相 应 的 值 。 它 会 























CookieUtil.js 





在 document .cookie 字符 串 中 查 


找 cookie 名 加 上 等 于 号 的 位 置 。 如 果 找 到 了 ,那么 使 用 ingexof () 查 找 该 位 置 之 后 的 第 一 个 分 号 〈 表 


示 了 该 cookie 的 结束 位 置 )。 





符 串 都 是 cookie 的 值 。 该 值 使 用 decodeURIComponent ( ) 进行 解码 并 最 后 返 


则 返回 nul1。 





可 选 
表示 是 否 要 添加 secure 标 





这 个 方法 中 ,名 称 和 值 都 使 用 encodeU 


参数 是 Date 对 象 ， 那么 


的 用 于 指定 cookie 何 时 应 被 删除 的 Da 





会 使 用 Date 对 象 的 tocMTString () 方 法 正本 








如 果 没 有 找到 分 号 ， 则 表示 该 cookie 是 字符 串 中 的 最 后 





一 个 ， 则 余下 的 字 




















只 


ee 


j 志 的 布尔 值 。 参 数 是 按照 它们 的 使 用 频率 排列 的 ， 
) 进行 了 URL 编 码 ,并 检查 其 他 选项 


格式 化 Da 








RIComponent ( 




















本 三 : 








回 。 如 果 没 有 发 现 cookie， 


CookieUtil.set() 方 法 在 页 面 上 设置 一 个 cookie, 接收 如 下 几 个 参数 : cookie 的 名 称 , cookie 的 值 ， 
te 对 象 ，cookie 的 可 选 的 URL 路 径 ， 可 选 的 域 ， 以 及 可 选 的 
有 头 两 个 是 必需 的 。 在 





如果 expires 


对 象 ， 并 添加 到 





expires 选项 上 。 方法 的 其 他 部 分 就 是 构造 cookie 字符 串 并 将 其 设置 到 document .cookie 中 。 


没有 删除 已 有 cookie 的 直接 方法 。 所 以 ,需要 使 用 相同 的 路 径 、 
将 失效 时 间 设 置 为 过 去 的 时 间 。cookieUtil.unset 
可 选 的 路 径 参 


除 的 cookie 的 名 称 、 




















数 、 可 选 的 域 参数 和 可 选 的 安全 参数 。 


域 和 安全 选项 再 次 设置 cookie， 并 
() 方 法 可 以 处 理 这 种 事情 。 它 接收 4 个 参数 : 要 删 





这 些 参数 加 上 空 字符 串 并 设置 失效 时 间 为 1970 年 1 月 1 日 (初始 化 为 0ms 的 Date 对 象 的 值 )， 传 








给 cookieUtil.set()。 这 样 就 能 确保 删除 cookie。 
可 以 像 下 面 这 样 使 用 上 述 方法 。 
// 设 置 cookie 
CookieUtil.set("name", "Nicholas"); 
CookieUtil.set("book", "Professional JavaScript"); 
// 读 取 cookie 的 值 


alert (CookieUtil.get ("name" 
alert (CookieUtil.get ("book")); 


/ /删除 cookie 
CookieUtil.unset(" 
CookieUtil.unset!( 
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// 设 置 cookie， 和 包括 它 的 路 径 、 域 、 失 效 日 期 
CookieUtil.set("name", "Nicholas", "/books/projs/", "Wwww.wrox.com", 
new Date("January 1, 2010")); 


/ /删除 刚 刚 设置 的 cookie 
CookieUtil.unset ("name", "/books/projs/", "Www.wrox.com"); 


// 设 置 安全 的 cookie 
CookieUtil.set("name", "Nicholas", null, null, null, true); 


CookieExample01.htm 


这 些 方法 通过 人 处理 解析、 构造 cookie 字符 串 的 任务 令 在 客户 端 利 用 cookie 存储 数据 更 加 简单 。 

4. 子 cookie 

为 了 绕 开 浏览 器 的 单 域名 下 的 cookie 数 限制 ,一 些 开发 人 员 使 用 了 一 种 称 为 子 cookie ( subcookie ) 
的 概念 。 子 cookie 是 存放 在 单个 cookie 中 的 更 小 段 的 数据 。 也 就 是 使 用 cookie 值 来 存储 多 个 名 称 值 对 
儿 。 子 cookie 最 常见 的 的 格式 如 下 所 示 。 


name=namel=valuel&name2=value2&name3=value3&name4=value4&name5=value5 


子 cookie 一 般 也 以 查询 字符 串 的 格式 进行 格式 化 。 然 后 这 些 值 可 以 使 用 单个 cookie 进行 存储 和 访 
问 , 而 非 对 每 个 名 称 - 值 对 儿 使 用 不 同 的 cookie 存储 。 最 后 网 站 或 者 Web 应 用 程序 可 以 无 需 达 到 单 域名 
cookie 上 限 也 可 以 存储 更 加 结构 化 的 数据 。 

为 了 更 好 地 操作 子 cookie, 必须 建立 一 系列 新 方法 。 子 cookie 的 解析 和 序列 化 会 因子 cookie 的 期 望 
用 途 而 略 有 不 同 并 更 加 复杂 些 。 例如, 要 获得 一 个 子 cookie, 首先 要 遵循 与 获得 cookie 一 样 的 基本 步 又 ， 
但 是 在 解码 cookie 值 之 前 ， 需 要 按 如 下 方法 找 出 子 cookie 的 信息 。 


Var SubCookieUtil = { 


























9 get: function (name, subName)t{ 
Var subCookies = this.getAll (name); 
if (subCookies){ 
return subCookies[subName]; 
} else { 
return null; 
} 
于 


getAll: function(name)t{ 
Var cookieName = encodeURIComponent (name) + "=", 





CookieStart = document.cookie.indexOf (cookieName), 
cookieVvalue = null, 

cookieEngd, 

subCookies, 

4 

parts, 


result = {}; 


if (cookieStart > -1){ 
CookieEnd = document .cookie.indexOf(";", cookieSsStart); 
if (cookieEnd == -1){ 
cookieEnd = document .cookie.length; 








} 


cookieValue = document.cookie.substring(cookieStart + 
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cookieName.length, cookieEnd); 





if (cookieValue.length > 0)f{ 
subCookies = cookieValue.split("&"); 


for (i=0, len=subCookies.length; i < len; i++){ 
parts = SUbCookliegs [li] .Sbl1it("=")3 
resultldecodeURIComponent (parts[0])] = 
decodeURIComponent (parts[1]); 
} 
return result; 


} 


return null; 


}, 


// 省 略 了 更 多 代码 
}3 


SubCookie Util.js 
获取 子 cookie 的 方法 有 两 个 : get () 和 getaAl1l () 。 其 中 get () 获取 单个 子 cookie 的 值 , getA1ll () 


获取 所 有 子 cookie 并 将 它们 放 入 一 个 对 象 中 返回 ， 对 象 的 属性 为 子 cookie 的 名 称 ， 对 应 值 为 子 cookie 
对 应 的 值 。get () 方 法 接收 两 个 参数 : cookie 的 名 字 和 子 cookie 的 名 字 。 它 其 实 就 是 调用 getaAl1l1() 获 
取 所 有 的 子 cookie， 然 后 只 返回 所 需 的 那 一 个 〈 如果 cookie 不 存在 则 返回 nu11 )。 











SubCookieUtil.getAll() 方 法 和 cookieUtil.get() 在 解析 cookie 值 的 方式 上 非常 相似 。 区 别 





在 于 cookie 的 值 并 非 立即 解码 ,而 是 先 根据 & 字 符 将 子 cookie 分 割 出 来 放 在 一 个 数组 中 ,每 一 个 子 cookie 
再 根据 等 于 号 分 制 ， 这 样 在 parts 数组 中 的 前 一 部 分 便 是 子 cookie 名 ， 后 一 部 分 则 是 子 cookie 的 值 。 
这 两 个 项 目 都 要 使 用 decodeURIComponent () 来 解码 ， 然 后 放 和 人 result 对 象 中 ， 最 后 作为 方法 的 返 
回 值 。 如 果 cookie 不 存在 ， 则 返回 nul1。 























可 以 像 下 面 这 样 使 用 上 述 方法 : 

// 假 设 document .cookie=data=name=Nicholas&book=Professional%20JavaScript 
// 取 得 全 部 子 cookie 

var data = SubCookieUtil.getAll ("data"); 

alert(data.name); //"Nicholas" 

alert (data.book); //"Professional JavaScript" 

// 逐 个 获取 子 cookie 


alert (SubCookieUtil.get("dqata"， "name")); //"Nicholas" 
alert (SubCookieUtil.get("data", "book")); //"Professional JavaScript" 


SubCookiesExample01.htm 
要 设置 子 cookie， 也 有 两 种 方法 : set () 和 setA11()。 以 下 代码 展示 了 它们 的 构造 。 


Var SubCookieUtil = { 


set: function (name, subName, value, expires, path, domain, secure) { 
var subcookies = this.getAll(name) || {}; 
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Subcookies [subName] = value; 
this.setAll(name, subcookies, expires, path, domain, secure); 
}, 


setAll: function(name, subcookies, expires, path, domain, secure)t{ 


Var cookieText = encodeURIComponent (name) + "=", 
subcookieParts = new Array(), 
subName; 


for (subName in subcookies){ 
if (subName.length > 0 && subcookies.hasOwnProperty (subName))t{ 
subcookieParts.push(encodeURIComponent (subName) + "=" + 
encodeURIComponent (subcookies[subName] )); 


} 


if (cookieParts.length > 0){ 
CookieText += subcookieParts.join("&"); 


if (expires instanceof Date) { 
CookieText += "; expires=" + expires.toGMTString(); 
} 


if (path) { 
CookieText += "; path=" + path; 


if (domain) { 
CookieText += "; domain=" + domain; 


if (secure) { 
CookieText += "; secure"; 
} 
} else { 
CookieText += "; expires=" + (new Date(0)).toGMTString(); 
} 


document .cookie = cookieText; 


下 





// 省 略 了 更 多 代码 
} 


SubCookieUtil.js 


这 里 的 set () 方 法 接收 7 个 参数 : cookie 名 称 、 子 cookie 名 称 、 子 cookie 值 、 可 选 的 cookie 失效 
日 期 或 时 间 的 Date 对 象 、 可 选 的 cookie 路 径 、 可 选 的 cookie 域 和 可 选 的 布尔 secure 标志 。 所 有 的 可 
选 参数 都 是 作用 于 cookie 本身 而 非 子 cookie。 为 了 在 同一 个 cookie 中 存储 多 个 子 cookie ,路 径 . 域 和 secure 
标志 必须 一 致 ; 针对 整个 cookie 的 失效 日 期 则 可 以 在 任何 一 个 单独 的 子 cookie 写 人 的 时 候 同 时 设置 。 在 
这 个 方法 中 , 第 一 步 是 获取 指定 cookie 名 称 对 应 的 所 有 子 cookie。 逻 辑 或 操作 符 “|” 用 于 当 getA1l1 () 
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返回 null 时 将 subcookies 设置 为 一 个 新 对 象 。 然 后 ， 在 subcookies 对 象 上 设置 好 子 cookie 值 并 传 给 
setAll()。 

而 setA1l1 () 方 法 接收 6 个 参数 : cookie 名 称 、 包 含 所 有 子 cookie 的 对 象 以 及 和 set () 中 一 样 的 4 
个 可 选 参数 。 这 个 方法 使 用 for-in 循环 遍历 第 二 个 参数 中 的 属性 。 为 了 确保 确实 是 要 保存 的 数据 , 使 
用 了 hasownProperty() 方 法 ,来 确保 只 有 实例 属性 被 序列 化 到 子 cookie 中 。 由 于 可 能 会 存在 属性 名 
为 空 字符 串 的 情况 ， 所 以 在 把 属性 名 加 入 结果 对 象 之 前 还 要 检查 一 下 属性 名 的 长 度 。 将 每 个 子 cookie 
的 名 值 对 儿 都 存 人 subcookieParts 数组 中 ， 以 便 稍 后 可 以 使 用 join () 方 法 以 & 号 组 合 起 来 。 剩 下 的 
方法 则 和 coeokieUtil.set() 一 样 。 

可 以 按 如 下 方式 使 用 这 些 方法 。 


CY) // 假 设 document .cookie=data=name=Nicholas&book=Professional%20JavaScript 


















































// 设 置 两 个 cookie 
SubCookieUtil.se 
SubCookieUtil.se 


("data", "name", "Nicholas"); 
("data", "book", "Professional JavaScript"); 


// 设 置 全 部 子 cookie 和 失效 日 期 
SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" }, 
new Date("January 1, 2010")); 


/ /修改 名 字 的 值 ， 并 修改 cookie 的 失效 日 期 
SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010")); 














SubCookiesExample01.htm 





子 cookie 的 最 后 一 组 方法 是 用 于 删除 子 cookie 的 。 普 通 cookie 可 以 通过 将 失效 时 间 设 置 为 过 去 的 
时 间 的 方法 来 删除 , 但 是 子 cookie 不 能 这 样 做 ,为 了 删除 一 个 子 cookie, 首先 必须 获取 包含 在 某 个 cookie 
中 的 所 有 子 cookie， 然 后 仅 删 除 需要 删除 的 那个 子 cookie， 然 后 再 将 余下 的 子 cookie 的 值 保存 为 cookie 
的 值 。 请 看 以 下 代码 。 


Var SubCookieUtil = { 








// 这 里 省 略 了 更 多 代码 


unset : function (name, subName, path, domain, secure)t{ 
Var subcookies = this.getAll (name); 
if (subcookies)t{ 
delete subcookies[subName]; 
this.setAll(name, subcookies, null, path, domain, secure); 


Fs 
unsetAll: function(name, path, domain, secure)t{ 


this.setAll(name, null, new Date(0), path, domain, secure); 
} 


SubCookie Util.js 


这 里 定义 的 两 个 方法 用 于 两 种 不 同 的 目的 。unset () 方 法 用 于 删除 某 个 cookie 中 的 单个 子 cookie 
而 不 影响 其 他 的 ;而 unsetA1l1l () 方 法 则 等 同 于 cookieUtil.unset() ,用 于 删除 整个 cookie- 和 set () 
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及 setaAll () 一 样 ， 路 径 、 域 和 secure 标志 必须 和 之 前 创建 的 cookie 包含 的 内 容 一 致 。 这 两 个 方法 可 
以 像 下 面 这 样 使 用 。 
// 仅 删除 名 为 name 的 子 cookie 


SubCookieUtil.unset ("data", "name"); 


// 删 除 整 个 cookie 
SubCookieUtil.unsetAll ("data"); 


如 果 你 担心 开发 中 可 能 会 达到 单 域名 的 cookie 上 限 , 那 么 子 cookie 可 是 一 个 非常 有 吸引 力 的 备 选 方 
不 过 ， 你 需要 更 加 密切 关注 cookie 的 长 度 ， 以 防 超过 单个 cookie 的 长 度 限制 。 
5. 关于 cookie 的 思 

还 有 一 类 cookie 被 称 为 “HTTP 专 有 cookie”。HTTP 专 有 cookie 可 以 从 浏览 器 或 者 服务 器 设置 , 但 
是 只 能 从 服务 器 端 读 取 ， 因 为 JavaScript 无 法 获取 HTTP 专 有 cookie 的 值 。 

由 于 所 有 的 cookie 都 会 由 浏览 器 作为 请 求 头 发 送 ,所 以 在 cookie 中 存储 大 量 信息 会 影响 到 特定 域 的 
请 求 性 能 。cookie 信息 越 大 , 完成 对 服务 器 请 求 的 时 间 也 就 越 长 。 尽管 浏览 器 对 cookie 进行 了 大 小 限制 ， 
不 过 最 好 还 是 尽 可 能 在 cookie 中 少 存储 信息 ， 以 避免 影响 性 能 。 

cookie 的 性 质 和 它 的 局 限 使 得 其 并 不 能 作为 存储 大 量 信息 的 理想 手段 ， 所 以 又 出 现 了 其 他 方法 。 











六 




































一 定 不 要 在 cookie 中 存储 重要 和 敏感 的 数据 。cookie 数据 并 非 存 储 在 一 个 安全 环 
境 中 , 其 中 包含 的 任何 数据 都 可 以 被 他 人 访问 。 所 以 不 要 在 cookie 中 存储 诸如 信用 卡 
号 或 者 个 人 地 址 之 类 的 数据 。 









23.3.2 ”IE 用户 数 据 


在 IE5.0 中 ,微软 通过 一 个 自 定义 行为 引入 了 持久 化 用 户 数据 的 概念 。 用 户 数 据 允 许 每 个 文档 最 多 
128KB 数据 ， 每 个 域名 最 多 1MB 数据 。 要 使 用 持久 化 用 户 数 据 ， 首 先 必须 如 下 所 示 ， 使 用 CSS 在 某 个 
元 素 上 指定 userData 行为 : 





<div style="behavior:url(#default#userData)" id="dataStore"></div> 


一 旦 该 元 素 使 用 了 userData 行为 ,那么 就 可 以 使 用 setattribute() 方 法 在 上 面 保存 数据 了 。 
为 了 将 数据 提交 到 浏览 器 缓存 中 ， 还 必须 调用 save ( ) 方 法 并 告诉 它 要 保存 到 的 数据 空间 的 名 字 。 数 据 
空间 名 字 可 以 完全 任意 ， 仅 用 于 区 分 不 同 的 数据 集 。 请 看 以 下 例子 。 

Var dataStore = Qocument .getElementBylId("dataSstore"); 

dataSstore.setAttribute("name", "Nicholas"); 


dataStore.setAttribute("book", "Professional JavaScript"); 
dataStore.save ("BookIinfo"); 

















UserDataExample01.htm 


在 这 段 代码 中 ，<qiv> 元 素 上 存 人 了 两 部 分 信息 。 在 用 setAttribute() 存 储 了 数据 之 后 , 调用 了 
save() 方 法 ,指定 了 数据 空间 的 名 称 为 BookInfo。 下 一 次 页 面 载 和 之后， 可 以 使 用 10ad() 方 法 指定 
同样 的 数据 空间 名 称 来 获取 数据 ， 如 下 所 示 。 


dataStore.load("BookIinfo"); 
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alert (dataStore.getAttribute("name")); //"Nicholas" 
alert (dataStore.getAttribute("book")); //"Professional JavaScript" 


UserDataExample01.htm 


对 10ad () 的 调用 获取 了 BookInfo 数据 空间 中 的 所 有 信息 ， 并 且 使 数据 可 以 通过 元 素 访问 ; 只 
到 载 入 确切 完成 之 后 数据 方 能 使 用 。 如 果 getaAttribute() 调 用 了 不 存在 的 名 称 或 者 是 尚未 载 人 的 名 
程 ， 则 返回 nu11。 

你 可 以 通过 removeAttribute() 方 法 明确 指定 要 删除 某 元 素数 据 , 只 要 指定 属性 名 称 。 删 除 之 后 ， 
必须 像 下 面 这 样 再 次 调用 save () 来 提交 更 改 。 

dataStore.removeAttribute("name"); 


dataStore.removeAttribute("book"); 
dataStore.save ("BookIinfo"); 
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这 段 代 码 删除 了 两 个 数据 属性 ， 然 后 将 更 改 保存 到 缓存 中 。 
对 下 用户 数据 的 访问 限制 和 对 cookie 的 限制 类 似 。 要 访问 某 个 数据 空间 ， 脚 本 运行 的 页 面 必 须 来 
自 同一 个 域名 , 在 同一 个 路 径 下 ,并 使 用 与 进行 存储 的 脚本 同样 的 协议 。 和 cookie 不 同 的 是 , 你 无 法 将 
用 户 数据 访问 限制 扩展 到 更 多 的 客户 。 还 有 一 点 不 同 , 用 户 数据 默认 是 可 以 跨越 会 话 持 久 存 在 的 ， 同 时 
也 不 会 过 期 ; 数据 需要 通过 removeAttribute() 方 法 专门 进行 删除 以 释放 空间 。 























和 cookie 一 样 ，IE 用 户 数据 并 非 安全 的 ， 所 以 不 能 存放 





23.3.3 Web 存储 机 制 


Web Storage 最 早 是 在 Web 超 文本 应 用 技术 工作 组 (WHATWG ) 的 Web 应 用 1.0 规范 中 描述 的 。 
这 个 规范 的 最 初 的 工作 最 终 成 为 了 HTML5 的 一 部 分 。Web Storage 的 目的 是 克服 由 cookie 带 来 的 一 些 限 
制 ， 当 数据 需要 被 严格 控制 在 客户 端 上 时 ， 无 须 持 续 地 将 数据 发 回 服务 器 。Web Storage 的 两 个 主要 目 
标 是 : 
口 提供 一 种 在 cookie 之 外 存储 会 话 数据 的 途径 ; 
口 提供 一 种 存储 大 量 可 以 跨 会 话 存 在 的 数据 的 机 制 。 

最 初 的 Web Storage 规范 包含 了 两 种 对 象 的 定义 : sessionStorage 和 globalStorage。 这 两 个 
对 象 在 支持 的 浏览 器 中 都 是 以 windows 对 象 属性 的 形式 存在 的 ， 支 持 这 两 个 属性 的 浏览 器 包括 IE8+、 
Firefox 3.5+、Chrome 4+ 和 Opera 10.5+。 





















































Firefox 2 和 3 基于 早期 规范 的 内 容 部 分 实现 了 Web Storage， 当 时 只 实现 了 


globalStorage， 没 有 实现 localStorage。 





1. Storage 类 型 

Storage 类 型 提供 最 大 的 存储 空间 ( 因 浏 览 器 而 蜡 ) 来 存储 名 值 对 儿 。storage 的 实例 与 其 他 对 
象 类 似 ， 有 如 下 方法 。 

口 clear() : 删除 所 有 值 ; Firefox 中 没有 实现 。 
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口 getItem(name) : 根据 指定 的 名 字 name 获取 对 应 的 值 。 
口 key (index) : 获得 index 位 置 处 的 值 的 名 字 。 
口 removeItem(name) : 删除 由 name 指定 的 名 值 对 儿 。 
口 setItem(name，value) : 为 指定 的 name 设置 一 个 对 应 的 值 。 
其 中 ,getItem() 、removeItem() 和 setItem() 方 法 可 以 直接 调用 ， 也 可 通过 storage 对 象 间 
接 调 用 。 因 为 每 个 项 目 都 是 作为 属性 存储 在 该 对 象 上 的 , 所 以 可 以 通过 点 语法 或 者 方 括号 语法 访问 属性 
来 读 取 值 ， 设 置 也 一 样 ， 或 者 通过 aelete 操作 符 进行 删除 。 不 过 ,我 们 还 建议 读者 使 用 方法 而 不 是 属 
性 来 访问 数据 ， 以 免 某 个 键 会 意外 重 写 该 对 象 上 已 经 存在 的 成 员 。 

还 可 以 使 用 length 属性 来 判断 有 多 少 名 值 对 儿 存 放 在 Storage 对象 中 。 但 无 法 判断 对 象 中 所 有 
数据 的 大 小 , 不 过 IE8 提供 了 一 个 remainingspace 属性 ， 用 于 获取 还 可 以 使 用 的 存储 空间 的 字 节 数 。 



























































Storage 类 型 只 能 存储 字符 串 。 非 字符 串 的 数据 在 存储 之 前 会 被 转换 成 字符 串 。 





2. sessionStorage 对 象 

sessionStorage 对 象 存储 特定 于 某 个 会 话 的 数据 , 也 就 是 该 数据 只 保持 到 浏览 器 关闭 。 这 个 对 象 
就 像 会 话 cookie， 也 会 在 浏览 右 关 闭 后 消失 。 存 储 在 sessionstorage 中 的 数据 可 以 跨越 页 面 刷新 而 
存在 ， 同 时 如 果 浏 览 器 支持 ,浏览 器 骨 演 并 重启 之 后 依然 可 用 (Firefox 和 WebKit 都 支持 ，IE 则 不 行 )。 
因为 seesionStorage 对 象 绑 定 于 某 个 服务 器 会 话 , 所 以 当 文件 在 本 地 运行 的 时 候 是 不 可 用 的 。 存 
储 在 sessionStorage 中 的 数据 只 能 由 最 初 给 对 象 存储 数据 的 页 面 访 问 到 ， 所 以 对 多 页 面 应 用 有 限制 。 
1 于 sessionStorage 对 象 其 实 是 Storage 的 一 个 实例 ， 所 以 可 以 使 用 setItem() 或 者 直接 设 
置 新 的 属性 来 存储 数据 。 下 面 是 这 两 种 方法 的 例子 。 

// 使 用 方法 存储 数据 


sessionStorage.setItem("name", "Nicholas"); 





































































































/ /使 用 属性 存储 数据 


sessionStorage.book = "Professional JavaScript"; 
SessionStorageExample01.htm 


不 同 浏览 器 写 人 数据 方面 略 有 不 同 。Firefox 和 WebKit 实现 了 同步 写 人 ， 所 以 添加 到 存储 空间 中 的 
数据 是 立刻 被 提交 的 。 而 正 的 实现 则 是 异步 写 人 数据 ， 所 以 在 设置 数据 和 将 数据 实际 写 和 人 磁盘 之 间 可 
能 有 一 些 延 迟 。 对 于 少量 数据 而 言 ， 这 个 差异 是 可 以 忽略 的 。 对 于 大 量 数据 ， 你 会 发 现 下 要 比 其 他 浏 
览 器 更 快 地 恢复 执行 ， 因 为 它 会 跳 过 实际 的 磁盘 写 和 过程。 

在 IE8 中 可 以 强制 把 数据 写 人 磁盘 : 在 设置 新 数据 之 前 使 用 begin () 方 法 , 并 且 在 所 有 设置 完成 之 
后 调用 commit () 方 法 。 看 以 下 例子 。 


// 只 适用 于 IE8 
sessionStorage.begin(); 
sessionStorage.name = "Nicholas"; 
sessionStorage.book = "Professional JavaScript"; 
sessionStorage.commit (); 


这 段 代码 确保 了 name 和 book 的 值 在 调用 commit () 之 后 立刻 被 写 和 磁盘。 调用 begin() 是 为 了 
保 在 这 段 代码 执行 的 时 候 不 会 发 生 其 他 磁盘 写 和 操作。 对 于 少量 数据 而 言 ， 这 个 过 程 不 是 必需 的 ; 不 
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过 ， 对 于 大 量 数据 (如 文档 之 类 的 ) 可 能 就 要 考虑 这 种 事务 形式 的 方法 了。 
sessionStorage 中 有 数据 时 ， 可 以 使 用 getItem() 或 者 通过 直接 访问 属性 名 来 获取 数据 。 两 种 
方法 的 例子 如 下 。 


// 使 用 方法 读 取 数据 


Var name = sessionStorage.getIitem('"name"); 








// 使 用 属性 读 取 数据 


Var book = sessionStorage.book; 


SessionStorageExample01.htm 





还 可 以 通过 结合 length 属性 和 key () 方 法 来 迭代 sessionstorage 中 的 值 ， 如 下 所 示 。 


for (var i=0, len = sessionStorage.length; i < len; i++){ 
Var key = sessionStorage.key (i); 
var value = sessionStorage.getIitem(key); 
alert (key + "=" + value); 


SessionStorageExample01.htm 


它 是 这 样 遍历 sessionstorage 中 的 名 值 对 儿 的 : 首先 通过 key () 方 法 获取 指定 位 置 上 的 名 字 ， 
然后 再 通过 getItem() 找 出 对 应 该 名 字 的 值 。 
还 可 以 使 用 for-in 循环 来 迭代 sessionStorage 中 的 值 : 
for (var key in sessionStorage)t 
var value = sessionStorage.getItem(key); 


alert (key + "=" + value); 


} 
每 次 经 过 循环 的 时 候 ，key 被 设置 为 sessionStorage 中 下 一 个 名 字 ， 此 时 不 会 返回 任何 内 置 方 
法 或 length 属性 。 

要 从 sessionstorage 中 删除 数据 ， 可 以 使 用 aelete 操作 符 删 除 对 象 属性 ， 也 可 调用 
removeItem() 方 法 。 以 下 是 这 些 方 法 的 例子 。 

// 使 用 delete 删除 一 个 值 一 在 WebKit 中 无 效 


delete sessionStorage.name; 




















// 使 用 方法 删除 一 个 值 


sessionStorage.removeItem("book"); 
SessionStorageExample01.htm 


在 撰写 本 书 时 ， delete 操作 符 在 WebKit 中 无 法 删除 数据 ，removeItem() 则 可 以 在 各 种 支持 的 浏 
览 器 中 正确 运行 。 

sessionStorage 对 象 应 该 主要 用 于 仅 针 对 会 话 的 小 段 数 据 的 存储 。 如 果 需 要 跨越 会 话 存储 数据 ， 
那么 globalStorage 或 者 localStorage 更 为 合适 。 

3. globalStorage 对 象 

Firefox 2 中 实现 了 globalstorage 对 象 。 作 为 最 初 的 Web Storage 规范 的 一 部 分 ， 这 个 对 象 的 目 
的 是 跨越 会 话 存储 数据 ， 但 有 特定 的 访问 限制 。 要 使 用 globalstorage， 首 先 要 指定 哪些 域 可 以 访问 
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该 数据 。 可 以 通过 方 括号 标记 使 用 属性 来 实现 ， 如 以 下 例子 所 示 。 





三 


el 


/ /保存 数据 
“9 globalStorage["wrox.com"] .name = "Nicholas"; 
// 获 取 数 据 


Var name = globalStorage["wrox.com"] .name; 


GlobalStorageExample01.htm 


在 这 里 ,访问 的 是 针对 域名 wrox .com 的 存储 空间 。globalStorage 对 象 不 是 Storage 的 实例 ， 
而 具体 的 globalstorage["wrox.com"] 才 是 。 这 个 存储 空间 对 于 wrox.com 及 其 所 有 子 域 都 是 可 以 
访问 的 。 可 以 像 下 面 这 样 指定 子 域名 。 

/ /保存 数据 


globalStorage["www.wrox.com"] .name = "Nicholas"; 








// 获 取 数 据 


Var name = globalStorage["www.wrox.com"] .name; 


GlobalStorageExample01.htm 
这 里 所 指定 的 存储 空间 只 能 由 来 自 www.wrox.com 的 页 面 访问 ， 其 他 子 域名 都 不 行 。 
某 些 浏览 絮 人 允许 更 加 宽泛 的 访问 限制 ， 比 如 只 根据 顶级 域名 进行 限制 或 者 允许 全 局 访问 ， 如 下 面 例 
子 所 示 。 
// 存 储 数据 ， 任 何人 都 可 以 访问 一 不 要 这 样 做 ! 


globalStorage[""] .name = "Nicholas"; 




















/ /存储 数据 ， 可 以 让 任何 以 .net 结尾 的 域名 访问 一 不 要 这 样 做 | 
globalStorage["net"] .name = "Nicholas"; 
虽然 这 些 也 支持 ,但 是 还 是 要 避免 使 用 这 种 可 宽泛 访问 的 数据 存储 ， 以 防止 出 现 潜 在 的 安全 问题 。 
考虑 到 安全 问题 , 这些 功能 在 未 来 可 能 会 被 删除 或 者 是 被 更 严格 地 限制 ， 所 以 不 应 依赖 于 这 类 功能 。 当 
使 用 globalstorage 的 时 候 一 定 要 指定 一 个 域名 。 

对 globalStorage 空间 的 访问 ， 是 依据 发 起 请 求 的 页 面 的 域名 、 协 议和 端口 来 限制 的 。 例 如 ， 如 
果 使 用 HTTPS 协议 在 wrox.com 中 存储 了 数据 ,那么 通过 HTTP 访问 的 wzrox.conm 的 页 面 就 不 能 访问 
该 数据 。 同 样 ， 通过 80 端口 访问 的 页 面 则 无 法 与 同一 个 域 同样 协议 但 通过 8080 端口 访问 的 页 面 共享 数 
据 。 这 类 似 于 Ajax 请 求 的 同 源 策略 。 

globalStorage 的 每 个 属性 都 是 storage 的 实例 。 因 此 ， 可 以 像 如 下 代码 中 这 样 使 用 。 


globalStorage["www.wrox.com"] .name 
C9 globalStorage["www.wrox.com"] .book 
































"Nicholas"; 
"Professional JavaScript"; 


globalStorage["www.wrox.com"] .removeItem("name"); 


Var book = globalStorage["www.wrox.com"] .getItem("book"); 


GlobalStorageExample01.htm 
如 果 你 事先 不 能 确定 域名 ， 那 么 使 用 1ocation.host 作为 属性 名 比较 安全 。 例 如 : 
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globalStorage[location.host] .name = "Nicholas" 
var book = globalStorage[location.host] .getItem("book") ; 


GlobalStorageExample01.htm 


如 果 不 使 用 removeItem() 或 者 delete 删除 ,或 者 用 户 未 清除 浏览 器 缓存 ， 存 储 在 
globalStorage 属性 中 的 数据 会 一 直 保 留 在 磁盘 上 。 这 让 globalstorage 非常 适合 在 客户 端 存储 文 
档 或 者 长 期 保存 用 户 偏好 设置 。 

4. localStorage 对 象 

localStorage 对 象 在 修订 过 的 HTML 5 规范 中 作为 持久 保存 客户 端 数 据 的 方案 取代 了 
globalStorage。 与 globalStorage 不 同 ,不 能 给 1ocalstorage 指定 任何 访问 规则 ; 规则 事先 就 
设 定好 了 。 要 访问 同一 个 localstorage 对 象 ， 页 面 必 须 来 自 同一 个 域名 ( 子 域 名 无 效 )， 使 用 同一 种 
协议 ， 在 同一 个 端口 上 。 这 相当 于 globalstorage[location.host]。 

由 于 localstorage 是 Storage 的 实例 ， 所 以 可 以 像 使 用 sessionstorage 一 样 来 使 用 它 。 下 
面 是 一 些 例子 。 

/ /使 用 方法 存储 数据 


localStorage.setItem("name", "Nicholas"); 





























// 使 用 属性 存储 数据 


localStorage.book = "Professional JavaScript"; 


// 使 用 方法 读 取 数据 


Var name = localStorage.getIitem("name"); 





// 使 用 属性 读 取 数据 


Var book = localStorage.book; 
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存储 在 localstorage 中 的 数据 和 存储 在 globalstorage 中 的 数据 一 样 ， 都 遵循 相同 的 规则 ; 
数据 保留 到 通过 Javascript 删除 或 者 是 用 户 清除 浏览 器 缓存 。 
为 了 兼容 只 支持 globalSstorage 的 浏览 器 ， 可 以 使 用 以 下 函数 。 


function getLocalStorage (){ 





CY) if (typeof localStorage == "object")t{ 
return localStorage; 
} else if (typeof globalStorage == "object")f{ 
return globalStorage[location.hostl]; 
} else { 


throw new Error("Local storage not available."); 


} 


GlobalAndLocalStorageExample01.htm 
然后 ,， 像 下 面 这 样 调用 一 次 这 个 函数 ， 就 可 以 正常 地 读 写 数据 了 。 


Var storage = getLocalStorage(); 





GlobalAndLocalStorageExample01.htm 
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在 确定 了 使 用 哪个 storage 对 象 之 后 , 就 能 在 所 有 支持 Web Storage 的 浏览 器 中 使 用 相同 的 存 取 规 
则 操作 数据 了 。 

5. storage 事件 

对 Storage 对 象 进行 任何 修改 ， 都 会 在 文档 上 触发 storage 事件 。 当 通过 属性 或 setItem() 方 
法 保存 数据 , 使 用 delete 操作 符 或 removeItem() 删 除数 据 , 或 者 调用 clear () 方 法 时 , 都 会 发 生 该 
事件 。 这 个 事件 的 event 对 象 有 以 下 属性 。 
口 domain: 发 生变 化 的 存储 空间 的 域名 。 
口 key: 设置 或 者 删除 的 键 名 。 
D newValue: 如 果 是 设置 值 ， 则 是 新 值 ; 如 果 是 删除 键 ， 则 是 nu11。 
口 oldqvalue: 键 被 更 改 之 前 的 值 。 

在 这 四 个 属性 中 ，IE8 和 Firefox 只 实现 了 aomain 属性 。 在 撰写 本 书 的 时 候 ，WebKit 尚 不 支持 
storage 事件 : 

以 下 代码 展示 了 如 何 侦 听 storage 事件 : 


EventUtil.addHandler (document, "storage", function(event)t 
alert("Storage changed for " + event.domain); 


BF) 3 
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无 论 对 sessionStorage、globalStorage 还 是 localStorage 进行 操作 ， 都 会 触发 storage 
事件 ， 但 不 作 区 分 。 

6. 限制 

与 其 他 客户 端 数据 存储 方案 类 似 ，Web Storage 同样 也 有 限制 。 这 些 限制 因 浏 览 器 而 异 。 一 般 来 说 ， 
对 存储 空间 大 小 的 限制 都 是 以 每 个 来 源 (协议 、 域 和 端口 ) 为 单位 的 。 换 句 话 说 ， 每 个 来 源 都 有 固定 大 
小 的 空间 用 于 保存 自己 的 数据 。 考 虑 到 这 个 限制 , 就 要 注意 分 析 和 控制 每 个 来 源 中 有 多 少 页 面 需 要 保存 

对 于 localStorage 而 言 , 大 多 数 桌 面 浏览 器 会 设置 每 个 来 源 5MB 的 限制 。 Chrome 和 Safari 对 每 
个 来 源 的 限制 是 2.5MB。 而 iOS 版 Safari 和 Android 版 WebKit 的 限制 也 是 2.5SMB。 

对 sessionStorage 的 限制 也 是 因 浏览 器 而 异 -* 有 的 浏览 器 对 sessionStorage 的 大 小 没有 限制 ， 
但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都 有 限制 ， 也 都 是 2.5MB。IE8+ 和 Opera 对 
sessionStorage 的 限制 是 5MB。 

有 关 Web Storage 的 限制 ， 请 参考 http://dev-test.nemikor.com/web-storage/support-test/。 


23.3.4 IndexedDB 


Indexed Database API， 或 者 简称 为 IndexedDB ， 是 在 浏览 器 中 保存 结构 化 数据 的 一 种 数据 库 。 
IndexedDB 是 为 了 替代 目前 已 被 废弃 的 Web SQL Database API ( 因为 已 废弃 ， 所 以 本 书 未 介绍 ) 而 出 现 
的 。IndexedDB 的 思想 是 创建 一 套 API， 方 便 保存 和 读 取 JavaScript 对 象 ， 同 时 还 支持 查询 及 搜索 。 

IndexedDB 设计 的 操作 完全 是 异步 进行 的 。 因 此 ， 大 多 数 操作 会 以 请 求 方式 进行 ， 但 这 些 操作 会 在 
后 期 执行 ,然后 如 果 成 功 则 返回 结果 ， 如 果 失 败 则 返回 错误 。 差 不 多 每 一 次 IndexedDB 操作 ， 都 需要 你 
注册 onerror 或 onsuccess 事件 处 理 程序 ， 以 确保 适当 地 处 理 结果 。 

在 得 到 完整 支持 的 情况 下 ，IndexegDB 将 是 一 个 作为 API 宿主 的 全 局 对 象 。 由 于 API 仍然 可 能 
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变化 ， 浏 览 器 也 都 使 用 提供 商 前 级 ， 因 此 这 个 对 象 在 IE10 中 叫 msIndqexeaDB， 在 Firefox 4 中 叫 
mozIndexedDB, 在 Chrome 中 叫 wepkitIndexedDB。 为 了 清楚 起 见 ， 本 节 示 例 中 将 使 用 IndexedDB， 
而 实际 上 每 个 示例 前 面 都 应 该 加 上 下 面 这 行 代码 : 


var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || 
window.webkitIndexedDB; 
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1. 数据 库 

IndexedDB 就 是 一 个 数据 库 , 与 MySQL 或 Web SQL Database 等 这 些 你 以 前 可 能 用 过 的 数据 库 类 似 。 
IndexedDB 最 大 的 特色 是 使 用 对 象 保存 数据 ， 而 不 是 使 用 表 来 保存 数据 。 一 个 mdexedDB 数据 库 ， 就 是 
一 组 位 于 相同 命名 空间 下 的 对 象 的 集合 。 

使 用 IndexedDB 的 第 一 步 是 打开 它 ， 即 把 要 打开 的 数据 库 名 传 给 indexDB .open ()。 如 果 传 人 的 
数据 库 已 经 存在 ， 就 会 发 送 一 个 打开 它 的 请 求 ; 如 果 传 人 的 数据 库 还 不 存在 ， 就 会 发 送 一 个 创建 并 打开 
它 的 请 求 ,总 之 ,调用 indexDB .open () 会 返回 一 个 IDBRequest 对 象 , 在 这 个 对 象 上 可 以 添加 onerror 
和 onsuccess 事件 处 理 程序 。 先 来 看 一 个 例子 。 


Var request, database; 









































request = indexedDB.open ("admin"); 
request.onerror = function(event)t{ 
alert ("Something bad happened while trying to open: "+ 
event .target .errorCode); 
3} 
request.onsuccess = functionl(event)t{ 
database = event.target.result; 


2 
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在 这 两 个 事件 处 理 程序 中 ，event .target 都 指向 request 对 象 , 因此 它们 可 以 互 换 使 用 。 如 果 响 

应 的 是 onsuccess 事件 处 理 程序 ,那么 event .target .result 中 将 有 一 个 数据 库 实例 对 象 ( IDBData- 
base )， 这 个 对 象 会 保存 在 database 变量 中 。 如 果 发 生 了 错误 ， 那 event .target .errorCode 中 将 
保存 一 个 错误 码 ， 表 示 问 题 的 性 质 。 以 下 就 是 可 能 的 错误 码 ( 这 个 错误 码 适 合 所 有 操作 )。 
口 IDBDatabaseException.UNKNOWN_ERR(1): 意外 错误 ， 无 法 归 类 。 
DatabaseException.NON_TRANSIENT_ERR(2): 操作 不 合法 。 
DatabaseException.NOT_FOUND_ERR(3): 未 发 现 要 操作 的 数据 库 。 
BDatabaseException.CONSTRAINT_ERR(4): 违反 了 数据 库 约束 。 
DatabaseException .DATA_ERR(5): 提供 给 事务 的 数据 不 能 满足 要 求 。 
DatabaseException.NOT_ALLOWED_ERR(6): 操作 不 合法 。 
TRANSACTION_INACTIVE_ERR(7): 试图 重用 已 完成 的 事务 。 
DatabaseException.ABORT_ERR(8): 请 求 中 断 ， 未 成 功 。 
DatabaseException.READ_ONLY_ERR(9): 试图 在 只 读 模 式 下 写 人 或 修改 数据 。 
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DatabaseException. 

















IMEOUT_ERR(10): 在 有 效 时 间 内 未 完成 操作 。 
UOTA_ERR(11): 磁盘 空间 不 足 。 


DatabaseException. 
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DOOOOOOODO DO 


四 四 四 四 多 了 器 








DatabaseException. 
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默认 情况 下 ，IndexedDB 数据 库 是 没有 版 本 号 的 ， 最 好 一 开始 就 为 数据 库 指 定 一 个 版 本 号 。 为 此 ， 
可 以 调用 setversion1() 方 法 ,传人 以 字符 串 形 式 表示 的 版 本 号 。 同 样 ,调用 这 个 方法 也 会 返回 一 个 请 
求 对 象 ， 需 要 你 再 指定 事件 处 理 程序 。 








if (database.version != "1.0"){ 


CY request = database.setVersion("1.0"); 
request.onerror = function(event)t{ 
alert ("Something bad happened while trying to set version: " + 


event.target .errorCode); 


于 





request.onsuccess = function(event)t{ 
alert ("Database initialization complete. Database name: " + database.name + 
", Version: " + database.version); 
} 
} else { 
alert ("Database already initialized. Database name: " + database.name + 
", Version: " + database.version); 
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这 个 例子 尝试 把 数据 库 的 版 本 号 设置 为 1.0。 第 一 行 先 检测 version 属性 , 看 是 否 已 经 为 数据 库 设 
置 了 相应 的 版 本 号 。 如 果 没 有 ， 就 调用 setversion () 创建 修改 版 本 的 请 求 。 如 果 请 求 成 功 ， 显 示 一 条 
消息 ， 表 示 版 本 修改 成 功 。( 在 真实 的 项 目 开 发 中 ， 你 应 该 在 这 里 建立 对 象 存储 空间 。 详 细 内 容 请 看 下 
= 

如 果 数 据 库 的 版 本 号 已 经 被 设置 为 1.0， 则 显示 一 条 消息 ， 说 明 数据 库 已 经 初始 化 过 了 。 总 之 ， 通 
过 这 种 模式 ， 就 能 知道 你 想 使 用 的 数据 库 是 否 已 经 设置 了 适当 的 对 象 存储 空间 。 在 整个 Web 应 用 中 ， 
随 着 对 数据 库 结 构 的 更 新 和 修改 ， 可 能 会 产生 很 多 个 不 同 版 本 的 数据 库 。 

2. 对 象 存 储 空间 

在 建立 了 与 数据 库 的 连接 之 后 ， 下 一 步 就 是 使 用 对 象 存储 空间 ”。 如 果 数 据 库 的 版 本 与 你 传人 的 版 
本 不 匹配 , 那 可 能 就 需要 创建 一 个 新 的 对 象 存储 空间 。 在 创建 对 象 存储 空间 之 前 ， 必 须要 想 清 楚 你 想 要 
保存 什么 数据 类 型 。 

假设 你 要 保存 的 用 户 记录 由 用 户 名 、 密 码 等 组 成 ， 那 么 保存 一 条 记录 的 对 象 应 该 类 似 如 下 所 示 : 

Var user = { 

username: "007", 
firstName: "James", 


lastName: "Bond", 
password: "foo" 


















































} 


有 了 这 个 对 象 , 很 容易 想到 username 属性 可 以 作为 这 个 对 象 存储 空间 的 键 。 这 个 username 必须 
全 局 唯一 , 而 且 大 多 数 时 候 都 要 通过 这 个 键 来 访问 数据 。 这 一 点 非常 重要 , 因为 在 创建 对 象 存储 空间 时 ， 
必须 指定 这 么 一 个 键 。 以 下 是 就 是 为 保存 上 述 用 户 记 录 而 创建 对 象 存储 空间 的 示例 。 


var store = db.createObjectStore("users", { keyPath: "username" }); 
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GD 有 关系 数据 库 经 验 的 读者 ， 可 以 把 这 里 的 对 象 存储 空间 ( object storge ) 想象 成 表 ， 而 把 其 中 保存 的 对 象 想象 成 表 中 
的 记录 。 
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其 中 第 二 个 参数 中 的 keyPath 属性 ， 就 是 空间 中 将 要 保存 的 对 象 的 一 个 属性 ， 而 这 个 属性 将 作为 
存储 空间 的 键 来 使 用 。 
好 , 现在 有 了 一 个 对 存储 空间 的 引用 。 接 下 来 可 以 使 用 aaa() 或 put () 方 法 来 向 其 中 添加 数据 。 这 
两 个 方法 都 接收 一 个 参数 ， 即 要 保存 的 对 象 ， 然后 这 个 对 象 就 会 被 保存 到 存储 空间 中 。 这 两 个 方法 的 区 
别 在 空间 中 已 经 包含 键 值 相同 的 对 象 时 会 体现 出 来 。 在 这 种 情况 下 ，ada() 会 返回 错误 ,而 put () 则 会 
重 写 原 有 对 象 。 简单 地 说 , 可 以 把 aaa() 想 象 成 插入 新 值 , 把 put () 想象 成 更 新 原 有 的 值 。 在 初始 化 对 


象 存储 空间 时 ， 可 以 使 用 类 似 下 面 这 样 的 代码 。 
































//users 中 保存 着 一 批 用 户 对 象 


CY) var i=0, 


len = users.length; 


while(i < len)f{ 
store.add(users[i++] ); 


} 
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每 次 调用 aqa () 或 put () 都 会 创建 一 个 新 的 针对 这 个 对 象 存储 空间 的 更 新 请 求 。 如 果 想 验证 请 求 是 
否 成 功 完 成 , 可 以 把 返回 的 请 求 对 象 保存 在 一 个 变量 中 , 然后 再 指定 onerror 或 onsuccess 事件 处 理 
程序 。 

//users 中 保存 着 一 批 用 户 对 象 


var i=0, 
request, 
requests = [], 
len = users.length; 























while(i < len)f{ 
request = store.add(users[i++] ); 
request .onerror = function(){ 
/ /处理 错 误 
}; 
request .onsuccess = function(){ 
/ /处理 成 功 
}; 
requests.push(request); 
} 


创建 了 对 象 存储 空间 并 向 其 中 添加 了 数据 之 后 ， 就 该 查询 数据 了 。 

3. 事务 

跨 过 创建 对 象 存储 空间 这 一 步 之 后 , 接 下 来 的 所 有 操作 都 是 通过 事务 来 完成 的 。 在 数据 库 对 象 上 调 
用 transaction() 方 法 可 以 创建 事务 。 任 何 时 候 ， 只 要 想 读 取 或 修改 数据 ， 都 要 通过 事务 来 组 织 所 有 
操作 。 在 最 简单 的 情况 下 ， 可 以 像 下 面 这 样 创建 事务 "。 

Var transaction = db.transaction(); 

如 果 没 有 参数 ,就 只 能 通过 事务 来 读 取 数据 库 中 保存 的 对 象 。 最 常见 的 方式 是 传 入 要 访问 的 一 或 多 
个 对 象 存储 空间 。 




















山中 

















@ 以 下 示例 代码 中 的 ab 即 前 面 示例 代码 中 的 aatabase， 正 文中 提 到 的 “数据 库 对 象 ”也 是 指 它 。 
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Var transaction = db.transaction("users"); 

这 样 就 能 保证 只 加 载 users 存储 空间 中 的 数据 ， 以 便 通 过 事务 进行 访问 。 如 果 要 访问 多 个 对 象 存 
储 空间 ， 也 可 以 在 第 一 个 参数 的 位 置 上 传人 字符 串 数 组 。 

Var transaction = db.transaction(["users", "anotherStore"]); 

如 前 所 述 ， 这 些 事务 都 是 以 只 读 方式 访问 数据 。 要 修改 访问 方式 ， 必须 在 创建 事务 时 传人 第 二 个 参 
数 ， 这 个 参数 表示 访问 模式 ， 用 IDBTransaction 接口 定义 的 如 下 常量 表示 : READ_ONLY (0 ) 表示 只 
读 ，READ_WRITE (1 ) 表示 读 写 ，VERSION_CHANGE ( 2 ) 表示 改变 。IE10+ 和 Firefox 4+ 实 现 的 是 
IDBTransaction, 但 在 Chrome 中 则 叫 webkitIDBTransaction, 所 以 使 用 下 面 的 代码 可 以 统一 接口 : 









































思 var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; 
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有 了 这 行 代 码 ， 就 可 以 更 方便 地 为 transaction () 指 定 第 二 个 参数 了 。 


Var transaction = db.transaction("users", IDBTransaction.READ WRITE); 
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这 个 事务 能 够 读 写 users 存储 空间 。 

取得 了 事务 的 索引 后 ， 使 用 cbjectstore () 方 法 并 传人 存储 空间 的 名 称 ， 就 可 以 访问 特定 的 存储 
空间 。 然 后 ， 可 以 像 以 前 一 样 使 用 aaa() 和 put () 方 法 , 使 用 get () 可 以 取得 值 ,使 用 aelete() 可 以 
删除 对 象 , 而 使 用 clear () 则 可 以 删除 所 有 对 象 get () 和 aelete () 方 法 都 接收 一 个 对 象 键 作为 参数 ， 
而 所 有 这 5 个 方法 都 会 返回 一 个 新 的 请 求 对 象 。 例 如 : 

Var request = db.transaction("users") .objectStore("users") .get("007"); 


C) request.onerror = function(event)t{ 
alert ("Did not get the object!"); 

















}3 

request.onsuccess = function(event)t{ 
Var result = event.target.result; 
alert (result.firstName); //"James" 
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因为 一 个 事务 可 以 完成 任何 多 个 请 求 ， 所 以 事务 对 象 本 身 也 有 事件 处 理 程序 : onerror 和 
oncomplete。 这 两 个 事件 可 以 提供 事务 级 的 状态 信息 。 


transaction.onerror = function(event)t 


/ /整个 事务 都 被 取消 了 














: 


transaction.oncomplete = function(event)t{ 
// 整 个 事务 都 成 功 完成 了 
}3 
注意 , 通过 oncomplete 事件 的 事件 对 象 (event ) 访问 不 到 get () 请 求 返回 的 任何 数据 。 必 须 在 


相应 请 求 的 onsuccess 事件 处 理 程序 中 才能 访问 到 数据 。 
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4. 使 用 游标 查询 

使 用 事务 可 以 直接 通过 已 知 的 键 检 索 单 个 对 象 。 而 在 需要 检索 多 个 对 象 的 情况 下 ,， 则 需要 在 事务 内 
部 创建 游标 。 游 标 就 是 一 指向 结果 集 的 指针 。 与 传统 数据 库 查 询 不 同 ， 游 标 并 不 提前 收集 结果 。 游 标 指 
针 会 先 指向 结果 中 的 第 一 项 ， 在 接 到 查找 下 一 项 的 指令 时 ， 才 会 指向 下 一 项 。 

在 对 象 存储 空间 上 调用 opencursor () 方 法 可 以 创建 游标 。 与 IndexedDB 中 的 其 他 操作 一 样 
openCcursor () 方 法 返回 的 是 一 个 请 求 对 象 , 因此 必须 为 该 对 象 指 定 onsuccess 和 onerror 事件 处 理 
程序 。 例 如 : 









































Var store = db.transaction("users") .objectStore("users"), 
request = store.openCursor(); 


request.onsuccess = functionl(event)t{ 
/ /处理 成 功 
3 


request.onerror = function(event)t{ 
// 处 理 失败 
3 
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在 onsuccess 事件 处 理 程序 执行 时 , 可 以 通过 event .target .result 取得 存储 空间 中 的 下 一 个 
对 象 。 在 结果 集中 有 下 一 项 时 ， 这 个 属性 中 保存 一 个 IDBCursor 的 实例 ， 在 没有 下 一 项 时 ， 这 个 属性 
的 值 为 null。IDBCursor 的 实例 有 以 下 几 个 属性 。 

D airection: 数值 ， 表 示 游 标 移动 的 方向 。 默 认 值 为 IDBcursor .NEXT ( 0 )， 表 示 下 一 项 。 
IDBCursor .NEXT_NO_DUPLICATE (1 ) 表示 下 一 个 不 重复 的 项 ，DBCursor .PREV (2 ) 表示 前 
一 项 ， 而 IDBCursor .PREV_NO_DUPLICATE 表示 前 一 个 不 重复 的 项 。 

口 key: 对 象 的 键 。 
口 value: 实际 的 对 象 。 
口 primaryKey: 游标 使 用 的 键 。 可 能 是 对 象 键 ， 也 可 能 是 索引 键 〈 稍 后 讨论 索引 键 )。 
要 检索 某 一 个 结果 的 信息 ， 可 以 像 下 面 这 样 : 
request.onsuccess = function(event){ 
var cursor = event.target.result; 
if (cursor){ // 必 须要 检查 


console.log("Key: " + Cursor.key + ", Value: "+ 
JSON.stringify(cursor.value)); 




































































} 











请 记 住 ,这 个 例子 中 的 cursor .value 是 一 个 对 象 ,这 也 是 为 什么 在 显示 它 之 前 先 将 它 转 换 成 JSON 
字符 串 的 原因 。 

使 用 游标 可 以 更 新 个 别 的 记录 。 调 用 update() 方 法 可 以 用 指定 的 对 象 更 新 当前 游标 的 value。 与 
其 他 操作 一 样 ， 调 用 update() 方 法 也 会 创建 一 个 新 请 求 ， 因 此 如 果 你 想 知道 结果 ， 就 要 为 它 指定 
onsuccess 和 onerror 事件 处 理 程序 。 



































request.onsuccess = function(event){ 
var cursor = event.target.result, 
value, 
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updateRequest; 


if (cursor){ // 必 须要 检查 


if (cursor.key == "foo"){ 
value = cursor.value; // 取 得 当前 的 值 
value.password = "magic!"; // 更 新 密码 


updateRequest = cursor.update(value) // 请 求 保 存 更 新 
updateRequest .onsuccess = function(){ 


// 处 理 成 功 

}; 

updateReqeust .onerror = function()t{ 
// 处 理 失败 

}; 


}; 
此 时 ， 如 果 调 用 aelete () 方 法 ， 就 会 删除 相应 的 记录 。 与 update () 一 样 ， 调 用 delete() 也 返 


回 一 个 请 求 o 


request.onsuccess = function(event)t{ 
Var cursor = event.target.result, 
value, 
deleteRequest; 





if (cursor){ // 必 须要 检查 


if (cursor.key == "foo"){ 
deleteRequest = cursor.delete(); /1 请求 删除 当前 项 
deleteRequest .onsuccess = function()t{ 
// 处 理 成 功 
}; 
deleteRequest .onerror = function(){ 
// 处 理 失败 
}; 
} 


}; 

如 果 当 前 事务 没有 修改 对 象 存储 空间 的 权限 ，update () 和 aelete () 会 抛 出 错误 。 

默认 情况 下 ， 每 个 游标 只 发 起 一 次 请 求 。 要 想 发 起 另 一 次 请 求 ， 必须 调用 下 面 的 一 个 方法 。 

口 continue (key) : 移动 到 结果 集中 的 下 一 项 。 参数 key 是 可 选 的 ， 不 指定 这 个 参数 ,游标 移动 
到 下 一 此 定 这 个 参数 ， 游 标 会 移动 到 指定 键 的 位 置 。 


口 aqvance (count) : 向 前 移动 count 指定 的 项 数 。 
这 两 个 方法 都 会 导致 游标 使 ] 相 同 的 请 求 , 因此 相同 的 onsuccess 和 onerror 事件 处 理 程序 也 会 


得 到 重用 。 例 如 ， 下 面 的 例子 遍历 了 对 象 存储 空间 中 的 所 有 项 。 

































































request.onsuccess = function(event)t{ 

Var cursor = event.target.result; 

if (cursor){ // 必 须要 检查 
console.log("Key: " + Cursor.key + ", Value: " + 

JSON.stringify(cursor.value)); 

cursor.continue(); // 移 动 到 下 一 项 

} else { 
console.log("Done!"); 
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} 
}3 
调用 continue () 会 触发 另 一 次 请 求 ， 进 而 再 次 调用 onsuccess 事件 处 理 程序 。 在 没有 更 多 项 可 
以 欠 代 时 ， 将 最 后 一 次 调用 onsuccess 事件 处 理 程 序 ， 此 时 event .target .result 的 值 为 null1。 

5. 键 范围 

使 用 游标 总 让 人 觉得 不 那么 理想 ， 因 为 通过 游标 查找 数据 的 方式 太 有 限 了 。 键 范围 (key range ) 为 
使 用 游标 增添 了 一 些 灵活 性 。 键 范围 由 IDBKeyRange 的 实例 表示 。 文 持 标准 IDBKeyRange 类 型 的 浏 
览 器 有 IE10+ 和 Firefox 4+，Chrome 中 的 名 字 叫 webkitIDBKeyRange。 与 使 用 IndexedDB 中 的 其 他 类 
型 一 样 ， 你 最 好 先 声明 一 个 本 地 的 类 型 ， 同 时 要 考虑 到 不 同 浏览 器 中 的 差异 。 

var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; 

有 四 种 定义 键 范围 的 方式 。 第 一 种 是 使 用 only () 方 法 ,传人 你 想 要 取得 的 对 象 的 键 。 

Var onlyRange = IDBKeyRange.only("007"); 

这 个 范围 可 以 保证 只 取得 键 为 "007" 的 对 象 。 使 用 这 个 范围 创建 的 游标 与 直接 访问 存储 空间 并 调用 
get ("007") 差不多 。 

第 二 种 定义 键 范围 的 方式 是 指定 结果 集 的 下 界 。 下 界 表示 游标 开始 的 位 置 。 例 如 ， 以 下 键 范围 可 以 
保证 游标 从 键 为 "007" 的 对 象 开始 ， 然 后 继续 向 前 移动 ， 直 至 最 后 一 个 对 象 。 

/1 从 键 为 "007" 的 对 象 开始 ， 然 后 可 以 移动 到 最 后 


Var lowerRange = IDBKeyRange.lowerBound("007"); 
如 果 你 想 忽 略 键 为 "007" 的 对 象 ， 从 它 的 下 一 个 对 象 开始 ,那么 可 以 传人 第 二 个 参数 true: 
// 从 键 为 "007" 的 对 象 的 下 一 个 对 象 开 始 ， 然 后 可 以 移动 到 最 后 


Var lowerRange = IDBKeyRange.lowerBound("007", true); 

第 三 种 定义 键 范围 的 方式 是 指定 结果 集 的 上 界 ， 也 就 是 指定 游标 不 能 超越 哪个 键 。 指 定 上 界 使 用 
upperRange() 方 法 。 下 面 这 个 键 范围 可 以 保证 游标 从 头 开 始 ， 到 取得 键 为 "ace" 的 对 象 终止 。 

// 从 头 开始 ， 到 键 为 "ace" 的 对 象 为 目 

Var UpperRange = IDBKeyRange.upperBound("ace"); 

如 果 你 不 想 包含 键 为 指定 值 的 对 象 ， 同 样 ， 传 人 第 二 个 参数 true: 

// 从 头 开始 ， 到 键 为 "ace" 的 对 象 的 上 一 个 对 象 为 止 

Var upperRange = IDBKeyRange.upperBound("ace", true); 

第 四 种 定义 键 范围 的 方式 一 一 没 错 , 就 是 同时 指定 上 、 下 界 , 使 用 bouna () 方 法 。 这 个 方法 可 以 接 
收 4 个 参数 : 表示 下 界 的 键 、 表 示 上 界 的 键 、 可 选 的 表示 是 否 跳 过 下 界 的 布尔 值 和 可 选 的 表示 是 否 跳 过 
上 界 的 布尔 值 。 以 下 是 几 个 例子 。 


// 从 键 为 "007" 的 对 象 开 始 ， 到 键 为 "ace" 的 对 象 为止 
Var boundRange = IDBKeyRange.bound("007", "ace"); 
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// 从 键 为 "007" 的 对 象 的 下 一 个 对 象 开 始 ， 到 键 为 "ace" 的 对 象 为 止 


var boundRange = IDBKeyRange.bound("007", "ace", true); 





// 从 键 为 "007" 的 对 象 的 下 一 个 对 象 开始 ， 到 键 为 "ace" 的 对 象 的 上 一 个 对 象 为 止 


Var boundRange = IDBKeyRange.bound("007", "ace", true, true); 
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// 从 键 为 "007" 的 对 象 开始 ， 到 键 为 "ace" 的 对 象 的 上 一 个 对 象 为 止 

Var boundRange = IDBKeyRange.bound("007", "ace", false, true); 

无 论 如 何 , 在 定义 键 范围 之 后 ,把 它 传 给 opencursor () 方 法 ,就 能 得 到 一 个 符合 相应 约束 条 件 的 
游标 。 

Var store = db.transaction("users") .objectStore("users"), 


range = IDBKeyRange.bound("007", "ace"); 
request = store.openCursor (range); 








request.onsuccess = function(event)t{ 
Var cursor = event.target.result; 
if (cursor){ // 必 须要 检查 
console.log("Key: " + Cursor.key + ", Value: " + 
JSON.stringify(cursor.value)); 
cursor.continue(); // 和 移动 到 下 一 项 
} else { 
console.log("Done!"); 
} 
}3 
这 个 例子 输出 的 对 象 的 键 为 "007" 到 "ace"， 比 上 一 节 最 后 那个 例子 输出 的 值 少 一 些 。 
6. 设 定 游标 方向 
实际 上 ，openCursor () 可 以 接收 两 个 参数 。 第 一 个 参数 就 是 刚刚 看 到 的 IDBKeyRange 的 实例 ， 
第 二 个 是 表示 方向 的 数值 常量 。 作 为 第 二 个 参数 的 常量 是 前 面 讲 查询 时 介绍 的 IDBCursor 中 的 常量 。 
Fire fox4 + 和 Chrome 的 实现 又 有 不 同 ， 因 此 第 一 步 还 是 在 本 地 消除 差异 : 


Var IDBCursor = window.IDBCursor || window.webkitIDBCursor; 


正常 情况 下 ， 游 标 都 是 从 存储 空间 的 第 一 项 开始 ， 调 用 continue () 或 aqvance () 前 进 到 最 后 一 
项 。 游标 的 默认 方向 值 是 IDBCursor .NEXT。 如 果 对 象 存储 空间 中 有 重复 的 项 , 而 你 想 让 游标 跳 过 那些 
重复 的 项 ， 可 以 为 opencursor 传人 IDBCursor .NEXT_NO_DUPLICATE 作为 第 二 个 参数 : 


Var store = qb.transaction("users") .objectStore("users" ) ， 
request = store.openCursor (null, IDBCurSsor .NEXT_NO_DUPLICRATE) ， 


注意 ，opencursor () 的 第 一 个 参数 是 null1， 表 示 使 用 默认 的 键 范围 ， 即 包含 所 有 对 象 。 这 个 游 
标 可 以 从 存储 空间 中 的 第 一 个 对 象 开 始 ， 逐 个 迭代 到 最 后 一 个 对 象 一 一 但 会 跳 过 重复 的 对 象 。 
当然 ， 也 可 以 创建 一 个 游标 ， 让 它 在 对 象 存储 空间 中 向 后 移动 ， 即 从 最 后 一 个 对 象 开始 ， 逐 个 迭 
代 , 直 至 第 一 个 对 象 , 此 时 ,要 传人 的 常量 是 IDBCursor .PREV 和 IDBCursor .PREV_NO_DUPLICATE。 
例如 : 


Var store = db.transaction("users") .objectStore("users"), 
\ request = store.openCursor (null, IDBCursor.PREV); 
















































































IndexedDBExample05.htm 


使 用 IDBCursor .PREV 或 IDBCursor .PREV_NO_DUPLICATE 打开 游标 时 ,每 次 调用 continue () 


或 advance () ， 都 会 在 存储 空间 中 向 后 而 不 是 向 前 移动 游标 。 

7. 索引 

对 于 某 些 数据 ， 可 能 需要 为 一 个 对 象 存 储 空间 指定 多 个 键 。 比 如 ， 若 要 通过 用 户 ID 和 用 户 名 两 种 
方式 来 保存 用 户 资料 ， 就 需要 通过 这 两 个 键 来 存 取 记 录 。 为 此 ， 可 以 考虑 将 用 户 ID 作为 主键 ， 然 后 为 
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用 户 名 创建 索引 。 
要 创建 索引 ， 首 先 引 用 对 象 存储 空间 ， 然 后 调用 createIndex() 方 法 ， 如 下 所 示 。 


db.transaction("users") .objectStore("users'" ) ， 
Store .createInder("username"， "username", { unique: false}); 








var store 
index 

















createIndex() 的 第 一 个 参数 是 索引 的 名 字 ， 第 二 个 参数 是 索引 的 属性 的 名 字 ， 第 三 个 参数 是 一 
个 包含 uniaue 属性 的 选项 (options ) 对 象 。 这 个 选项 通常 都 必须 指定 ， 因 为 它 表 示 键 在 所 有 记录 中 


























是 否 唯 一 。 因 为 username 有 可 能 重复 ， 所 以 这 个 索引 不 是 唯一 的 。 











createIndex() 的 返回 值 是 IDBInaex 的 实例 。 在 对 象 存储 空间 上 调用 indqex () 方 法 也 能 返回 同 





一 个 实例 。 例 如 ， 要 使 用 一 个 已 经 存在 的 名 为 "username" 的 索引 ， 可 以 像 下 面 这 样 取得 该 索引 。 





Var store = db.transaction("users") .objectStore("users'" ) ， 
index = store.index("username"); 





索引 其 实 与 对 象 存储 空间 很 相似 。 在 索引 上 调用 opencursor () 方 法 也 可 以 创建 新 的 游标 , 除了 将 
来 会 把 索引 键 而 非 主键 保存 在 event .result .key 属性 中 之 外 ， 这 个 游标 与 在 对 象 存储 空间 上 调用 





opencursor () 返 回 的 游标 完全 一 样 。 来 看 下 面 的 例子 。 


Var store db.transaction("users") .objectStore("users"), 
index store.index("username"), 
request = index.openCursor(); 





request.onsuccess = functionl(event)t{ 
// 处 理 成 功 
} . 


在 索引 上 也 能 创建 一 个 特殊 的 只 返回 每 条 记录 主键 的 游标 ， 那 就 要 调用 openKeycursor () 方 法 。 


这 个 方法 接收 的 参数 与 opencursor () 相同 。 而 最 大 的 不 同 在 于 ， 这 种 情况 下 event .result.key 中 











仍然 保存 着 索引 键 ， 而 event.result.value 中 保存 的 则 是 主键 ， 而 不 再 是 整个 对 象 。 


Var store = db.transaction("users") .objectStore("users"), 
index = store.index("username"), 
request = index.openKeyCursor(); 








request.onsuccess = function(event)t{ 

/ /处理 成 功 

// event .result.key 中 保存 索引 键 ， 而 event .result.value 中 保存 主键 
}3 





同样 , 使 用 get () 方 法 能 够 从 索引 中 取得 一 个 对 象 ， 只 要 传人 相应 的 索引 键 即 可 ; 当然 ,这 个 方 











也 将 返回 一 个 请 求 。 


var store = db.transaction("users") .objectStore("users"), 
index = store.index("username"), 
request = index.get ("007"); 


request.onsuccess = functionl(event)t{ 
/ /处理 成 功 

下 

request.onerror = function(event)t{ 
/ /处理 失败 


}3 
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要 根据 给 定 的 索引 键 取得 主键 ， 可 以 使 用 getKey () 方 法 。 这 个 方法 也 会 创建 一 个 新 的 请 求 ， 但 
event .result .value 等 于 主键 的 值 ， 而 不 是 包含 整个 对 象 。 
var store = db.transaction("users") .objectStore("users" ) ， 


index = store.index("username"), 
request = index.getKey("007"); 


request.onsuccess = function(event)t{ 
/ /处理 成 功 
//event.result.key 中 保存 索引 键 , 而 event .result.value 中 保存 主键 
}3 
在 这 个 例子 的 onsuccess 事件 处 理 程序 中 ，event .result .value 中 保存 的 是 用 户 ID。 
任何 时 候 ， 通 过 IDBIngdex 对 象 的 下 列 属性 都 可 以 取得 有 关 索 引 的 相关 信息 。 
口 name: 索引 的 名 字 。 
口 keyPath: 传人 createIndex() 中 的 属性 路 径 。 
口 objectStore: 索引 的 对 象 存储 空间 。 
口 unique: 表示 索引 键 是 否 唯一 的 布尔 值 。 
另外 ， 通 过 对 象 存储 对 象 的 indexName 属性 可 以 访问 到 为 该 空间 建立 的 所 有 索引 。 通 过 以 下 代码 
就 可 以 知道 根据 存储 的 对 象 建立 了 哪些 索引 。 
Var store = qb.transaction("users").objectStore("users")， 
indexNames = store.indexNames, 
index, 
i= 0, 
len = indexNames.length; 




















while(i < len){ 
index = store.index(indexNames[i++] ); 
console.log("Index name: " + index.name + ", KeyPath: " + index.keyPath + 
", Unique: " + index.unique); 
} 


以 上 代码 遍历 了 每 个 索引 ， 在 控制 台中 输出 了 它们 的 信息 。 
在 对 象 存储 空间 上 调用 aeleteInaex () 方 法 并 传人 索引 的 名 字 可 以 删除 索引 。 














Var store = qb.transaction("users") .objectStore("users"); 
store.deleteIndex("username"); Ce 
因为 删除 索引 不 会 影响 对 象 存储 空间 中 的 数据 ， 所 以 这 个 操作 没有 任何 回调 函数 。 








8. 并 发 问题 
虽然 网 页 中 的 mdexedDB 提供 的 是 异步 API， 但 仍然 存在 并 发 操作 的 问题 。 如 果 浏 览 器 的 两 个 不 同 
的 标签 页 打开 了 同一 个 页 面 , 那么 一 个 页 面试 图 更 新 另 一 个 页 面 尚未 准备 就 绪 的 数据 库 的 问题 就 有 可 能 
发 生 。 把 数据 库 设置 为 新 版 本 有 可 能 导致 这 个 问题 。 因 此 ， 只 有 当 浏 览 器 中 仅 有 一 个 标签 页 使 用 数据 库 
的 情况 下 ， 调 用 setversion () 才 能 完成 操作 。 

刚 打 开 数 据 库 时 , 要 记 着 指定 onversionchange 事件 处 理 程序 。 当 同一 个 来 源 的 另 一 个 标签 页 调 
用 setversion() 时 ， 就 会 执行 这 个 回调 函数 。 处 理 这 个 事件 的 最 佳 方式 是 立即 关闭 数据 库 ， 从 而 保证 
版 本 更 新 顺利 完成 。 例 如 : 
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Var request, database; 


request = indexedDB.open ("admin"); 
request.onsuccess = function(event)t{ 
database = event.target.result; 


database.onversionchange = function()t{ 
database.close(); 

}; 
3 
每 次 成 功 打开 数据 库 ， 都 应 该 指定 onversionchange 事件 处 理 程序 。 
调用 setversion() 时 ， 指 定 请 求 的 onblocked 事件 处 理 程序 也 很 重要 。 在 你 想 要 更 新 数据 库 的 
版 本 但 另 一 个 标签 页 已 经 打开 数据 库 的 情况 下 ， 就 会 触发 这 个 事件 处 理 程序 。 此 时 ,最 好 先 通知 用 户 关 
闭 其 他 标签 页 ， 然 后 再 重新 调用 setversion()。 例如: 

Var request = database.setVersion("2.0"); 


request.onblocked = function()t{ 
alert ("Please close all other tabs and try again."); 


en 
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request.onsuccess = function(){ 
// 处 理 成 功 ， 继 续 

二 

请 记 住 ， 其 他 标签 页 中 的 onversionchange 事件 处 理 程序 也 会 执行 。 

通过 指定 这 些 事件 处 理 程序 ， 就 能 确保 你 的 Web 应 用 妥善 地 处 理 好 IndexedDB 的 并 发 问题 。 

9. 限制 

对 IndexedDB 的 限制 很 多 都 与 对 Web Storage 的 类 似 。 首 先 ，IndexedDB 数据 库 只 能 由 同 源 ( 相同 
协议 、 域 名 和 端口 ) 页 面 操作 ， 因 此 不 能 跨 域 共享 信息 。 换 名 话说 ，www.wrox.com 与 p2p.wrox.com 
的 数据 库 是 完全 独立 的 。 

其 次 ， 每 个 来 源 的 数据 库 占 用 的 磁盘 空间 也 有 限制 。Firefox 4+ 目 前 的 上 限 是 每 个 源 5S0MB ， 而 
Chrome 的 限制 是 SMB 。 移 动 设备 上 的 Firefox 最 多 允许 保存 SMB ， 如 果 超 过 了 这 个 配额 ， 将 会 请 求 
用 户 的 许可 。 

Firefox 还 有 另外 一 个 限制 ， 即 不 允许 本 地 文件 访问 IndexedDB。Chrome 没有 这 个 限制 。 如 果 你 在 
本 地 运行 本 书 的 示例 ， 请 使 用 Chrome。 


23.4 小结 


离线 Web 应 用 和 客户 端 存储 数据 的 能 力 对 未 来 的 Web 应 用 越 来 越 重要 。 浏 览 器 已 经 能 够 检测 到 用 
户 是 否 离线 ， 并 触发 JavaScript 事件 以 便 应 用 做 出 处 理 。 可 以 指定 在 应 用 缓存 中 保存 哪些 文件 以 便 离线 
时 使 用 。 对 于 应 用 缓存 的 状态 及 变化 ， 也 有 相应 的 JavaScript API 可 以 调用 检测 。 

本 书 还 讨论 了 客户 端 存 储 的 以 下 几 方 面 内容 。 

口 以 前 ， 这 种 存储 只 能 使 用 cookie 完成 ，cookie 是 一 小 块 可 以 客户 端 设置 也 可 以 在 服务 器 端 设 置 
的 信息 ， 每 次 发 起 请 求 时 都 会 传送 它 。 

口 在 JavaScript 中 通过 document . cookie 可 以 访问 cookie。 

口 cookie 的 限制 使 其 可 以 存储 少量 数据 ， 然 而 对 于 大 量 数据 效率 很 低 。 
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下 发 明了 一 种 叫做 用 户 数据 的 行为 ， 可 以 应 用 到 页 面 的 某 个 元 素 上 ， 它 有 以 下 特点 。 
口 一 旦 应 用 后 , 该 元 素 便 可 以 从 一 个 命名 数据 空间 中 载 人 数据 , 然后 可 以 通过 getAttribute()、 
setAttribute() 和 removeAttribute() 方 法 访问 。 
口 数据 必须 明确 使 用 save () 方 法 保存 到 命名 数据 空间 中 ， 以 便 能 在 会 话 之 间 持 久 化 数据 。 

Web Storage 定义 了 两 种 用 于 存储 数据 的 对 象 : sessionStorage 和 localStorage。 前 者 严格 用 
于 在 一 个 浏览 器 会 话 中 存储 数据 ,因为 数据 在 浏览 器 关闭 后 会 立即 删除 ; 后 者 用 于 跨 会 话 持久 化 数据 并 
遵循 跨 域 安全 策略 。 

IndexedDB 是 一 种 类 似 SQL 数据 库 的 结构 化 数据 存储 机 制 。 但 它 的 数据 不 是 保存 在 表 中 , 而 是 保存 
在 对 象 存储 空间 中 。 创建 对 象 存储 空间 时 ,需要 定义 一 个 键 , 然后 就 可 以 添加 数据 。 可 以 使 用 游标 在 对 
象 存储 空间 中 查询 特定 的 对 象 。 而 索引 则 是 为 了 提高 查询 速度 而 基于 特定 的 属性 创建 的 。 

有 了 以 上 这 些 选择 ， 就 可 以 在 客户 端 机 器 上 使 用 JavaScript 存储 大 量 数据 了 。 但 你 必须 小 心 ， 不 要 
在 客户 端 存储 敏感 数据 ， 因 为 数据 缓存 不 会 加 密 。 
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7 
最 佳 实践 


本 章 内 容 

口 可 维护 的 代码 
口 保证 代码 性 能 
口 部 署 代码 














从 2000 以 来 ，Web 开发 方面 的 种 种 规范 、 条 例 正 在 高 速 发 展 。Web 开发 过 去 曾 是 荡 芜 地 带 ， 

里 面 东西 还 都 凑合 ， 而 现在 已 经 演化 成 了 完整 的 研究 规范 ， 并 建立 了 种 种 最 佳 实践 。 随 着 简 
单 的 网 站 成 长 为 更 加 复杂 的 Web 应 用 ， 同 时 Web 爱好 者 成 为 了 有 收入 的 专业 人 士 ，Web 开发 的 世界 充 
满 了 各 种 关于 最 新 技术 和 开发 方法 的 信息 。 尤其 是 JavaScript, 它 从 大 量 的 研究 和 推断 中 获 益 。JavaScript 
的 最 佳 实践 分 成 若干 类 ， 并 在 开发 过 程 的 不 同 点 上 进行 处 理 。 


24.1 可 维护 性 


在 早期 的 网 站 中 ，JavaScript 主要 是 用 于 小 特效 或 者 是 表单 验证 。 而 今天 的 Web 应 用 则 会 有 成 千 上 
万 行 JavaScript 代码 ， 执 行 各 种 复杂 的 过 程 。 这 种 演化 让 开发 者 必须 得 考虑 到 可 维护 性 。 除 了 秉承 较 传 
统 理念 的 软件 工程 师 外 , 还 要 雇佣 JavaScript 开发 人 员 为 公司 创造 价值 ,而 他 们 并 非 仅仅 按时 交付 产品 ， 
同时 还 要 开发 智力 成 果 在 之 后 不 断 地 增加 价值 。 

编写 可 维护 的 代码 很 重要 ,因为 大 部 分 开发 人 员 都 花费 大 量 时 间 维护 他 人 代码 。 很 难 从 头 开始 开发 
新 代码 的 ,很 多 情况 下 是 以 他 人 的 工作 成 果 为 基础 的 。 确 保 自 己 代码 的 可 维护 性 ， 以 便 其 他 开发 人 员 在 
此 基础 上 更 好 的 开展 工作 。 
















































































注意 可 维护 的 代码 的 概念 并 不 是 JavaScript 特有 的 。 这 里 的 很 多 概念 都 可 以 广泛 


应 用 于 各 种 编程 语言 ， 当 然 也 有 某 些 特定 于 JavaScript 的 概念 。 





24.1.1 什么 是 可 维护 的 代码 


可 维护 的 代码 有 一 些 特征 。 一 般 来 说 ， 如 果 说 代码 是 可 维护 的 ， 它 需要 遵循 以 下 特点 。 
口 可 理解 性 一 一 其 他 人 可 以 接手 代码 并 理解 它 的 意图 和 一 般 途 径 , 而 无 需 原 开发 人 员 的 完整 解释 。 
口 直观 性 一 一 代码 中 的 东西 一 看 就 能 明白 ， 不 管 其 操作 过 程 多 么 复杂 。 


口 可 适应 性 一 一 代码 以 一 种 数据 上 的 变化 不 要 求 完全 重 写 的 方法 撰写 。 
口 可 扩展 性 一 一 在 代码 架构 上 已 考虑 到 在 未 来 允许 对 核心 功能 进行 扩展 。 
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口 可 调试 性 一 一 当 有 地 方 出 错时 ， 代 码 可 以 给 予 你 足够 的 信息 来 尽 可 能 直接 地 确定 问题 所 在 。 
对 于 专业 人 士 而 言 ， 能 写 出 可 维护 的 JavaScript 代码 是 非常 重要 的 技能 。 这 正 是 周末 改 改 网 站 的 爱 
好 者 和 真正 理解 自己 作品 的 开发 人 员 之 间 的 区 别 。 


24.1.2 ”代码 约定 


一 种 让 代码 变 得 可 维护 的 简单 途径 是 形成 一 套 JavaScript 代码 的 书写 约定 。 绝 大 多 数 语言 都 开发 出 
了 各 自 的 代码 约定 ， 只 要 在 网 上 一 搜 就 能 找到 大 量 相关 文档 。 专 业 的 组 织 为 开发 人 员 制 定 了 详尽 的 代码 
约定 试图 让 代码 对 任何 人 都 可 维护 。 杰 出 的 开放 源 代码 项 目 有 着 严格 的 代码 约定 要 求 , 这 让 社区 中 的 任 
何人 都 可 以 轻松 地 理解 代码 是 如 何 组 织 的 。 

1 于 JavaScript 的 可 适应 性 ， 代 码 约 定 对 它 也 很 重要 。 由 于 和 大 多 数 面向 对 象 语言 不 同 ，JavaScript 

并 不 强制 开发 人 员 将 所 有 东西 都 定义 为 对 象 。 语 言 可 以 支持 各 种 编程 风格 ， 从 传统 面向 对 象 式 到 声明 式 

到 函数 式 。 只 要 快速 浏览 一 下 一 些 开源 JavaScript 库 ， 就 能 发 现 好 几 种 创建 对 象 、 定 义 方法 和 管理 环境 

的 途径 。 

以 下 小 节 将 讨论 代码 约定 的 概论 。 对 这 些 主题 的 解说 非常 重要 , 虽然 可 能 的 解说 方式 会 有 区 别 ， 这 
取决 于 个 人 需求 。 

1. 可 读 性 

要 让 代码 可 维护 ,首先 它 必 须 可 读 。 可 读 性 与 代码 作为 文本 文件 的 格式 化 方式 有 关 。 可 读 性 的 大 部 
分 内 容 都 是 和 代码 的 缩 进 相关 的 。 当 所 有 人 都 使 用 一 样 的 缩 进 方式 时 ,整个 项 目 中 的 代码 都 会 更 加 易于 
阅读 。 通 常会 使 用 若干 空格 而 非 制 表 符 来 进行 缩 进 ， 这 是 因为 制 表 符 在 不 同 的 文本 编辑 器 中 显示 效果 不 
同 。 一 种 不 错 的 、 很 常见 的 缩 进 大 小 为 4 个 空格 ， 当 然 你 也 可 以 使 用 其 他 数量 。 

可 读 性 的 另 一 方面 是 注释 。 在 大 多 数 编程 语言 中 ， 对 每 个 方法 的 注释 都 视 为 一 个 可 行 的 实践 。 因 为 
JavaScript 可 以 在 代码 的 任何 地 方 创建 函数 ， 所 以 这 点 常常 被 忽略 了 。 然 而 正 因 如 此 ， 在 JavaScript 中 为 
每 个 函数 编写 文档 就 更 加 重要 了 。 一 般 而 言 ， 有 如 下 一 些 地 方 需 要 进行 注释 。 

口 函数 和 方法 一 一 每 个 函数 或 方法 都 应 该 包含 一 个 注释 ， 描 述 其 目的 和 用 于 完成 任务 所 可 能 使 用 

的 算法 。 陈 述 事先 的 假设 也 非常 重要 ， 如 人 参数 代表 什么 ， 函 数 是 否 有 返回 值 (因为 这 不 能 从 画 
数 定 义 中 推断 出 来 )。 

口 大 段 代码 一 一 用 于 完成 单个 任务 的 多 行 代码 应 该 在 前 面 放 一 个 描述 任务 的 注释 。 

口 复杂 的 算法 一 一 如 果 使 用 了 一 种 独特 的 方式 解决 某 个 问题 ， 则 要 在 注释 中 解释 你 是 如 何 做 的 。 

这 不 仅仅 可 以 帮助 其 他 浏览 你 代码 的 人 ， 也 能 在 下 次 你 自己 查阅 代码 的 时 候 帮 助理 解 。 

口 Hack 一 一 因为 存在 浏览 器 差 异 ，JavaScript 代码 一 般 会 包含 一 些 hack。 不 要 假设 其 他 人 在 看 代 
码 的 时 候 能 够 理解 hack 所 要 应 付 的 浏览 器 问题 。 如 果 因 为 某 种 浏览 器 无 法 使 用 普通 的 方法 ， 
所 以 你 需要 用 一 些 不 同 的 方法 , 那么 请 将 这 些 信息 放 在 注释 中 。 这 样 可 以 减少 出 现 这 种 情况 的 
可 能 性 : 有 人 偶然 看 到 你 的 hack， 然 后 “修正 ”了 它 ， 最 后 重新 引入 了 你 本 来 修正 了 的 错误 。 

缩 进 和 注释 可 以 带 来 更 可 读 的 代码 ， 在 未 来 则 更 容易 维护 。 

2. 变量 和 函数 命名 

适当 给 变量 和 函数 起 名 字 对 于 增加 代码 可 理解 性 和 可 维护 性 是 非常 重要 的 。 由 于 很 多 JavaScript 开 
发 人 员 最 初 都 只 是 业余 爱好 者 ， 所 以 有 一 种 使 用 无 意义 名 字 的 倾向 ， 诸 如 给 变量 起 "foo" 、"bazr "等 名 
字 , 给 函数 起 "dosomething" 这 样 的 名 字 。 专 业 JavaScript 开发 人 员 必 须 克 服 这 些 亚 习 以 创 建 可 维护 的 
代码 。 命 名 的 一 般 规 则 如 下 所 示 。 
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口 变量 名 应 为 名 词 如 car 或 person。 
口 函数 名 应 该 以 动词 开始 ， 如 getName() 。 返 回 布尔 类 型 值 的 函数 一 般 以 is 开头 ， 如 
isEnable()。 
口 变量 和 函数 都 应 使 用 合乎 逻辑 的 名 字 ， 不 要 担心 长 度 。 长 度 问 题 可 以 通过 后 处 理 和 压缩 ( 本 章 
后 面 会 讲 到 ) 来 缓解 。 

必须 避免 出 现 无 法 表示 所 包含 的 数据 类 型 的 无 用 变量 名 。 有 了 合适 的 命名 , 代码 阅读 起 来 就 像 讲述 
故事 一 样 ， 更 容易 理解 。 

3. 变量 类 型 透明 

由 于 在 JavaScript 中 变量 是 松散 类 型 的 ， 很 容易 就 忘记 变量 所 应 包含 的 数据 类 型 。 合 适 的 命名 方式 
可 以 一 定 程度 上 缓解 这 个 问题 ,但 放 到 所 有 的 情况 下 看 ， 还 不 够 。 有 三 种 表示 变量 数据 类 型 的 方式 。 
第 一 种 方式 是 初始 化 。 当 定义 了 一 个 变量 后 ， 它 应 该 被 初始 化 为 一 个 值 , 来 暗示 它 将 来 应 该 如 何 应 
用 。 例 如 ， 将 来 保存 布尔 类 型 值 的 变量 应 该 初始 化 为 true 或 者 false， 将 来 保存 数字 的 变量 就 应 该 初 
始 化 为 一 个 数字 ， 如 以 下 例子 所 示 : 


// 通 过 初始 化 指定 变量 类 型 

































































var found = false; // 布 尔 型 

var count = -1; // 数 字 

var name = ""; / /字符 囊 

var person = null; / /对象 

初始 化 为 一 个 特定 的 数据 类 型 可 以 很 好 的 指明 变量 的 类 型 。 但 缺点 是 它 无 法 用 于 函数 声明 中 的 函数 
参数 。 

第 二 种 方法 是 使 用 匈牙利 标记 法 来 指定 变量 类 型 。 匈牙利 标记 法 在 变量 名 之 前 加 上 一 个 或 多 个 字符 














来 表示 数据 类 型 。 这 个 标记 法 在 脚本 语言 中 很 流行 ， 曾 经 很 长 时 间 也 是 JavaScript 所 推崇 的 方式 。 
JavaScript 中 最 传统 的 匈牙利 标记 法 是 用 单个 字符 表示 基本 类 型 :"o" 代 表 对 象 ，"s" 代 表 字 符 串 ，"i" 
代表 整数 ，"f" 代 表 浮 点 数 ，"b" 代 表 布 尔 型 。 如 下 所 示 : 

// 用 于 指定 数据 类 型 的 向 牙 利 标记 法 





Var bFound; / /布尔 型 
var iCount; // 整 数 
var sName; / /字符 事 
var oPerson; / /对象 




















JavaScript 中 用 匈牙利 标记 法 的 好 处 是 函数 参数 一 样 可 以 使 用 。 但 它 的 缺点 是 让 代码 某 种 程度 上 难 
以 阅读 ， 阻 碍 了 没有 用 它 时 代码 的 直观 性 和 句子 式 的 特质 。 因 此 ,匈牙利 标记 法 失去 了 一 些 开发 者 的 

最 后 一 种 指定 变量 类 型 的 方式 是 使 用 类 型 注释 。 类 型 注释 放 在 变量 名 右边 , 但 是 在 初始 化 前 面 。 这 
种 方式 是 在 变量 旁边 放 一 段 指定 类 型 的 注释 ， 如 下 所 示 : 

// 用 于 指定 类 型 的 类 型 注释 






























































Var found /*:Boolean*/ = false; 

Var Count /wiint*y = 10; 

var name /*:String*/ = "Nicholas"; 
Var person /*:Object*/ 二, LL 

















类 型 注释 维持 了 代码 的 整体 可 读 性 , 同时 注入 了 类 型 信息 。 类 型 注释 的 缺点 是 你 不 能 用 多 行 注释 一 
次 注释 大 块 的 代码 ， 因 为 类 型 注释 也 是 多 行 注 释 ， 两 者 会 冲突 ， 如 下 例 所 示 所 示 : 
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// 以 下 代码 不 能 正确 运行 


/* 

var found /*:Boolean*/ = false; 

var count /*:int*/ = 10; 

var name /*:String*/ = "Nicholas"; 
var person /*:Object*/ = null; 

机 











这 里 ,试图 通过 多 行 注释 注释 所 有 变量 。 类 型 注释 与 其 相 冲 突 ， 因 为 第 一 次 出 现 的 /* 〈 第 二 行 ) 
匹配 了 第 一 次 出 现 的 */ (第 3 行 )， 这 会 造成 一 个 语法 错误 。 如 果 你 想 注释 掉 这 些 使 用 类 型 注释 的 代码 
行 ， 最 好 在 每 一 行 上 使 用 单行 注释 ( 很 多 编辑 器 可 以 帮 你 完成 )。 

这 就 是 最 常见 的 三 种 指定 变量 数据 类 型 的 方法 。 每 种 都 有 各 自 的 优势 和 劣势 , 要 自己 在 使 用 之 前 进 
行 评 估 。 最 重要 的 是 要 确定 哪 种 最 适合 你 的 项 目 并 一 致使 用 。 


24.1.3 ”松散 耦合 


只 要 应 用 的 某 个 部 分 过 分 依赖 于 男 一 部 分 ,代码 就 是 看 合 过 紧 ， 难 于 维护 。 典 型 的 问题 如 : 对 象 直 
接 引 用 另 一 个 对 象 ， 并 且 当 修改 其 中 一 个 的 同时 需要 修改 另外 一 个 。 紧 密 耦 合 的 软件 难于 维护 并 且 需 要 
经 常 重 写 。 

因为 Web 应 用 所 涉及 的 技术 ， 有 多 种 情况 会 使 它 变 得 耦合 过 紧 。 必 须 小 心 这 些 情况 ， 并 尽 可 能 维 
护 弱 耦合 的 代码 。 

1. 解 耦 HTML/JavaScript 

一 种 最 常见 的 耦合 类 型 是 HTMLV/JavaScript 耦合 。 在 Web 上 ，HTML 和 JavaScript 各 自 代 表 了 解决 
方案 中 的 不 同 层次 : HTML 是 数据 ，JavaScript 是 行为 。 因 为 它们 天 生 就 需要 交互 ， 所 以 有 多 种 不 同 的 
方法 将 这 两 个 技术 关联 起 来 。 但 是 ， 有 一 些 方法 会 将 HTML 和 JavaScript 过 于 紧密 地 耦合 在 一 起 。 
直接 写 在 HTML 中 的 JavaScript， 使 用 包含 内 联 代码 的 <script> 元 素 或 者 是 使 用 HTML 属性 来 分 
配 事件 处 理 程序 ， 都 是 过 于 紧密 的 耦合 。 请 看 以 下 代码 。 

<!-- 使 用 了 <script> 的 紧密 耦合 的 HTML/JavaScript --> 

<script type="text/javascript"> 

document .write("Hello world!"); 
</script> 

















































































































<!-- 使 用 事件 处 理 程序 属性 值 的 紧密 耦合 的 HTML/JavaScript --> 

<input type="button" value="Click Me" onclick="doSomething()" /> 

虽然 这 些 从 技术 上 来 说 都 是 正确 的 ,但 是 实践 中 ,它们 将 表示 数据 的 HIML 和 定义 行为 的 JavaScript 
紧密 耦合 在 了 一 起 。 理 想 情 况 是 ，HTML 和 JavaScript 应 该 完全 分 离 ， 并 通过 外 部 文件 和 使 用 DOM 附 
加 行为 来 包含 JavaScript。 

当 HTML 和 JavaScript 过 于 紧密 的 耦合 在 一 起 时 , 出 现 JavaScript 错误 时 就 要 先 判断 错误 是 出 现在 
HTML 部 分 还 是 在 JavaScript 文件 中 。 它 还 会 引入 和 代码 是 否 可 用 的 相关 新 问题 。 在 这 个 例子 中 , 可 能 
在 dosomething () 图 数 可 用 之 前 ， 就 已 经 按 下 了 按钮 ， 引 发 了 一 个 JavaScript 错误 。 因 为 任何 对 按钮 
行为 的 更 改 要 同时 触及 HIML 和 JavaScript， 因 此 影响 了 可 维护 性 。 而 这 些 更 改 本 该 只 在 JavaScript 中 
进行 。 

HTML 和 JavaScript 的 紧密 耦合 也 可 以 在 相反 的 关系 上 成 立 : JavaScript 包含 了 HTML。 这 通常 会 出 
现在 使 用 innerHTML 来 插入 一 段 HTML 文本 到 页 面 上 这 种 情况 中 ， 如 下 面 的 例子 所 示 : 
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// 将 HTML 紧密 耦合 到 JavaScript 
function insertMessage (msg){ 
Var container = document .getElementById("container"); 
container.innerHTML = "<div class=\"msg\"><p class=\"post\">" + msg + "</p>" + 
"<p><em>Latest message above.</em></p></div>"; 





} 

一 般 来 说 ， 你 应 该 避免 在 JavaScript 中 创建 大 量 HIML 。 再 一 次 重申 要 保持 层次 的 分 离 ， 这 样 可 以 
很 容易 的 确定 错误 来 源 。 当 使 用 上 面 这 个 例子 的 时 候 ,有 一 个 页 面 布 局 的 问题 , 可 能 和 动态 创建 的 HTML 
没有 被 正确 格式 化 有 关 。 不 过 ,要 定位 这 个 错误 可 能 非常 困难 ， 因 为 你 可 能 一 般 先 看 页 面 的 源 代码 来 查 
找 那 段 烦 人 的 HIML ， 但 是 却 没 能 找到 ， 因 为 它 是 动态 生成 的 。 对 数据 或 者 布局 的 更 改 也 会 要 求 更 改 
JavaScript， 这 也 表明 了 这 两 个 层次 过 于 紧密 地 耦合 了 。 

HTML 呈现 应 该 尽 可 能 与 JavaScript 保持 分 离 。 当 JavaScript 用 于 插入 数据 时 ， 尽 量 不 要 直接 插入 
标记 。 一 般 可 以 在 页 面 中 直接 包含 并 隐藏 标记 ， 然 后 等 到 整个 页 面 泻 染 好 之 后 ， 就 可 以 用 JavaScript 显 
示 该 标记 ， 而 非 生成 它 。 男 一 种 方法 是 进行 Ajax 请 求 并 获取 更 多 要 显示 的 HIML ， 这 个 方法 可 以 让 同 
样 的 泻 染 层 (PHP、JSP、Ruby 等 等 ) 来 输出 标记 ， 而 不 是 直接 山 在 JavaScript 中 。 

将 HTML 和 JavaScript 解 耦 可 以 在 调试 过 程 中 节省 时 间 ， 更 加 容易 确定 错误 的 来 源 ， 也 减轻 维护 的 
难度 : 更 改行 为 只 需要 在 JavaScript 文件 中 进行 ， 而 更 改 标记 则 只 要 在 泻 染 文件 中 。 

2. 解 看 CSS/JavaScript 

另 一 个 Web 层 则 是 CSS ， 它 主要 负责 页 面 的 显示 。JavaScript 和 CSS 也 是 非常 紧密 相关 的 : 他 们 都 
是 HIML 之 上 的 层次 ， 因 此 常常 一 起 使 用 。 但 是 ， 和 HTML 与 JavaScript 的 情况 一 样 ，CSS 和 JavaScript 
也 可 能 会 过 于 紧密 地 耦合 在 一 起 。 最 常见 的 紧密 耦合 的 例子 是 使 用 JavaScript 来 更 改 某 些 样 式 , 如 下 所 示 : 

//CSS 对 JavaScript 的 紧密 耦合 


element .Style.color = "red"; 
element . style.backgrounadColor = "blue"; 


由 于 CSS 负责 页 面 的 显示 ， 当 显示 出 现任 何 问题 时 都 应 该 只 是 查看 CSS 文件 来 解决 。 然 而 ， 当 使 
用 了 JavaScript 来 更 改 某 些 样式 的 时 候 ， 比 如 颜色 ， 就 出 现 了 第 二 个 可 能 已 更 改 和 必须 检查 的 地 方 。 结 
果 是 JavaScript 也 在 某 种 程度 上 负责 了 页 面 的 显示 ， 并 与 CSS 紧密 耦合 了 。 如 果 未 来 需要 更 改 样式 表 ， 
CSS 和 JavaScript 文件 可 能 都 需要 修改 。 这 就 给 开发 人 员 造 成 了 维护 上 的 豆 梦 。 所 以 在 这 两 个 层次 之 间 
必须 有 清晰 的 划分 。 

现代 Web 应 用 常常 要 使 用 JavaScript 来 更 改 样 式 ， 所 以 虽然 不 可 能 完全 将 CSS 和 JavaScript 解 看 ， 
但 是 还 是 能 让 耦合 更 松散 的 。 这 是 通过 动态 更 改 样式 类 而 非特 定 样式 来 实现 的 ， 如 下 例 所 示 : 


//CSS 对 JavaScript 的 松 数码 合 
element.className = "edit" 

过 只 修改 某 个 元 素 的 CSS 类 ， i 息 严 格 保留 在 CSS 中 。JavaScript 可 以 更 改 
样式 类 , 但 并 不 会 直接 影响 到 元 素 的 样式 。 只 要 应 用 了 正确 的 类 ,那么 任何 显示 问题 都 可 以 直接 追溯 到 
CSS 而 非 JavaScript。 

第 二 类 紧密 耦合 仅 会 在 下 中 出 现 (但 运行 于 标准 模式 下 的 IE8 不 会 出 现 ), 它 可 以 在 CSS 中 通过 表 
达 式 租 入 JavaScript， 如 下 例 所 示 : 
/* JavaScript 对 CSS 的 紧密 耦合 */ 
diw 
width: expression (document.body.offsetWwidth - 10 + "px"); 































































































































































































} 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


24.1 可 维护 性 661 








通常 要 避免 使 用 表达 式 ， 因 为 它们 不 能 跨 浏览 器 兼容 ， 还 因为 它们 所 引入 的 JavaScript 和 CSS 之 间 
的 紧密 耦合 。 如 果 使 用 了 表达 式 , 那么 可 能 会 在 CSS 中 出 现 JavaScript 错误 。 由 于 CSS 表达 式 而 追踪 过 
JavaScript 错误 的 开发 人 员 ， 会 告诉 你 在 他 们 决定 看 一 下 CSS 之 前 花 了 多 长 时 间 来 查找 错误 。 
再 次 提醒 ,好 的 层次 划分 是 非常 重要 的 。 显 示 问 题 的 唯一 来 源 应 该 是 CSS,， 行为 问题 的 唯一 来 源 应 
该 是 JavaScript。 在 这 些 层次 之 间 保 持 松散 耦合 可 以 让 你 的 整个 应 用 更 加 易于 维护 。 
3. 解 看 应 用 逻辑 / 事件 处 理 程序 
每 个 Web 应 用 一 般 都 有 相当 多 的 事件 处 理 程序 ， 监 听 着 无 数 不 同 的 事件 。 然 而 ， 很 少 有 能 仔细 得 
将 应 用 逻辑 从 事件 处 理 程序 中 分 离 的 。 请 看 以 下 例子 : 
function handleKeyPress (event){ 
event = EventUtil.getEvent (event); 
if (event.keyCode == 13){ 
Var target = EventUtil.getTarget (event); 
Var Value = 5 * parseInt (target .value); 


if (value > 10){ 
document .getElementById("error-msg") .style.display = "block"; 

































































} 
} 

} 

这 个 
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这 个 事件 处 理 程 序 除了 包含 了 应 用 逻辑 , 还 进行 了 事件 的 处 理 。 这 种 方式 的 问题 有 其 双重 性 。 首先 ， 
除了 通过 事件 之 外 就 再 没有 方法 执行 应 用 逻辑 , 这 让 调试 变 得 困难 。 如 果 没 有 发 生 预 想 的 结果 怎么 办 ? 
是 不 是 表示 事件 处 理 程序 没有 被 调用 还 是 指 应 用 逻辑 失败 ”其 次 , 如 果 一 个 后 续 的 事件 引发 同样 的 应 用 
逻辑 ， 那 就 必须 复制 功能 代码 或 者 将 代码 抽取 到 一 个 单独 的 函数 中 。 无 论 何 种 方式 ， 都 要 作 比 实际 所 需 
更 多 的 改动 。 

较 好 的 方法 是 将 应 用 逻辑 和 事件 处 理 程序 相 分 离 ， 这 样 两 者 分 别处 理 各 自 的 东西 。 一 个 事件 处 理 程 
序 应 该 从 事件 对 象 中 提取 相关 信息 ,并 将 这 些 信息 传送 到 处 理应 用 逻辑 的 某 个 方法 中 。 例如 ,前 面 的 代 
码 可 以 被 重 写 为 : 

function validateValue (value){ 

Value = 5 * parseInt (value); 


if (value > 10){ 
document .getElementById("error-msg") .style.display = "block"; 
























































} 
} 


function handleKeyPress (event ) { 
event = EventUtil.getEvent (event); 
if (event.keyCode == 13)f{ 
Var target = EventUtil.getTarget (event); 
validateValue (target .value); 











} 
} 


改动 过 的 代码 合理 将 应 用 逻辑 从 事件 处 理 程 序 中 分 离 了 出 来 。handqleKeyPress () 函数 确认 是 按 
下 了 Enter 键 (event .keyCode 为 13 ), 取得 了 事件 的 目标 并 将 value 属性 传递 给 validatevalue () 
函数 ， 这 个 函数 包含 了 应 用 逻辑 。 注 意 validatevalue () 中 没有 任何 东西 会 依赖 于 任何 事件 处 理 程序 
逻辑 ， 它 只 是 接收 一 个 值 ， 并 根据 该 值 进行 其 他 处 理 。 

从 事件 处 理 程序 中 分 离 应 用 逻辑 有 几 个 好 处 。 首 先 ， 可 以 让 你 更 容易 更 改 触发 特定 过 程 的 事件 。 如 
果 最 开始 由 鼠标 点 击 事件 触发 过 程 ， 但 现在 按键 也 要 进行 同样 处 理 ， 这 种 更 改 就 很 容易 。 其 次 ， 可 以 在 
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不 附加 到 事件 的 情况 下 测试 代码 ， 使 其 更 易 创 建 单元 测试 或 者 是 自动 化 应 用 流程 。 
以 下 是 要 牢记 的 应 用 和 业务 逻辑 之 间 松 散 耦 合 的 几 条 原则 : 

口 勿 将 event 对 象 传 给 其 他 方法 ; 只 传 来 自 event 对 象 中 所 需 的 数据 ; 

口 任何 可 以 在 应 用 层面 的 动作 都 应 该 可 以 在 不 执行 任何 事件 处 理 程序 的 情况 下 进行 ; 

口 任何 事件 处 理 程序 都 应 该 处 理事 件 ， 然 后 将 处 理 转交 给 应 用 逻辑 。 
牢记 这 几 条 可 以 在 任何 代码 中 都 获得 极 大 的 可 维护 性 的 改进 , 并 且 为 进一步 的 测试 和 开发 制造 了 很 

多 可 能 。 


24.1.4 ”编程 实践 


书写 可 维护 的 JavaScript 并 不 仅仅 是 关于 如 何 格式 化 代码 ; 它 还 关系 到 代码 做 什么 的 问题 。 在 企业 
环境 中 创建 的 Web 应 用 往往 同时 由 大 量 人 员 一 同 创作 。 这 种 情况 下 的 目标 是 确保 每 个 人 所 使 用 的 浏览 
器 环境 都 有 一 致 和 不 变 的 规则 。 因 此 ， 最 好 坚持 以 下 一 些 编程 实践 。 

1. 尊重 对 象 所 有 权 

JavaScript 的 动态 性 质 使 得 几乎 任何 东西 在 任何 时 间 都 可 以 修改 。 有 人 说 在 JavaScript 没有 什么 神圣 
的 东西 ， 因 为 无 法 将 某 些 东西 标记 为 最 终 或 恒定 状态 。 这 种 状况 在 ECMAScript 5 中 通过 引入 防 自 改 对 
象 (第 22 章 讨论 过 ) 得 以 改变 ; 不 过 ， 默 认 情 况 下 所 有 对 象 都 是 可 以 修改 的 。 在 其 他 语言 中 ， 当 没有 
实际 的 源 代码 的 时 候 ， 对 象 和 类 是 不 可 变 的 。JavaScript 可 以 在 任何 时 候 修 改 任意 对 象 ， 这 样 就 可 以 以 
不 可 预计 的 方式 覆 写 默认 的 行为 。 因 为 这 门 语言 没有 强行 的 限制 , 所 以 对 于 开发 者 来 说 , 这 是 很 重要 的 ， 
也 是 必要 的 。 

也 许 在 企业 环境 中 最 重要 的 编程 实践 就 是 尊重 对 象 所 有 权 ， 它 的 意思 是 你 不 能 修改 不 属于 你 的 对 
象 。 简单 地 说 ， 如 果 你 不 负责 创建 或 维护 某 个 对 象 、 它 的 对 象 或 者 它 的 方法 ,那么 你 就 不 能 对 它们 进行 
修改 。 更 具体 地 说 : 

口 不 要 为 实例 或 原型 添加 属性 ; 
口 不 要 为 实例 或 原型 添加 方法 ; 
口 不 要 重 定义 已 存在 的 方法 。 

问题 在 于 开发 人 员 会 假设 浏览 器 环境 按照 某 个 特定 方式 运行 , 而 对 于 多 个 人 都 用 到 的 对 象 进行 改动 
就 会 产生 错误 。 如 果 某 人 期 望 叫做 stopEvent () 的 函数 能 取消 某 个 事件 的 默认 行为 ， 但 是 你 对 其 进行 
了 更 改 ,然后 它 完成 了 本 来 的 任务 ， 后 来 还 追加 了 另外 的 事件 处 理 程序 , 那 肯定 会 出 现 问题 了 。 其 他 开 
发 人 员 会 认为 函数 还 是 按照 原来 的 方式 执行 , 所 以 他 们 的 用 法 会 出 错 并 有 可 能 造成 危害 ， 因 为 他 们 并 不 
知道 有 副作用 。 

这 些 规则 不 仅仅 适用 于 自 定义 类 型 和 对 象 ， 对 于 诸如 object、string、document、window 等 
原生 类 型 和 对 象 也 适用 。 此 处 潜在 的 问题 可 能 更 加 危险 ,因为 浏览 器 提供 者 可 能 会 在 不 做 宣布 或 者 是 不 
可 预期 的 情况 下 更 改 这 些 对 象 。 

著名 的 Prototype JavaScript 库 就 出 现 过 这 种 例子 : 它 为 document 对 象 实现 了 getElements- 
ByClassName () 方 法 ， 返回 一 个 Array 的 实例 并 增加 了 一 个 each () 方 法 。John Resig 在 他 的 博客 上 和 叙 
述 了 产生 这 个 问题 的 一 系列 事件 ,他 在 帖子 (http://ejohn.org/blog/getelementsbyclassname-pre-prototype-16/ ) 
中 说 ， 他 发 现 当 浏览 器 开始 内 部 实现 getElementsByClassName () 的 时 候 就 出 现 问题 了 ， 这 个 方法 并 
不 返回 一 个 Array 而 是 返回 一 个 并 不 包含 each () 方 法 的 NodeList。 使 用 Prototype 库 的 开发 人 员 习 惯 
于 写 这 样 的 代码 : 
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document .getElementsByClassName ("selected") .each (Element.hide); 


虽然 在 没有 原生 实现 a ) 的 浏览 器 中 可 以 正常 运行 , 但 对 于 支持 的 了 浏 
览 器 就 会 产生 错误 ， 因 为 返回 的 值 不 同 。 你 不 能 预测 浏览 器 提供 者 在 未 来 会 怎样 更 改 原生 对 象 ， 所 以 不 
管用 任何 方式 修改 他 们 ， 和 和 本 前 人 导 到 必 玉 你 的 当天 和 他 们 的 实现 之 同 的 总 突 。 

所 以 , 最 佳 的 方法 便 是 永远 不 修改 不 是 由 你 所 有 的 对 象 。 所 谓 拥有 对 象 ， 就 是 说 这 个 对 象 是 你 创建 
的 ， 比 如 你 自己 创建 的 自 定 义 类 型 或 对 象 字面 量 。 而 Array、document 这 些 显然 不 是 你 的 ， 它 们 在 你 
的 代码 执行 前 就 存在 了 。 你 依然 可 以 通过 以 下 方式 为 对 象 创建 新 的 功能 
口 创建 包含 所 需 功 能 的 新 对 象 ， 并 用 它 与 相关 对 象 进行 交互 ; 
口 创建 自 定义 类 型 ， 继 承 需 要 进行 修改 的 类 型 。 然 后 可 以 为 自 定义 类 型 添加 额外 功能 。 

现在 很 多 JavaScript 库 都 赞同 并 遵守 这 条 开发 原理 ， 这 样 即使 浏览 器 频繁 更 改 ， 库 本 身 也 能 继续 成 
长 和 适应 。 

2. 避免 全 局 量 




































































与 尊重 对 象 所 有 权 密 切 相关 的 是 尽 可 能 避免 全 局 变量 和 函数 。 这 也 关系 到 创建 一 个 脚本 执行 的 一 致 
的 和 可 维护 的 环境 。 最 多 创建 一 个 全 局 变量 ， 让 其 他 对 象 和 函数 存在 其 中 。 请 看 以 下 例子 : 

// 两 个 全 局 量 一 一 避免 | | 

var name = "Nicholas"; 


function sayName(){ 
alert (name); 


} 


这 段 代码 包含 了 两 个 全 局 量 : 变量 name 和 函数 sayName ()。 其 实 可 以 创建 一 个 包含 两 者 的 对 象 ， 
如 下 例 所 示 : 


/ /一 个 全 局 量 推荐 
var MyApplication = { 
name: "Nicholas", 
sayName: function()f{ 
alert (this.name); 








} 

5 

这 段 重 写 的 代码 引入 了 一 个 单一 的 全 局 对 象 MyApplication, name 和 sayName () 都 附加 到 其 上 。 
这 样 做 消除 了 一 些 存在 于 前 一 段 代 码 中 的 一 些 问题 。 首 先 ， 变 量 name 履 盖 了 window.name 属性 ， 可 
能 会 与 其 他 功能 产生 冲突 ;其 次 , 它 有 助 消除 功能 作用 域 之 间 的 混淆 .调用 MyApplication.sayName () 
在 逻辑 上 暗示 了 代码 的 任何 问题 都 可 以 通过 检查 定义 MyApplication 的 代码 来 确定 。 

单一 的 全 局 量 的 延伸 便 是 命名 空间 的 概念 ， 由 YUI ( Yahoo! User Interface ) 库 普 及 。 命 名 空间 包括 
创建 一 个 用 于 放置 功能 的 对 象 。 在 YUI 的 2.x 版 本 中 ， 有 若干 用 于 追加 功能 的 命名 空间 。 比 如 : 
口 YAHOO .util.Dom 处 理 DOM 的 方法 ; 
口 YAHOo.util.Event 一 一 与 事件 交互 的 方法 ; 
口 YAHoo. Lang 一 一 用 于 底层 语言 特性 的 方法 。 

对 于 YUI, 单一 的 全 局 对 象 YAHOO 作为 一 个 容器 ， 其 中 定义 了 其 他 对 象 。 用 这 种 方式 将 功能 组 合 
在 一 起 的 对 象 , 叫做 命名 空间 。 整个 YUI 库 便 是 构建 在 这 个 概念 上 的 , 让 它 能 够 在 同一 个 页 面 上 与 其 他 
的 JavaScript 库 共存 。 

命名 空间 很 重要 的 一 部 分 是 确定 每 个 人 都 同意 使 用 的 全 局 对 象 的 名 字 , 并 且 尽 可 能 唯一 , 让 其 他 人 
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不 太 可 能 也 使 用 这 个 名 字 。 在 大 多 数 情 况 下 ， 可 以 是 开发 代码 的 公司 的 名 字 , 例如 YAHOO 或 者 Wrox。 
你 可 以 如 下 例 所 示 开 始 创建 命名 空间 来 组 合 功 能 。 
// 创 建 全 局 对 象 


Var Wrox = {}; 





// 为 Professional JavaScript 创建 命名 空间 
Wrox.ProJS = {}; 


// 将 书 中 用 到 的 对 象 附加 上 去 
Wrox.ProJS.EventUtil = { ... }; 
Wrox.ProJS.CookieUtil = { ... }; 


在 这 个 例子 中 ,wrox 是 全 局 量 ,其 他 命名 空间 在 此 之 上 创建 ,如 果 本 书 所 有 代码 都 放 在 Wrox.ProJS 
命名 空间 ， 那 么 其 他 作者 也 应 把 自己 的 代码 添加 到 wrox 对 象 中 。 只 要 所 有 人 都 遵循 这 个 规则 ， 那 么 就 
不 用 担心 其 他 人 也 创建 叫做 EventUtil 或 者 cookieUtil 的 对 象 ,因为 它 会 存在 于 不 同 的 命名 空间 中 。 
请 看 以 下 例子 : 


// 为 Professional Ajax 创建 命名 空间 
Wrox.ProAjax = {}; 











// 附 加 该 书 中 所 使 用 的 其 他 对 象 
Wrox.ProAjax.EventUtil = { ... }; 
Wrox.ProAjax.CookieUtil = { ... }; 


//ProJS 还 可 以 继续 分 别 访 问 
Wrox.ProJS.EventUtil.addHandler( ... ); 


// 以 及 ProAjax 

Wrox.ProAjax.EventUtil.addHandler( ... ); 

虽然 命名 空间 会 需要 多 写 一 些 代码 , 但 是 对 于 可 维护 的 目的 而 言 是 值得 的 。 命 名 空间 有 助 于 确保 代 
码 可 以 在 同一 个 页 面 上 与 其 他 代码 以 无 害 的 方式 一 起 工作 。 

3. 避 免 与 null 进行 比较 

由 于 JavaScript 不 做 任何 自动 的 类 型 检查 , 所 有 它 就 成 了 开发 人 员 的 责任 。 因 此 , 在 JavaScript 代码 
中 其 实 很 少 进行 类 型 检测 。 最 常见 的 类 型 检测 就 是 查看 某 个 值 是 否 为 nul1。 但 是 ， 直 接 将 值 与 nul1 
比较 是 使 用 过 度 的 ， 并 且 常 常 由 于 不 充分 的 类 型 检查 导致 错误 。 看 以 下 例子 : 




































































function sortArray (values)t{ 
if (values != null)t{ // 避 免 ! 
values.sort (comparator); 
} 
} 


该 函数 的 目的 是 根据 给 定 的 比较 子 对 一 个 数组 进行 排序 。 为 了 函数 能 正确 执行 ，values 参数 必需 
是 数组 ,但 这 里 的 if 语句 仅仅 检查 该 values 是 否 为 aul1。 还 有 其 他 的 值 可 以 通过 if 语句 ， 包 括 字 
符 串 、 数 字 ， 它 们 会 导致 函数 抛 出 错误 。 

现实 中 , 与 nul1l 比较 很 少 适合 情况 而 被 使 用 。 必 须 按照 所 期 望 的 对 值 进行 检查 ， 而 非 按 照 不 被 其 
望 的 那些 。 例 如 ， 在 前 面 的 范例 中 ，values 参数 应 该 是 一 个 数组 ， 那 么 就 要 检查 它 是 不 是 一 个 数组 ， 
而 不 是 检查 它 是 否 非 nul1。 函 数 按照 下 面 的 方式 修改 会 更 加 合适 : 












































图 灵 社 区 会 员 stinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


24.1 可 维护 性 665 





function sortArray (values){ 
if (values instanceof Array)t{ /7 推荐 
values.sort (comparator); 


} 


} 
该 函数 的 这 个 版 本 可 以 阻止 所 有 非法 值 ， 而 且 完 全 用 不 着 nu11。 












这 种 验证 数组 的 技术 在 多 框架 的 网 页 中 不 一 定 正 确 工 作 , 因为 每 个 框架 都 有 其 自 
己 的 全 局 对 象 ， 因 此 ， 也 有 自己 的 Array 构造 函数 。 如 果 你 是 从 一 个 框架 将 数组 传 
送 到 另 一 个 框架 ， 那 么 就 要 另外 检查 是 否 存 在 sort () 方 法 。 









如 果 看 到 了 与 null 比较 的 代码 ， 尝 试 使 用 以 下 技术 替换 : 
口 如 果 值 应 为 一 个 引用 类 型 ， 使 用 instanceof 操作 符 检 查 其 构造 函数 ; 
口 如 果 值 应 为 一 个 基本 类 型 ， 使 用 typeof 检查 其 类 型 ; 







































































口 如 果 是 希望 对 象 包含 某 个 特定 的 方法 名 ， 则 使 用 typeof 操作 符 确 保 指 定名 字 的 方法 存在 于 对 
象 上 。 

代码 中 的 null 比较 越 少 ， 就 越 容 易 确定 代码 的 目的 ， 并 消除 不 必要 的 错误 。 

4. 使 用 常量 

尽管 JavaScript 没 有 常量 的 正式 概念 , 但 它 还 是 很 有 用 的 。 这 种 将 数据 从 应 用 逻辑 分 离 出 来 的 思想 ， 


可 以 在 不 冒 引入 错误 的 风险 的 同时 ， 就 改变 数据 。 请 看 以 下 例子 : 


function validate(value)t{ 
if (!value)t{ 
alert ("Invalid value!"); 
location.href = "/errors/invalid.php"; 
} 
} 


在 这 个 函数 中 有 两 段 数据 : 要 显示 给 用 户 的 信息 以 及 URL。 显示 在 用 户 界面 上 的 字符 串 应 该 以 允许 
进行 语言 国际 化 的 方式 抽取 出 来 。URL 也 应 被 抽取 出 来 ,因为 它们 有 随 着 应 用 成 长 而 改变 的 倾向 。 基 本 
上 ,有 着 可 能 由 于 这 样 那样 原因 会 变化 的 这 些 数据 , 那么 都 会 需要 找到 函数 并 在 其 中 修改 代码 。 而 每 次 
修改 应 用 逻辑 的 代码 ， 都 可 能 会 引入 错误 。 可 以 通过 将 数据 抽取 出 来 变 成 单独 定义 的 常量 的 方式 , 将 应 
用 人 逻辑 与 数据 修改 隔离 开 来 。 请 看 以 下 例子 : 

var Constants = { 


INVALID VALUE MSG: "Invalid value!", 
INVALID VALUE URL: "/errors/invalid.php" 














}; 





function validate(value)t 
if (!value){ 
alert (Constants .INVALID VALUE MSG); 
location.href = Constants.INVALID VALUE URL; 
} 
} 


在 这 段 重 写 过 的 代码 中 , 消息 和 URL 都 被 定义 于 constants 对 象 中 ,然后 函数 引用 这 些 值 。 这 些 
设置 允许 数据 在 无 须 接触 使 用 它 的 函数 的 情况 下 进行 变更 。constants 对 象 甚至 可 以 完全 在 单独 的 文 
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件 中 进行 定义 ， 同 时 该 文件 可 以 由 包含 正确 值 的 其 他 过 程 根 据 国 际 化 设置 来 生成 。 

关键 在 于 将 数据 和 使 用 它 的 逻辑 进行 分 离 。 要 注意 的 值 的 类 型 如 下 所 示 。 
口 重复 值 一 一 任何 在 多 处 用 到 的 值 都 应 抽取 为 一 个 常量 。 这 就 限制 了 当 一 个 值 变 了 而 另 一 个 没 变 
的 时 候 会 造成 的 错误 。 这 也 包含 了 CSS 类 名 。 
口 用 户 界面 字符 串 任何 用 于 显示 给 用 户 的 字符 串 ， 都 应 被 抽取 出 来 以 方便 国际 化 。 
口 URLs 一 一 在 Web 应 用 中 , 资源 位 置 很 容易 变更 ,所 以 推荐 用 一 个 公共 地 方 存放 所 有 的 URL。 
口 任意 可 能 会 更 改 的 值 一 一 每 当 你 在 用 到 字面 量 值 的 时 候 ， 你 都 要 问 一 下 自己 这 个 值 在 未 来 是 不 

是 会 变化 。 如 果 答 案 是 “是 "， 那 么 这 个 值 就 应 该 被 提取 出 来 作为 一 个 常量 。 

对 于 企业 级 的 JavaScript 开发 而 言 ， 使 用 常量 是 非常 重要 的 技巧 ， 因 为 它 能 让 代码 更 容易 维护 ， 并 

量 在 数据 更 改 的 同时 保护 代码 。 






















































































24.2 性 能 


自从 JavaScript 诞生 以 来 ， 用 这 门 语 言 编写 网 页 的 开发 人 员 有 了 极 大 的 增长 。 与 此 同时 ，JavaScript 
代码 的 执行 效率 也 越 来 越 受 到 关注 。 因 为 JavaScript 最 初 是 一 个 解释 型 语言 ， 执 行 速度 要 比 编译 型 语言 
慢 得 多 。Chrome 是 第 一 款 内 置 优化 引擎， 将 JavaScript 编译 成 本 地 代码 的 浏览 器 。 此 后 ， 主 流 浏览 器 纷 
纷 效 仿 ， 陆 续 实 现 了 JavaScript 的 编译 执行 。 

即使 到 了 编译 执行 JavaScript 的 新 阶段 ， 仍 然 会 存在 低 效率 的 代码 。 不 过 ， 还 是 有 一 些 方式 可 以 改 
进 代码 的 整体 性 能 的 。 



























































24.2.1 注意 作用 域 


第 4 章 讨论 了 JavaScript 中 “作用 域 ”的 概念 以 及 作用 域 链 是 如 何 运作 的 。 随 着 作用 域 链 中 的 作用 
域 数量 的 增加 ,访问 当前 作用 域 以 外 的 变量 的 时 间 也 在 增加 。 访 问 全 局 变量 总 是 要 比 访问 局 部 变量 慢 ， 
因为 需要 遍历 作用 域 链 。 只 要 能 减少 花费 在 作用 域 链 上 的 时 间 ， 就 能 增加 脚本 的 整体 性 能 。 

1. 避 免 全 局 查找 

可 能 优化 脚本 性 能 最 重要 的 就 是 注意 全 局 查找 。 使 用 全 局 变量 和 函数 肯定 要 比 局 部 的 开销 更 大 ， 
为 要 涉及 作用 域 链 上 的 查找 。 请 看 以 下 函数 : 

function updateUI(){ 

var imgs = document .getElementsByTagName ("img"); 


for (var i=0, len=imgs.length; i < len; I++){ 
imgs[i].title = document.title + " image " + i; 












































} 
Var msg = document .getElementBylId("msg"); 
msg.innerHTML = "Update complete."; 

} 


该 函数 可 能 看 上 去 完全 正常 , 但 是 它 包 含 了 三 个 对 于 全 局 aocument 对 象 的 引用 。 如 果 在 页 面 上 有 
多 个 图 片 ， 那 么 for 循环 中 的 aocument 引用 就 会 被 执行 多 次 甚至 上 百 次 ， 每 次 都 会 要 进行 作用 域 链 
查找 。 通 过 创建 一 个 指向 aocument 对 象 的 局 部 变量 ,就 可 以 通过 限制 一 次 全 局 查找 来 改进 这 个 函数 的 
性 能 : 
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function updqateUI(){ 
va doc = document; 
var imgs = doc.getElementsByTagName ("img"); 
for (var i=0, len=imgs.length; i < len; i++){ 
imgs[i] .title = doc.title + " image " + i; 


} 


Var msg = doc.getElementById("msg"); 
msg.innerHTML = "Update complete."; 
} 


这 里 ,首先 将 document 对 象 存在 本 地 的 doc 变量 中 ;然后 在 余下 的 代码 中 替换 原来 的 document。 
与 原来 的 的 版 本 相 比 ， 现 在 的 函数 只 有 一 次 全 局 查找 ， 肯 定 更 快 。 

将 在 一 个 函数 中 会 用 到 多 次 的 全 局 对 象 存储 为 局 部 变量 总 是 没 错 的 。 

2. 避免 with 语句 

在 性 能 非常 重要 的 地 方 必须 避免 使 用 with 语句 。 和 函数 类 似 ，with 语句 会 创建 自己 的 作用 域 ， 
此 会 增加 其 中 执行 的 代码 的 作用 域 链 的 长 度 。 由 于 额外 的 作用 域 链 查找 ， 在 with 语句 中 执行 的 代码 
肯定 会 比 外 面 执行 的 代码 要 慢 。 

必须 使 用 with 语句 的 情况 很 少 ， 因 为 它 主要 用 于 消除 额外 的 字符 。 在 大 多 数 情 况 下 ， 可 以 用 局 部 
变量 完成 相同 的 事情 而 不 引入 新 的 作用 域 。 下 面 是 一 个 例子 : 

function updqateBodqy () { 

with(dqocument .boqy){ 
alert (tagName) ; 


innerHTML = "Hello world!"; 
} 















































} 
这 段 代码 中 的 with 语句 让 document .body 变 得 更 容易 使 用 。 其 实 可 以 使 用 局 部 变量 达到 相同 的 
效果 ， 如 下 所 示 : 
function updateBody()t{ 
Var body = document .body 


alert (body.tagName); 
body.innerHTML = "Hello world!"; 

















} 

虽然 代码 稍微 长 了 点 ， 但 是 阅读 起 来 比 with 语句 版 本 更 好 ， 它 确保 让 你 知道 tagName 和 
innerHTML 是 属于 哪个 对 象 的 。 同 时 ， 这 段 代 码 通过 将 document .body 存储 在 局 部 变量 中 省 去 了 突 
外 的 全 局 查找 。 








24.2.2 选择 正确 方法 


和 其 他 语言 一 样 , 性 能 问题 的 一 部 分 是 和 用 于 解决 问题 的 算法 或 者 方法 有 关 的 。 老 练 的 开发 人 员 根 
据 经 验 可 以 得 知 哪 种 方法 可 能 获得 更 好 的 性 能 。 很 多 应 用 在 其 他 编程 语言 中 的 技术 和 方法 也 可 以 在 
JavaScript 中 使 用 。 

1. 避免 不 必要 的 属性 查找 

在 计算 机 科学 中 ， 算 法 的 复杂 度 是 使 用 O 符号 来 表示 的 。 最 简单 、 最 快捷 的 算法 是 常数 值 即 0(1)。 
之 后 ， 算 法 变 得 越 来 越 复杂 并 花 更 长 时 间 执 行 。 下 面 的 表格 列 出 了 JavaScript 中 常见 的 算法 类 型 。 
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标 记 名 称 描 述 

O() 常数 不 管 有 多 少 值 ， 执 行 的 时 间 都 是 恒定 的 。 一 般 表 示 简 单 值 和 存储 在 变量 中 的 值 

O(log n) 对 数 总 的 执行 时 间 和 值 的 数量 相关 ， 但 是 要 完成 算法 并 不 一 定 要 获取 每 个 值 。 例 如 : 二 分 查找 
O(n) 线性 总 执行 时 间 和 值 的 数量 直接 相关 。 例 如 : 遍历 某 个 数组 中 的 所 有 元 素 

O(n) 平方 总 执行 时 间 和 值 的 数量 有 关 ， 每 个 值 至 少 要 获取 nn 次。 例如 : 插入 排序 


























常数 值 ， 即 O(1)， 指 代 字 面值 和 存储 在 变量 中 的 值 。 符 号 O(1) 表 示 无 论 有 和 多少 个 值 ， 需 要 获取 常 
量 值 的 时 间 都 一 样 。 获 取 常 量 值 是 非常 高 效 的 过 程 。 请 看 下 面 代 码 : 
Var Value = 5; 


Var sum = 10 + value; 
alert (sum); 


该 代码 进行 了 四 次 常量 值 查找 : 数字 5， 变 量 value， 数 字 10 和 变量 sum。 这 上段 代码 的 整体 复杂 
度 被 认为 是 0(1)。 

在 JavaScript 中 访问 数组 元 素 也 是 一 个 0(1) 操 作 ， 和 简单 的 变量 查找 效率 一 样 。 所 以 以 下 代码 和 前 
面 的 例子 效率 一 样 : 

var values = [5, 10]; 


var sum = values[0] + values[1]; 
alert (sum); 


使 用 变量 和 数组 要 比 访问 对 象 上 的 属性 更 有 效率 , 后 者 是 一 个 O(n) 操 作 。 对象 上 的 任何 属性 查找 都 
要 比 访问 变量 或 者 数组 花费 更 长 时 间 ， 因 为 必须 在 原型 链 中 对 拥有 该 名 称 的 属性 进行 一 次 搜索 。 简 而 言 
之 , 属性 查找 越 多 ， 执 行 时 间 就 越 长 。 请 看 以 下 内 容 : 

Var values = { first: 5, second: 10}; 


Var sum = values.first + values.second; 
alert (sum); 


这 上段 代码 使 用 两 次 属性 查找 来 计算 sum 的 值 。 进行 一 两 次 属性 查找 并 不 会 导致 显著 的 性 能 问题 , 但 
是 进行 成 百 上 千 次 则 肯定 会 减 慢 执 行 速度 。 
注意 获取 单个 值 的 多 重 属性 查找 。 例 如 ， 请 看 以 下 代码 : 


var query = window.location.href.substring (window.location.href.indexOf ("?")); 



























































在 这 段 代 码 中 ， 有 “6 次 属性 查找 : window.location.href.substring() 有 3 次 ，window. 
location.href.indexof() 又 有 3 次 。 只 要 数 一 数 代 码 中 的 点 的 数量 , 就 可 以 确定 属性 查找 的 次 数 了 。 
这 段 代码 由 于 两 次 用 到 了 winaow. location.href， 同 样 的 查找 进行 了 两 次 ， 因 此 效率 特别 不 好 。 

一 旦 多 次 用 到 对 象 属性 , 应 该 将 其 存储 在 局 部 变量 中 。 第 一 次 访问 该 值 会 是 O(n), 然而 后 续 的 访问 
都 会 是 O(1)， 就 会 节省 很 多 。 例 如 ， 之 前 的 代码 可 以 如 下 重 写 : 


Var url = window.location.href; 
Var query = url.substring(url.indexOf ("?")); 


这 个 版 本 的 代码 只 有 4 次 属性 查找 ， 相 对 于 原始 版 本 节省 了 33%。 在 更 大 的 脚本 中 进行 这 种 优化 ， 
倾向 于 获得 更 多 改进 。 
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一 般 来 讲 ， 只 要 能 减少 算法 的 复杂 度 ， 就 要 尽 可 能 减少 。 尽 可 能 多 地 使 用 局 部 变量 将 属性 查找 替换 
为 值 查找 。 进一步 讲 , 如 果 即 可 以 用 数字 化 的 数组 位 置 进行 访问 , 也 可 以 使 用 命名 属性 ( 诸如 NodeList 
对 象 )， 那 么 使 用 数字 位 置 。 

2. 优化 循环 

循环 是 编程 中 最 常见 的 结构 ， 在 JavaScript 程序 中 同样 随处 可 见 。 优 化 循环 是 性 能 优化 过 程 中 很 重 
要 的 一 个 部 分 ， 由 于 它们 会 反复 运行 同一 段 代码 ， 从 而 自动 地 增加 执行 时 间 。 在 其 他 语言 中 对 于 循环 优 
化 有 大 量 研究 ， 这 些 技术 也 可 以 应 用 于 JavaScript。 一 个 循环 的 基本 优化 步骤 如 下 所 示 。 

(1) 减 值 迁 代 一 一 大 多 数 循环 使 用 一 个 从 0 开始 、 增 加 到 某 个 特定 值 的 迭代 絮 。 在 很 多 情况 下 ， 从 
最 大 值 开始 ， 在 循环 中 不 断 减 值 的 迭代 器 更 加 高 效 。 

(2) 简化 终止 条 件 一 一 由 于 每 次 循环 过 程 都 会 计算 终止 条 件 ， 所 以 必须 保证 它 尽 可 能 快 。 也 就 是 说 
避免 属性 查找 或 其 他 O(n) 的 操作 。 

(3) 简化 循环 体 一 一 循环 体 是 执行 最 多 的 ， 所 以 要 确保 其 被 最 大 限度 地 优化 。 确 保 没 有 某 些 可 以 被 
很 容易 移出 循环 的 密集 计算 。 

(4) 使 用 后 测试 循环 一 一 最 常用 for 循环 和 while 循环 都 是 前 测试 循环 。 而 如 dao-while 这 种 后 测 
试 循环 ， 可 以 避免 最 初 终止 条 件 的 计算 ， 因 此 运行 更 快 。 

用 一 个 例子 来 描述 这 种 改动 。 以 下 是 一 个 基本 的 for 循环 : 
for (Var i=0; i < values.length; I++){ 


process (values[i]); 


} 

这 上段 代码 中 变量 i 从 0 递增 到 values 数组 中 的 元 素 总 数 。 假设 值 的 处 理 顺 序 无 关 紧要 , 那么 循环 
可 以 改 为 硅 减 值 ， 如 下 所 示 : 

for (var i=values.length -1; i >= 0; i--)t{ 


process (values[i]); 


} 

这 里 ， 变 量 i 每 次 循环 之 后 都 会 减 1。 在 这 个 过 程 中 ， 将 终止 条 件 从 value.1length 的 O(n) 调 用 
简化 成 了 0 的 O(1) 调 用 。 由 于 循环 体 只 有 一 个 语句 ， 无 法 进一步 优化 。 不 过 循环 还 能 改 成 后 测试 循环 ， 
如 下 : 

var i=values.length -1; 

if (i > -1){ 

dol{ 
process (values[i]); 


}while(--i >= 0); 
} 


此 处 主要 的 优化 是 将 终止 条 件 和 自 减 操作 符 组 合成 了 单个 语句 。 这 时 ,任何 进一步 的 优化 只 能 在 
process () 函数 中 进行 了 ， 因 为 循环 部 分 已 经 优化 完全 了 。 

记 住 使 用 “后 测试 ”循环 时 必须 确保 要 处 理 的 值 至 少 有 一 个 。 空 数组 会 导致 多 余 的 一 次 循环 而 “前 
测试 ”循环 则 可 以 避免 。 

3. 展开 循环 

当 循环 的 次 数 是 确定 的 ,消除 循环 并 使 用 多 次 函数 调用 往往 更 快 。 请 看 一 下 前 面 的 例子 。 如 果 数 组 
的 长 度 总 是 一 样 的 ， 对 每 个 元 素 都 调用 process () 可 能 更 优 ， 如 以 下 代码 所 示 : 
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// 消 除 循环 


process (values[0]); 
process (Values [1]) ; 
process (values [2]) ; 


这 个 例子 假设 values 数组 里 面 只 有 3 个 元 素 ， 直 接 对 每 个 元 素 调用 process () 。 这 样 展开 循环 
可 以 消除 建立 循环 和 处 理 终止 条 件 的 额外 开销 ， 使 代码 运行 得 更 快 。 























如 有 果 循 环 























! 的 迭代 次 数 不 能 事先 确定 ， 那 可 以 考虑 使 用 一 种 叫做 Duff 装置 的 技术 。 这 个 技术 是 以 
其 创建 者 Tom Duff 命 名 的 ， 他 最 早 在 C 语言 中 使 用 这 项 技术 。 正 是 Jeff Greenberg 用 JavaScript 实现 了 
































Du 任 装 置 。Du 作 装置 的 基本 概念 是 通过 计算 迭代 的 次 数 是 否 为 8 的 倍数 将 一 个 循环 展开 为 一 系列 语句 。 


请 看 以 下 代码 : 








//credit: Jeff Greenberg for JS implementation of Duff's Device 
// 假 设 values.length > 0 
Var iterations = Math.ceil(values.length / 8); 


var startAt 


% 


values.length % 8; 


var TS ,0s 
do { 
switch(startAt)t{ 

case 0: process (values[i++]); 
case 7: process (values[i++]); 
case 6: process(values[i++] ); 
case 5: process (values[i++] ); 
case 4: process(values[i++]); 
case 3: process (values[i++]); 
case 2: process (values[i++]); 
case 1: process (values[i++]); 


} 








startAt = 0; 


} while 


(--iterations > 0); 





Du 人 ff 装置 的 实现 是 通过 将 values 数组 中 元 素 个 数 除 以 8 来 计算 出 循环 需要 进行 多 少 次 迭代 的 。 然 
后 使 用 取 整 的 上 限 函 数 确保 结果 是 整数 。 如 果 完 全 根据 除 8 来 进行 迭代 ,可 能 会 有 一 些 不 能 被 处 理 到 的 





元 素 ， 这 个 数量 保存 在 startat 变量 中 。 首 次 执行 该 循环 时 , 会 检查 startat 变量 看 有 需要 多 少 额 多 
调用 。 例 如 ， 如 果 数 组 中 有 10 个 值 ，startat 则 等 于 2, 那么 最 开始 的 时 候 process () 则 只 会 被 调用 
2 次 。 在 接 下 来 的 循环 中 ，startat 被 重 置 为 0， 这 样 之 后 的 每 次 循环 都 会 调用 8 次 process () 。 展 开 






























































循环 可 以 提升 大 数据 集 的 处 理 速度 。 


由 Andrew B. King 所 著 的 Speed Up Your Site ( New Riders, 2003 ) 提出 了 一 个 更 快 的 Du 任 装 置 技 术 ， 


将 ao-while 循环 分 成 2 个 单独 的 循环 。 以 下 是 例子 : 


//credit: Speedq Up Your Site (New Riders, 2003) 
var iterations = Math.floor(values.length / 8); 


var leftover = values.length % 8; 
Var 1. EQ 


IE (leftover > 0){ 

do { 
process (values[i++] ); 
} while (--leftover > 0); 





process (values[i++] ); 
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} while 
在 这 个 实现 中 , 剩余 的 计算 部 分 不 会 在 实际 循环 中 处 理 ， 而 是 在 一 个 初始 化 循环 中 进行 除 以 8 的 操 


作 。 当 处 理 掉 了 额外 的 元 素 , 继续 执行 每 次 调用 8 次 process () 的 主 循环 。 这 个 方法 几乎 比 原始 的 Duff 


process (Values [i++ 
process (values [i++ 
process (values [i++ 
process (values [i++ 
process (values [i++ 
process (values [i++ 


process (values [i++]); 
(--iterations > 0); 


装置 实现 快 上 40%。 


针对 大 数据 集 使 用 展 天 





] ) 
] ) 
]) 3; 
]); 
] ) 
] ) 
) 





F 循 环 可 以 节省 很 多 时 间 ， 但 对 于 小 数据 集 ， 额 外 的 开销 则 可 能 得 不 偿 失 。 它 


是 要 花 更 多 的 代码 来 完成 同样 的 任务 ， 如 果 处 理 的 不 是 大 数据 集 ， 一 般 来 说 并 不 值得 。 
4. 避免 双重 解释 


当 JavaScript 代码 想 解 析 JavaScript 的 时 候 就 会 存在 双重 解释 惩罚 。 当 
Function 构造 函数 以 及 使 用 setTimeout () 传 一 个 字符 串 参 数 时 都 会 发 生 这 种 


// 某 些 代码 求 值 一 避免 11! 


eval("alert('Hello world!')" 


// 创 建新 函数 一 避免 11 


Var sayHi = new Function("alert('Hello world!')" 


// 设 置 超时 一 一 避免 !! 


setTimeout ("alert('Hello world!' 


在 以 上 这 些 例子 中 ， 都 要 解析 








) 








» 500)s 
包含 了 JavaScript 代码 的 字符 串 。 这 个 操作 是 不 能 在 初始 的 解析 过 程 
中 完成 的 ， 因 为 代码 是 包含 在 字符 串 中 的 ， 也 就 是 说 在 JavaScript 代码 运行 的 同时 必须 新 启动 一 个 解 
析 吉 来 解析 新 的 代码 。 实 例 化 一 个 新 的 解析 器 有 不 容 忽视 的 开销 ， 所 以 这 种 代码 要 比 直 接 解 析 慢 得 多 。 

对 于 这 几 个 例子 都 有 另外 的 办 法 。 只 有 极 少 的 情况 下 eval () 是 绝对 必须 的 , 所 以 尽 可 能 避免 使 用 。 
在 这 个 例子 中 , 代码 其 实 可 以 直接 内 内在 原 代 码 中 。 对 于 Function 构造 函数 , 完全 可 以 直接 写成 一 般 








情况 。 下 面 有 一 些 例子 : 

















的 函数 ， 调 用 setTimeout () 可 以 传人 函数 作为 第 一 个 参数 。 以 下 是 一 些 例子 : 


/ /已 修正 
alert('Hello world!'); 


// 创 建新 函数 一 已 修正 


var sayHi = function(){ 


J 


// 设 置 一 个 超时 


alert('Hello world!' 





已 修正 


setTimeout (function()t{ 


}, 





alert('Hello world!' 
500) 


)s 


如 果 要 提高 代码 性 能 ， 尽 可 能 避免 出 现 需要 按照 JavaScript 解 释 的 字符 串 。 


5. 性 能 的 其 他 注意 事项 


当 评 估 脚 本 性 能 的 时 候 , 还 有 其 他 一 些 可 以 考虑 的 东西 。 下 面 并 非 主 要 的 问题 , 不 过 如 果 使 用 得 当 
也 会 有 相当 大 的 提升 。 
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口 原生 方法 较 快 一 一 只 要 有 可 能 , 使 用 原生 方法 而 不 是 自己 用 JavaScript 重 写 一 个 。 原生 方法 是 用 
诸如 C/C++ 之 类 的 编译 型 语言 写 出 来 的 ， 所 以 要 比 JavaScript 的 快 很 多 很 多 。JavaScript 中 最 容 
易 被 忘记 的 就 是 可 以 在 Math 对 象 中 找到 的 复杂 的 数学 运算 ; 这 些 方法 要 比 任何 用 JavaScript 写 
的 同样 方法 如 正弦 、 余 弦 快 的 多 。 

口 Switch 语句 较 快 如 果 有 一 系列 复杂 的 if-else 语句 ， 可 以 转换 成 单个 switch 语句 则 可 
以 得 到 更 快 的 代码 。 还 可 以 通过 将 case 语句 按照 最 可 能 的 到 最 不 可 能 的 顺序 进行 组 织 , 来 进 一 
步 优 化 switch 语句 。 

口 位 运算 符 较 快 当 进 行 数学 运算 的 时 候 ， 位 运算 操作 要 比 任何 布尔 运算 或 者 算数 运算 快 。 选 

择 性 地 用 位 运算 替换 算数 运算 可 以 极 大 提升 复杂 计算 的 性 能 。 诸 如 取 模 ， 逻 辑 与 和 逻辑 或 都 可 

以 考虑 用 位 运算 来 替换 。 


24.2.3 ”最 小 化 语句 数 


JavaScript 代码 中 的 语句 数量 也 影响 所 执行 的 操作 的 速度 。 完 成 多 个 操作 的 单个 语句 要 比 完成 单个 
操作 的 多 个 语句 快 。 所 以 ， 就 要 找 出 可 以 组 合 在 一 起 的 语句 ， 以 减少 脚本 整体 的 执行 时 间 。 这 里 有 几 个 
可 以 参考 的 模式 。 

1. 多 个 变量 声明 

有 个 地 方 很 多 开发 人 员 都 容易 创建 很 多 语句 ， 那 就 是 多 个 变量 的 声明 。 很 容易 看 到 代码 中 由 多 个 
var 语句 来 声明 多 个 变量 ， 如 下 所 示 : 

















































































































//4 个 语 负 一 很 浪费 

Var Count = 53 

var color = "blue"; 
var values = [1,2,3]; 


Var now = new Date(); 
在 强 类 型 语言 中 ,不同 的 数据 类 型 的 变量 必须 在 不 同 的 语句 中 声明 。 然 而 ， 在 JavaScript 中 所 有 的 
变量 都 可 以 使 用 单个 var 语句 来 声明 。 前 面 的 代码 可 以 如 下 重 写 : 























// 一 个 语 身 

var .COunt. = 5; 
color = "blue", 
values = [1,2,3], 


now = new Date(); 

此 处 ， 变 量 声明 只 用 了 一 个 var 语句 ， 之 间 由 逗号 隔 开 。 在 大 多 数 情况 下 这 种 优化 都 非常 容易 做 ， 
并 且 要 比 单个 变量 分 别 声明 快 很 多 。 

2. 插入 迭代 值 

当 使 用 迭代 值 ( 也 就 是 在 不 同 的 位 置 进行 增加 或 减少 的 值 ) 的 时 候 ， 尽 可 能 合并 语句 。 请 看 以 下 
代码 : 

Var name = values[i]; 

前 面 这 2 句 语 句 各 只 有 一 个 目的 : 第 一 个 从 values 数组 中 获取 值 ， 然 后 存储 在 name 中 ; 第 二 个 
给 变量 i 增加 1。 这 两 句 可 以 通过 迭代 值 插入 第 一 个 语句 组 合成 一 个 语句 ， 如 下 所 示 : 


















































Var name = values[i++]; 
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这 一 个 语句 可 以 完成 和 前 面 两 个 语句 一 样 的 事情 。 因 为 自 增 操作 符 是 后 级 操作 符 ，i 的 值 只 有 在 语 
句 其 他 部 分 结束 之 后 才 会 增加 。 一 旦 出 现 类 似 情况 ， 都 要 尝试 将 迭代 值 插 入 到 最 后 使 用 它 的 语句 中 去 。 

3. 使 用 数组 和 对 象 字 面 量 

本 书 中 ,你 可 能 看 过 两 种 创建 数组 和 对 象 的 方法 : 使 用 构造 函数 或 者 是 使 用 字面 量 。 使 用 构造 函数 
总 是 要 用 到 更 多 的 语句 来 插入 元 素 或 者 定义 属性 ,而 字面 量 可 以 将 这 些 操 作 在 一 个 语句 中 完成 。 请 看 以 
下 例子 : 

// 用 4 个 语句 创 建 和 初始 化 数组 一 一 浪费 


Var Values = new Array(); 





























values[0] = 123; 
values[1] = 456; 
values[2] = 789; 


// 用 4 个 语 身 创 建 和 初始 化 对 象 一 浪费 

Var person = new Object() 

person.name = "Nicholas"; 

person.age = 29; 

person.sayName = function()f{ 
alert (this.name); 


> 
这 有 段 代码 中 ， 只 创建 和 初始 化 了 一 个 数组 和 一 个 对 象 。 各 用 了 4 个 语句 : 一 个 调用 构造 函数 ,其 他 
3 个 分 配 数 据 。 其 实 可 以 很 容易 地 转换 成 使 用 字面 量 的 形式 ， 如 下 所 示 : 


// 只 用 一 条 语 身 创 建 和 初始 化 数组 
Var values = [123, 456, 789]; 




















// 只 用 一 条 语 身 创建 和 初始 化 对 象 


Var person = { 
name : "Nicholas", 
age : 29, 


sayName : function()f{ 
alert (this.name); 

} 
}3 
重 写 后 的 代码 只 包含 两 条 语句 ， 一 条 创建 和 初始 化 数组 ， 另 一 条 创建 和 初始 化 对 象 。 之 前 用 了 八条 
语句 的 东西 现在 只 用 了 两 条 ,减少 了 75% 的 语句 量 。 在 包含 成 千 上 万 行 JavaScript 的 代码 库 中 ， 这 些 优 
化 的 价值 更 大 。 

只 要 有 可 能 ， 尽 量 使 用 数组 和 对 象 的 字面 量 表 达 方 式 来 消除 不 必要 的 语句 。 


























在 JIE6 和 更 早 版 本 中 使 用 字面 量 有 微小 的 性 能 惩罚 。 不 过 这 些 问 题 在 IE7 中 已 经 


解决 。 





24.2.4 优化 DOM 交 互 

在 JavaScript 各 个 方面 中 ，DOM 毫 无 疑问 是 最 慢 的 一 部 分 。DOM 操作 与 交互 要 消耗 大 量 时 间 ， 
因为 它们 往往 需要 重新 泻 染 整 个 页 面 或 者 某 一 部 分 。 进 一 步 说 ， 看 似 细 微 的 操作 也 可 能 要 花 很 久 来 执 
行 , 因为 DOM 要 处 理 非 常 多 的 信息 。 理 解 如 何 优化 与 DOM 的 交互 可 以 极 大 得 提高 脚本 完成 的 速度 。 
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1. 最 小 化 现场 更 新 

一 旦 你 需要 访问 的 DOM 部 分 是 已 经 显示 的 页 面 的 一 部 分 ， 那么 你 就 是 在 进行 一 个 现场 更 新 。 之 所 
以 叫 现场 更 新 ， 是 因为 需要 立即 ( 现场 ) 对 页 面 对 用 户 的 显示 进行 更 新 。 每 一 个 更 改 ,不 管 是 搬入 单个 
字符 ， 还 是 移 除 整 个 片段 ， 都 有 一 个 性 能 惩罚 ， 因 为 浏览 器 要 重新 计算 无 数 尺 寸 以 进行 更 新 。 现 场 更 新 
进行 得 越 多 ， 代 码 完成 执行 所 花 的 时 间 就 越 长 ; 完成 一 个 操作 所 需 的 现场 更 新 越 少 ,代码 就 越 快 。 请 看 
以 下 例子 : 

Var list = qocument .getElementByIQ("myList") ， 


item, 
了 























for (i=0; i < 10; I++) { 
item = document.createElement ("1i"); 
list.appendChild(item); 
item.appendChild(document.createTextNode("Item " + 1i)); 





} 


这 段 代码 为 列表 添加 了 10 个 项 目 。 添 加 每 个 项 目 时 ， 都 有 2 个 现场 更 新 : 一 个 添加 <1i> 元 素 ， 男 
一 个 给 它 添加 文本 节点 。 这 样 添加 10 个 项 目 ， 这 个 操作 总 共 要 完成 20 个 现场 更 新 。 

要 修正 这 个 性 能 瓶颈 , 需要 减少 现场 更 新 的 数量 。 一般 有 2 种 方法 。 第 一 种 是 将 列表 从 页 面 上 移 除 ， 
最 后 进行 更 新 ， 最 后 再 将 列表 搬 回 到 同样 的 位 置 。 这 个 方法 不 是 非常 理想 ， 因 为 在 每 次 页 面 更 新 的 时 候 
它 会 不 必要 的 闪烁 。 第 二 个 方法 是 使 用 文档 片段 来 构建 DOM 结构 ， 接 着 将 其 添加 到 List 元 素 中 。 这 
个 方式 避免 了 现场 更 新 和 页 面 闪烁 问题 。 请 看 下 面 内 容 : 

Var list = qocument .getElementById("myList"), 

fragment = document .createDocumentFragment(), 


item, 
了 













































































for (i=0; i < 10; I++) { 
item = document.createElement ("1i"); 
fragment .appendChild(item); 
item.appendChild(document.createTextNode("Item " + 1i)); 





} 
list.appendChild(fragment); 


在 这 个 例子 中 只 有 一 次 现场 更 新 , 它 发 生 在 所 有 项 目 都 创建 好 之 后 。 文档 片段 用 作 一 个 临时 的 占 位 
符 , 放 置 新 创建 的 项 目 。 然 后 使 用 appendchila() 将 所 有 项 目 添 加 到 列表 中 。 记 住 , 当 给 appendqchila() 
传人 文档 片段 时 ， 只 有 片段 中 的 子 节 点 被 添加 到 目标 ， 片 段 本 身 不 会 被 添加 的 。 

一 旦 需要 更 新 DOM， 请 考虑 使 用 文档 片段 来 构建 DOM 结构 ， 然 后 再 将 其 添加 到 现存 的 文档 中 。 

2. 使 用 innerHTML 

有 两 种 在 页 面 上 创建 DOM 节点 的 方法 : 使 用 诸如 createElement () 和 appendchild() 之 类 的 
DOM 方法 ， 以 及 使 用 innerHTML。 对 于 小 的 DOM 更 改 而 言 ， 两 种 方法 效率 都 差不多 。 然 而 ， 对 于 大 
的 DOM 更 改 , 使 用 innerHTML 要 比 使 用 标准 DOM 方法 创建 同样 的 DOM 结构 快 得 多 。 
当 把 innerHTML 设置 为 其 个 值 时 ， 后 台 会 创建 一 个 HTML 解析 器 ， 然 后 使 用 内 部 的 DOM 调用 来 
创建 DOM 结构 ,而 非 基于 JavaScript 的 DOM 调用 。 由 于 内 部 方法 是 编译 好 的 而 非 解释 执行 的 , 所 以 执 
行 快 得 多 。 前 面 的 例子 还 可 以 用 innerHTML 改写 如 下 : 
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document .getElementById("myList"), 
wo 


for (i=0; i < 10; i++) { 
html += "<li>Item " + i + "</li>"; 


} 


list.innerHTML = html; 

这 段 代 码 构 建 了 一 个 HTML 字符 串 , 然后 将 其 指定 到 1ist .innerHTML, 便 创建 了 需要 的 DOM 结 
构 。 虽 然 字 符 串 连接 上 总 是 有 点 性 能 损失 ， 但 这 种 方式 还 是 要 比 进 行 多 个 DOM 操作 更 快 。 

使 用 innerHTML 的 关键 在 于 ( 和 其 他 DOM 操作 一 样 ) 最 小 化 调用 它 的 次 数 。 例 如 ， 下 面 的 代码 
在 这 个 操作 中 用 到 innerHTML 的 次 数 太 多 了 : 


var list = dqocument .getElementById("myLiSst" ) ， 
EE 























for (i=0; 1 < 10; 1++) { 
list.innerHTML += "<li>Item " + i + "</li>"; // 避 免 1! 
} 


这 上段 代码 的 问题 在 于 每 次 循环 都 要 调用 innerHTML, 这 是 极其 低 效 的 。 调用 innerHTML 实际 上 就 
是 一 次 现场 更 新 ， 所 以 也 要 如 此 对 待 。 构 建 好 一 个 字符 串 然后 一 次 性 调用 innerHTML 要 比 调用 
innerHTML 多 次 快 得 多 。 

3. 使 用 事件 代理 

大 多 数 Web 应 用 在 用 户 交 互 上 大 量 用 到 事件 处 理 程 序 。 页 面 上 的 事件 处 理 程 序 的 数量 和 页 面 响应 
用 户 交 互 的 速度 之 间 有 个 负 相 关 。 为 了 减轻 这 种 惩罚 ， 最 好 使 用 事件 代理 。 
事件 代理 ， 如 第 13 章 中 所 讨论 的 那样 ， 用 到 了 事件 冒 泡 。 任 何 可 以 冒 泡 的 事件 都 不 仅仅 可 以 在 事 
件 目标 上 进行 处 理 ， 目 标的 任何 祖先 节点 上 也 能 人 处理 。 使 用 这 个 知识 ,就 可 以 将 事件 处 理 程序 附加 到 更 
高 层 的 地 方 负责 多 个 目标 的 事件 处 理 。 如 果 可 能 ， 在 文档 级 别 附 加 事件 处 理 程序 ， 这 样 可 以 处 理 整个 页 
面 的 事件 。 

4. 注意 HTMLCollection 

HTMLCollection 对 象 的 陷阱 已 经 在 本 书 中 讨论 过 了 ， 因 为 它们 对 于 Web 应 用 的 性 能 而 言 是 巨大 
的 损害 。 记 住 , 任何 时 候 要 访问 HTMLCollection, 不 管 它 是 一 个 属性 还 是 一 个 方法 ,都 是 在 文档 上 进 
行 一 个 查询 ， 这 个 查询 开销 很 昂贵 。 最 小 化 访问 HTMLCollection 的 次 数 可 以 极 大 地 改进 脚本 的 性 能 。 

也 许 优化 HrMLcollection 访问 最 重要 的 地 方 就 是 循环 了 。 前 面 提 到 过 将 长 度 计算 移 人 for 循环 
的 初始 化 部 分 。 现 在 看 一 下 这 个 例子 : 


var images = document .getElementsByTagName ("img"), 
i, len; 





































































































for (i=0, len=images.length; i < len; i++){ 
// 处 理 
} 


这 里 的 关键 在 于 长 度 length 存 人 了 len 变量 ,而 不 是 每 次 都 去 访问 HTMLCollection 的 length 
属性 。 当 在 循环 中 使 用 HTMLCollection 的 时 候 , 下 一 步 应 该 是 获取 要 使 用 的 项 目的 引用 ,如 下 所 示 ， 
以 便 避 人 免 在 循环 体内 多 次 调用 HTMLCollection。 
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var images = document .getElementsByTagName ("img"), 
image, 
i, len; 





for (i=0, len=images.length; i < len; i++){ 
image = images[i]; 
// 处 理 

} 


这 上段 代码 添加 了 image 变量 , 保存 了 当前 的 图 像 。 这 之 后 , 在 循环 内 就 没有 理由 再 访问 images 的 
HTMLCollection 了 。 

编写 JavaScript 的 时 候 , 一 定 要 知道 何 时 返回 HTMLCollection 对 象 , 这 样 你 就 可 以 最 小 化 对 他 们 
的 访问 。 发 生 以 下 情况 时 会 返回 HrMLCollection 对 象 : 
口 进行 了 对 getElementsByTagName () 的 调用 ; 
口 获取 了 元 素 的 chilgNodes 属性 ; 
口 获取 了 元 素 的 attributes 属性 ; 
口 访问 了 特殊 的 集合 ， 如 document .forms、document .images 等 。 


要 了 解 当 使 用 HTMLCollection 对 象 时 ， 合 理 使 用 会 极 大 提升 代码 执行 速度 。 
24.3 部署 


也 许 所 有 JavaScript 解决 方案 最 重要 的 部 分 , 便 是 最 后 部 署 到 运营 中 的 网 站 或 者 是 Web 应 用 的 过 程 。 
在 这 之 前 可 能 你 已 经 做 了 相当 多 的 工作 , 为 普通 的 使 用 进行 架构 并 优化 一 个 解决 方案 。 现 在 是 时 候 从 开 
发 环境 中 走出 来 并 进入 Web 阶段 了 ， 在 此 将 会 和 真正 的 用 户 交 互 。 然 而 ， 在 这 之 前 还 有 一 系列 需要 解 
决 的 问题 。 


24.3.1 构建 过 程 


完备 JavaScript 代码 可 以 用 于 部 署 的 一 件 很 重要 的 事情 ， 就 是 给 它 开 发 某 些 类 型 的 构建 过 程 。 软 件 
开发 的 典型 模式 是 写 代码 -编译 -测试 , 即 首先 书写 好 代码 , 将 其 编译 通过 , 然后 运行 并 确保 其 正常 工作 。 
1 于 JavaScript 并 非 一 个 编译 型 语言 , 模式 变 成 了 写 代码 -测试 , 这 里 你 写 的 代码 就 是 你 要 在 浏览 器 中 测 
试 的 代码 。 这 个 方法 的 问题 在 于 它 不 是 最 优 的 ， 你 写 的 代码 不 应 该 原封 不 动 地 放 人 浏览 器 中 ,理由 如 下 
所 示 。 

口 知识 产权 问题 如 果 把 带 有 完整 注释 的 代码 放 到 线 上 ， 那 别人 就 更 容易 知道 你 的 意图 ， 对 它 
再 利用 ， 并 且 可 能 找到 安全 漏洞 。 

口 文件 大 小 书写 代码 要 保证 容易 阅读 ， 才 能 更 好 地 维护 ， 但 是 这 对 于 性 能 是 不 利 的 。 浏 览 
并 不 能 从 额外 的 空白 字符 或 者 是 兄长 的 函数 名 和 变量 名 中 获得 什么 好 处 。 

口 代码 组 织 组 织 代码 要 考虑 到 可 维护 性 并 不 一 定 是 传送 给 浏览 器 的 最 好 方式 。 

基于 这 些 原因 ， 最 好 给 JavaScript 文件 定义 一 个 构建 过 程 。 

构建 过 程 始 于 在 源 控 制 中 定义 用 于 存储 文件 的 逻辑 结构 。 最 好 避免 使 用 一 个 文件 存放 所 有 的 
JavaScript， 遵 循 以 下 面向 对 象 语言 中 的 典型 模式 : 将 每 个 对 象 或 自 定义 类 型 分 别 放 入 其 单独 的 文件 中 。 
这 样 可 以 确保 每 个 文件 包含 最 少量 的 代码 ， 使 其 在 不 引入 错误 的 情况 下 更 容易 修改 。 另 外 ， 在 使 用 像 
CVS 或 Subversion 这 类 并 发 源 控制 系统 的 时 候 ， 这 样 做 也 减少 了 在 合并 操作 中 产生 冲突 的 风险 。 
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记 住 将 代码 分 离 成 多 个 文件 只 是 为 了 提高 可 维护 性 ,， 并非 为 了 部 署 。 要 进行 部 署 的 时 候 ， 需 要 将 这 
些 源 代码 合并 为 一 个 或 几 个 归并 文件 。 推 荐 Web 应 用 中 尽 可 能 使 用 最 少 的 JavaScript 文件 ,是 因为 HTTP 
请 求 是 Web 中 的 主要 性 能 瓶颈 之 一 。 记 住 通过 <script> 标 记 引 用 JavaScript 文件 是 一 个 阻塞 操作 ， 当 
代码 下 载 并 运行 的 时 候 会 停止 其 他 所 有 的 下 载 。 因 此 , 尽量 从 逻辑 上 将 JavaScript 代码 分 组 成 部 署 文件 。 

一 旦 组 织 好 文件 和 目录 结构 ， 并 确定 哪些 要 出 现在 部 署 文 件 中 ， 就 可 以 创建 构建 系统 了 。Ant 构建 
工具 ( http://ant.apache.org ) 是 为 了 自动 化 Java 构建 过 程 而 诞生 的 ， 不 过 因为 其 易 用 性 和 应 用 广泛 ， 而 
在 Web 应 用 开发 人 员 中 也 颇 流 行 ， 诸 如 Julien Lecomte 的 软件 工程 师 ， 已 经 写 了 教程 指导 如 何 使 用 Ant 
进行 JavaScript 和 CSS 的 构建 自动 化 (Lecomte 的 文章 在 www.julienlecomte.net/blog/2007/09/16/ )。 

Ant 由 于 其 简便 的 文件 处 理 能 力 而 非常 适合 JavaScript 编译 系统 。 例 如 ， 可 以 很 方便 地 获得 目录 中 
的 所 有 文件 的 列表 ， 然 后 将 其 合并 为 一 个 文件 ， 如 下 所 示 : 


<project name="JavaScript Project" default="js.concatenate"> 


<!-- 输出 的 目录 --> 


<property name="build.dir" value="./js" /> 


<!-- 包含 源 文件 的 目录 --> 


<property name="src.dir" value="./dev/src" /> 

































































<!-- 合并 所 有 JS 文件 的 目标 --> 
<!-- Credit: Julien Lecomte, http://www.julienlecomte.net/blog/2007/09/16/ --> 
<target name="js.concatenate"> 
<concat destfile="${build.dir}/output.js"> 
<filelist Qiras"s(ere.dir}/je" files="a.Je, bejeS"/> 
<fileset dir="${src.dir}/js" includes="*.js" excludes="a.js, b.js"/> 
</concat> 
</target> 


</project> 


SampleAntDir/build.xml 


该 build.xml 文件 定义 了 两 个 属性 : 输出 最 终 文件 的 构建 目录 , 以 及 JavaScript 源 文件 所 在 的 源 目 录 。 
目标 js .concatenate 使 用 了 <concat> 元 素来 指定 需要 进行 合并 的 文件 的 列表 以 及 结果 文件 所 要 输 
出 的 位 置 。<filelist> 元 素 用 于 指定 ajs 和 b.js 要 首先 出 现在 合并 的 文件 中 ，<fileset> 元 素 指 定 了 
之 后 要 添加 到 目录 中 的 其 他 所 有 文件 ，ajs 和 b.js 除外 。 结 果 文 件 最 后 输出 到 /js/output.js。 

如 果 安 装 了 Ant， 就 可 以 进入 build.xml 文件 所 在 的 目录 ， 并 运行 以 下 命令 : 

ant 

然后 构建 过 程 就 开始 了 ,最 后 生成 合并 了 的 文件 。 如 果 在 文件 中 还 有 其 他 目标 ， 可 以 使 用 以 下 代码 
仅 执 行 js .concatenate 目标 : 



































ant js.concatenate 


可 以 根据 需求 ,修改 构建 过 程 以 包含 其 他 步 又 。 在 开发 周期 中 引入 构建 这 一 步 能 让 你 在 部 署 之 前 对 
JavaScript 文件 进行 更 多 的 处 理 。 





24.3.2 ”验证 
尽管 现在 出 现 了 一 些 可 以 理解 并 支持 JavaScript 的 IDE， 大 多 数 开 发 人 员 还 是 要 在 浏览 器 中 运行 代 
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码 以 检查 其 语法 。 这 种 方法 有 一 些 问题 。 首先 , 验证 过 程 难以 自动 化 或 者 在 不 同系 统 间 直接 移植 。 其 次 ， 
除了 语法 错误 外 ,很 多 问题 只 有 在 执行 代码 的 时 候 才 会 遇 到 ,这 给 错误 留 下 了 空间 ; 有 些 工具 可 以 帮助 
确定 JavaScript 代码 中 潜在 的 问题 ， 其 中 最 著名 的 就 是 Douglas Crockford 的 JSLint (www.jslint.com)。 

JSLint 可 以 查找 JavaScript 代码 中 的 语法 错误 以 及 常见 的 编码 错误 。 它 可 以 发 掘 的 一 些 潜在 问题 
如 下 : 
口 eval () 的 使 用 ; 

口 未 声明 变量 的 使 用 ; 

口 遗漏 的 分 号 ; 

不 恰当 的 换行 ; 

错误 的 逗号 使 用 ; 

语句 周围 遗漏 的 括号 ; 

switch 分 支 语句 中 遗漏 的 break; 

重复 声明 的 变量 ; 

口 with 的 使 用 ; 

口 错误 使 用 的 等 号 〈 替 代 了 双 等 号 或 三 等 号 ); 
口 无 法 到 达 的 代码 。 

为 了 方便 访问 , 它 有 一 个 在 线 版 本 ,不 过 它 也 可 以 使 用 基于 Java 的 Rhino JavaScript 引擎 ( www.mozilla. 
org/rhino/ ) 运行 于 命令 行 模式 下 。 要 在 命令 行 中 运行 JSLint， 首 先 要 下 载 Rhino， 并 从 wwwjslintcom/ 下 
载 Rhino 版 本 的 JSLint。 一 旦 安装 完成 , 便 可 以 使 用 下 面 的 语法 从 命令 行 运行 JSLint 了 : 

java -jar rhino-1.6R7.jar jslint.js [input files] 

如 这 个 例子 : 

Java -jar rhino-1.6R7.jar jslint.js a.js b.js c.js 

如 果 给 定 文件 中 有 任何 语法 问题 或 者 是 潜在 的 错误 ， 则 会 输出 有 关 错 误 和 警告 的 报告 。 如 果 没 有 问 
题 ， 代 码 会 直接 结束 而 不 显示 任何 信息 。 

可 以 使 用 Ant 将 JSLint 作为 构建 过 程 的 一 部 分 运行 ， 添 加 如 下 一 个 目标 : 

<target name="js.verify"> 

<apply executable="java" parallel="false"> 
<fileset dir="${build.dir}" includes="output.js"/> 
<arg line="-jar"/> 
<arg path="${rhino.jar}"/> 
<arg path="${jslint,js}" /> 
<srcfile/> 


</apply> 
</target> 
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口 


















































SampleAntDir/build.xml 


这 个 目标 假设 Rhino jar 文件 的 位 置 已 经 由 叫做 rhino .jar 的 属性 指定 了 ， 同 时 JSLint Rhino 文件 
的 位 置 由 叫做 jslint .js 的 属性 指定 了 。output .js 文件 被 传递 给 JSLint 进行 校 验 , 然后 显示 找到 的 
任何 问题 。 

给 开发 周期 添加 代码 验证 这 个 环节 有 助 于 避免 将 来 可 能 出 现 的 一 些 错误 。 建议 开发 人 员 给 构建 过 程 
加 入 某 种 类 型 的 代码 验证 作为 确定 潜在 问题 的 一 个 方法 ， 防 患 于 未 然 。 
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JavaScript 代码 校 验 工 具 的 列表 可 以 在 附录 了 中 找到 。 


24.3.3 ”上 压缩 


当 谈 及 JavaScript 文件 压缩 ， 其 实在 讨论 两 个 东西 : 代码 长 度 和 配 重 (Wire weight )。 代 码 长 度 指 的 
是 浏览 器 所 需 解 析 的 字 节 数 ， 配 重 指 的 是 实际 从 服务 器 传送 到 浏览 器 的 字 节 数 。 在 Web 开发 的 早期 ， 
这 两 个 数字 几乎 是 一 样 的 ， 因 为 从 服务 器 端 到 客户 端 原封 不 动 地 传递 了 源 文件 。 而 在 今天 的 Web 上 ， 
这 两 者 很 少 相 等 ， 实 际 上 也 不 应 相等 。 

1. 文件 压缩 

因为 JavaScript 并 非 编 译 为 字 节 人 码 ， 而 是 按照 源 代码 传送 的 ， 代 码 文件 通常 包含 浏览 器 执行 所 不 需 
要 的 额外 的 信息 和 格式 。 注 释 , 额外 的 空白 ， 以 及 长 长 的 变量 名 和 函数 名 虽然 提高 了 可 读 性 , 但 却 是 传 
送 给 浏览 器 时 不 必要 的 字 节 。 不 过 ， 我 们 可 以 使 用 压缩 工具 减少 文件 的 大 小 。 

压缩 需 一 般 进行 如 下 一 些 步骤 : 

口 删除 额外 的 空白 (包括 换行 ); 
口 删除 所 有 注释 ; 
口 缩短 变量 名 。 

JavaScript 有 不 少 压缩 工具 可 用 ( 附录 D 中 有 一 个 完整 列表 )， 其 中 最 优秀 的 ( 有 争议 的 ) 是 YUI 压 
缩 器 ,http:/yuilibrary.com /projects/yuicompressoro。YUI 压缩 器 使 用 了 Rhino JavaScript 解析 器 将 JavaScript 
代码 令 牌 化 。 然 后 使 用 这 个 令 牌 流 创建 代码 不 包含 空白 和 注释 的 优化 版 本 。 与 一 般 的 基于 表达 式 的 压缩 
器 不 同 的 地 方 在 于 ，YUI 压 缩 可 以 确保 不 引入 任何 语法 错误 ， 并 可 以 安全 地 缩短 局 部 变量 名 。 

YUI 压缩 器 是 作为 Java 的 一 个 jar 文件 发 布 的 ,名 字 叫 yuicompressor-x.y.z.jar, 其 中 x.y.z 
是 版 本 号 。 在 写本 书 的 时 候 ，2 .3 .5 是 最 新 的 版 本 。 可 以 使 用 以 下 命令 行 格式 来 使 用 YUI 压缩 器 : 


java -jar yuicompressor-x.y.z.jar [options] [input files] 


YUI 压缩 器 的 选项 列 在 了 下 面 的 表格 内 。 









































































































































选 项 描述 

= 显示 帮助 信息 

-0 outputrile 指定 输出 文件 的 文件 名 。 如 果 没 有 该 选项 ， 那 么 输出 文件 名 是 输入 文件 名 加 上 -min。 例 
如 ， 叫 做 input.js 的 输入 文件 ,那么 会 产生 input-min.js 

--line-break column 指定 每 行 多 少 个 字符 之 后 添加 换行 。 默 认 情 况 下 ， 压 缩 过 的 文件 只 输出 为 一 行 ， 可 能 在 
某 些 版 本 控制 系统 中 会 出 错 

-Vv, ~-verbose 详细 模式 ， 输 出 可 以 进行 更 好 压缩 的 提示 和 警告 

hers charses 指定 输入 文件 所 使 用 的 字符 集 。 输 出 文件 会 使 用 同样 的 字符 集 

J 关闭 局 部 变量 替换 

--disable-optimizations 关闭 YUI 压缩 器 的 细节 优化 

-preserve-semi 保留 本 来 要 被 删除 的 无 用 的 分 号 
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例如 ， 以 下 命令 行 可 以 用 来 将 cookieUtil.js 压缩 成 一 个 叫做 cookie.js 的 文件 : 
Java -jar yuicompressor-2.3.5.jar -oOo cookie.js CookieUtil.js 
YUI 压缩 器 也 可 以 通过 直接 调用 java 可 执行 文件 在 Ant 中 使 用 ， 如 下 面 的 例子 所 示 : 


<!-- Credit: Julien Lecomte, http://www.julienlecomte.net/blog/2007/09/16/ --> 
<target name="js.compress"> 
<apply executable="java" parallel="false"> 
<fileset dir="${build.dir}" includes="output.js"/> 
<arg line="-jar"/> 
<arg path="${yuicompressor.jar}"/> 
<arg line="-o ${build.dir}/output-min.js"/> 
<srcfile/> 
</apply> 
</target> 























SampleAntDir/build.xml 


该 目标 包含 了 一 个 文件 output .js， 由 构建 过 程 生成 的 ， 并 传递 给 YUI 压缩 需 。 输 出 文件 指定 为 
同一 目录 下 的 output-min.js。 这 里 假设 yuicompressor.jar 属性 包含 了 YUI 压缩 器 的 jar 文件 
的 位 置 。 然 后 可 以 使 用 以 下 命令 运行 这 个 目标 : 


ant js.compress 


所 有 的 JavaScript 文件 在 部 署 到 生产 环境 之 前 ， 都 应 该 使 用 YUI 压缩 器 或 者 类 似 的 工具 进行 压缩 。 
给 构建 过 程 添加 一 个 压缩 JavaScript 文件 的 环节 以 确保 每 次 都 进行 这 个 操作 。 

2. HTTP 压缩 

配 重 指 的 是 实际 从 服务 器 传送 到 浏览 器 的 字 节 数 。 因 为 现在 的 服务 器 和 浏览 器 都 有 压缩 功能 ， 这 个 
字 节 数 不 一 定 和 代码 长 度 一 样 。 所 有 的 五 大 Web 浏览 器 (IE 、Firefox 、Safari 、Chrome 和 Opera ) 都 支 
持 对 所 接收 的 资源 进行 客户 端 解 压缩 。 这 样 服务 器 端 就 可 以 使 用 服务 器 端 相 关 功 能 来 压缩 JavaScript 文 
件 。 一 个 指定 了 文件 使 用 了 给 定格 式 进 行 了 压缩 的 HTTP 头 包 含 在 了 服务 器 响应 中 。 接 着 浏览 器 会 查看 
该 HITP 头 确定 文件 是 否 已 被 压缩 ， 然 后 使 用 合适 的 格式 进行 解压 缩 。 结 果 是 和 原来 的 代码 量 相 比 在 网 
络 中 传递 的 字 节 数量 大 大 减少 了 。 

对 于 Apache Web 服务 器 ,有 两 个 模块 可 以 进行 HTTP 压缩 :moq_gzip( Apache1.3.x ) 和 mod_qeflate 
(Apache 2.0x )。 对 于 moa_gzip， 可 以 给 httpd.conf 文件 或 者 是 .htaccess 文件 添加 以 下 代码 启用 对 
JavaScript 的 自动 压缩 : 

# 告 诉 mod_zip 要 和 包含 任何 以 .js 结尾 的 文件 

mod_gzip_item include file NSS 

该 行 代码 告诉 mog_zip 要 包含 来 自 浏览 器 请 求 的 任何 以 .js 结尾 的 文件 。 假 设 你 所 有 的 JavaScript 
文件 都 以 .js 结尾 ， 就 可 以 压缩 所 有 请 求 并 应 用 合适 的 HTTP 头 以 表示 内 容 已 被 压缩 。 关 于 modq_zip 
的 更 多 信息 ， 请 访问 项 目 网 站 http://www.sourceforge.net/projects/mod-gzip/o 

对 于 mogd_gdeflate, 可 以 类 似 添加 一 行 代码 以 保证 JavaScript 文件 在 被 发 送 之 前 已 被 压缩 。 将 以 下 
这 一 行 代码 添加 到 httpd.conf 文件 或 者 是 .htaccess 文件 中 : 


# 告 诉 mod_deflate 要 包含 所 有 的 JavaScript 文件 
AddOutputFilterByType DEFLATE application/x-javascript 


注意 这 一 行 代码 用 到 了 响应 的 MIME 类 型 来 确定 是 否 对 其 进行 压缩 。 记 住 虽然 <script> 的 type 
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属性 用 的 是 text/javascript， 但 是 JavaScript 文件 一 般 还 是 用 application/x-javascript 作为 
其 服务 的 MIME 类 型 。 关 于 mod_deflate 的 更 多 信息 ， 请 访问 http://httpd.apache.org/docs/2.0/mod/ 
mod deflate.html。 

mod_gzip 和 mod_deflate 都 可 以 节省 大 约 70% 的 JavaScript 文件 大 小 。 这 很 大 程度 上 是 因为 
JavaScript 都 是 文本 文件 ， 因 此 可 以 非常 有 效 地 进行 压缩 。 减 少 文件 的 配 重 可 以 减少 需要 传输 到 浏览 
的 时 间 。 记 住 有 一 点 点 细微 的 代价 ， 因 为 服务 器 必须 花 时 间 对 每 个 请 求 压 缩 文 件 ， 当 浏览 器 接收 到 这 些 
文件 后 也 需要 花 一 些 时 间 解 压缩 。 不 过 ， 一 般 来 说 ， 这 个 代价 还 是 值得 的 。 











大 部 分 Web 服务 器 ， 开 源 的 或 是 商业 的 ， 都 有 一 些 HTTP 压缩 功能 。 请 查看 服 


务 器 的 文档 说 明 以 确定 如 何 合 适 地 配置 压缩 。 





24.4 小 结 


随 着 JavaScript 开发 的 成 熟 ， 也 出 现 了 很 多 最 佳 实践 。 过 去 一 度 认为 只 是 一 种 爱好 的 东西 现在 变 成 
了 正当 的 职业 ， 同 时 还 需要 经 历 过 去 其 他 编程 语言 要 做 的 一 些 研 究 ， 如 可 维护 性 、 性 能 和 部 署 。 
JavaScript 中 的 可 维护 性 部 分 涉及 到 下 面 的 代码 约定 。 
口 来 自 其 他 语言 中 的 代码 约定 可 以 用 于 决定 何 时 进行 注释 ， 以 及 如 何 进行 缩 进 ， 不 过 JavaScript 
需要 针对 其 松散 类 型 的 性 质 创造 一 些 特殊 的 约定 。 
口 由 于 JavaScript 必须 与 HTML 和 CSS 共存 ， 所 以 让 各 自 完全 定义 其 自己 的 目的 非常 重要 : 
JavaScript 应 该 定义 行为 ，HTML 应 该 定义 内 容 ，CSS 应 该 定义 外 观 。 
口 这 些 职责 的 混淆 会 导致 难以 调试 的 错误 和 维护 上 的 问题 。 
随 着 Web 应 用 中 的 JavaScript 数量 的 增加 ， 性 能 变 得 更 加 重要 ， 因 此 ， 你 需要 牢记 以 下 事项 。 
口 JavaScript 执行 所 花费 的 时 间 直 接 影响 到 整个 Web 页 面 的 性 能 ， 所 以 其 重要 性 是 不 能 忽略 的 。 
口 针对 基于 C 的 语言 的 很 多 性 能 的 建议 也 适用 于 JavaScript， 如 有 关 循 环 性 能 和 使 用 switch 语句 
替代 if 语句 。 
口 还 有 一 个 要 记 住 的 重要 事情 ， 即 DOM 交互 开销 很 大 ， 所 以 需要 限制 DOM 操作 的 次 数 。 
流程 的 最 后 一 步 是 部 署 。 本 章 讨 论 了 以 下 一 些 关键 点 。 
口 为 了 协助 部 署 , 推荐 设置 一 个 可 以 将 JavaScript 合并 为 较 少 文件 ( 理想 情况 是 一 个 ) 的 构建 过 程 。 
口 有 了 构建 过 程 也 可 以 对 源 代码 自动 运行 额外 的 处 理 和 过 滤 。 例如 , 你 可 以 运行 JavaScript 验证 器 
来 确保 没有 语法 错误 或 者 是 代码 没有 潜在 的 问题 。 
口 在 部 署 前 推荐 使 用 压缩 器 将 文件 尽 可 能 变 小 。 
口 和 HTTP 压缩 一 起 使 用 可 以 让 JavaScript 文件 尽 可 能 小 ， 因 此 对 整体 页 面 性 能 的 影响 也 会 最 小 。 
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站 2D 
新 兴 的 API 


本 章 内 容 

口 创建 平滑 的 动画 

口 操作 文件 

口 使 用 Web Workers 在 后 台 执 行 JavaScript 























随 a ns 
] 晶 包含 在 HTML5 规范 中 ， 而 是 各 自 有 各 自 的 规范 。 但 是 ， 它 们 都 属于 “HTMLS5 相关 的 API"。 
本 章 介 绍 的 所 有 API 都 在 持续 制定 中 ， 还 没有 完全 固定 下 来 。 

无 论 如 何 , 浏览 器 已 经 着 手 实现 这 些 API, 而 Web 应 用 开发 人 员 也 都 开始 使 用 它们 了 。 读者 应 该 能 
够 注意 到 ， 其 中 很 多 API 都 带 有 特定 于 浏览 器 的 前 级 ， 比 如 微软 是 ms， 而 Chrome 和 Safari 是 webkit。 
通过 添加 这 些 前 级 ,不同 的 浏览 右 可 以 测试 还 在 开发 中 的 新 API， 不 过 请 记 住 ， 去 掉 前 级 之 后 的 部 分 在 
所 有 浏览 器 中 都 是 一 致 的 。 






































25.1 requestAnimationFrame() 











很 长 时 间 以 来 ， 计 时 器 和 循环 间隔 一 直 都 是 JavaScript 动画 的 最 核心 技术 。 虽 然 CSS 变换 及 动画 为 
Web 开发 人 员 提 供 了 实现 动画 的 简单 手段 ,但 JavaScript 动画 开发 领域 的 状况 这 些 年 来 并 没有 大 的 变化 。 
Firefox 4 最 早 为 JavaScript 动画 添加 了 一 个 新 API， 即 mozRequestAnimationFrame () 。 这 个 方法 会 
告诉 浏览 器 : 有 一 个 动画 开始 了 。 进 而 浏览 器 就 可 以 确定 重 绘 的 最 佳 方式 。 


25.1.1 早期 动画 循环 


在 JavaScript 中 创建 动画 的 典型 方式 , 就 是 使 用 setInterval () 方 法 来 控制 所 有 动画 。 以 下 是 一 个 
使 用 setInterval () 的 基本 动画 循环 : 






































下 



































(function(){ 
function updateAnimations(){ 
doaAnimation1 (); 
doaAnimation2(); 
// 其 他 动画 
} 


setInterval (updateAnimations, 100); 


j (3 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


23.1 requestAnimationFrame() 083 











为 了 创建 一 个 小 型 动画 库 , updateanimations () 方 法 就 得 不 断 循环 地 运行 每 个 动画 , 并 相应 地 改 
变 不 同 元 素 的 状态 ( 例如， 同时 显示 一 个 新 闻 跑马 灯 和 一 个 进度 条 ) 。 如 果 没 有 动画 需要 更 新 ， 这 个 方 
法 可 以 退出 ， 什 么 也 不 用 做 ， 甚 至 可 以 把 动画 循环 停 下 来 ， 等 待 下 一 次 需要 更 新 的 动画 。 
编写 这 种 动画 循环 的 关键 是 要 知道 延迟 时 间 多 长 合适 。 一 方面 , 循环 间隔 必须 足够 短 ， 这 样 才能 让 
不 同 的 动画 效果 显得 更 平滑 流畅 ; 男 一 方面 ,循环 间隔 还 要 足够 长 ,这样 才能 确保 浏览 融 有 能 力 演 染 产 
生 的 变化 。 大 多 数 电脑 显示 器 的 刷新 频率 是 60Hz， 大 概 相当 于 每 秒 钟 重 绘 60 次 。 大 多 数 浏 览 右 都 会 对 
重 绘 操作 加 以 限制 ， 不 超过 显示 器 的 重 绘 频率 ， 因 为 即使 超过 那个 频率 用 户 体 验 也 不 会 有 提升 。 
因此 ,最 平滑 动画 的 最 佳 循环 间隔 是 1000ms/60，, 约 等 于 17ms。 以 这 个 循环 间隔 重 绘 的 动画 是 最 平 
滑 的 ， 因 为 这 个 速度 最 接近 浏览 器 的 最 高 限 速 。 为 了 适应 17ms 的 循环 间隔 ， 多 重 动画 可 能 需要 加 以 节 
制 ， 以 便 不 会 完成 得 太 快 。 
虽然 与 使 用 多 组 setTimeout () 的 循环 方式 相 比 ， 使 用 setInterval () 的 动画 循环 效率 更 高 ,但 
后 者 也 不 是 没有 问题 。 无 论 是 setInterval () 还 是 setTimeout () 都 不 十 分 精确 。 为 它们 传人 的 第 二 
个 参数 ， 实 际 上 只 是 指定 了 把 动画 代码 添加 到 浏览 右 UI 线程 队列 中 以 等 待 执行 的 时 间 。 如 果 队 列 前 面 
已 经 加 入 了 其 他 任务 , 那 动画 代码 就 要 等 前 面 的 任务 完成 后 再 执行 。 简 言 之 ， 以 毫秒 表示 的 延迟 时 间 并 
不 代表 到 时 候 一 定 会 执行 动画 代码 ， 而 仅 代表 到 时 候 会 把 代码 添加 到 任务 队列 中 。 如 果 UI 线程 繁忙 ， 
比如 忙于 处 理 用 户 操 作 ， 那 么 即使 把 代码 加 入 队列 也 不 会 立即 执行 。 


25.1.2 ”循环 间隔 的 问题 


知道 什么 时 候 绘制 下 一 帧 是 保证 动画 平滑 的 关键 。 然而， 直至 最 近 ， 开 发 人 员 都 没有 办 法 确保 浏览 
器 按时 绘制 下 一 帧 。 随 着 <canvas> 元 素 越 来 越 流行 ， 新 的 基于 浏览 器 的 游戏 也 开始 魏 露 头 脚 ， 面 对 不 
十 分 精确 的 setInterval () 和 setTimeout () ， 开 发 人 员 一 筹 莫 展 。 

浏览 器 使 用 的 计时 器 的 精度 进一步 恶化 了 问题 。 具 体 地 说 ,浏览 器 使 用 的 计时 器 并 非 精 确 到 毫秒 级 
别 。 以 下 是 几 个 浏览 器 的 计时 器 精度 。 
口 IE8 及 更 早 版 本 的 计时 咒 精 度 为 15.625ms。 
口 I[E9 及 更 晚 版 本 的 计时 器 精度 为 4ms。 
口 Firefox 和 Safari 的 计时 需 精 度 大 约 为 10ms。 
口 Chrome 的 计时 器 精度 为 4ms。 

IE9 之 前 版 本 的 计时 器 精度 为 13.62Sms, 因此 介 于 0 和 15 之 间 的 任何 值 只 能 是 0 和 15。IE9 把 计时 
器 精度 提高 到 了 4ms, 但 这 个 精度 对 于 动画 来 说 仍然 不 够 明确 。Chrome 的 计时 器 精度 为 4ms, 而 Firefox 
和 Safari 的 精度 是 10ms。 更 为 复杂 的 是 , 浏览 器 都 开始 限制 后 台 标签 页 或 不 活动 标签 页 的 计时 器 。 因此， 
即使 你 优化 了 循环 间隔 ， 结 果 仍 然 只 能 接近 你 想 要 的 效果 。 

































































































































































25.1.3 mozRequestAnimationFrame 





Mozilla 的 Robert O'Callahan 认识 到 了 这 个 问题 ， 提 出 了 一 个 非常 独特 的 方案 。 他 指出 ，CSS 变换 
和 动画 的 优势 在 于 浏览 器 知道 动画 什么 时 候 开 始 ， 因 此 会 计算 出 正确 的 循环 间隔 ， 在 恰当 的 时 候 刷新 
UI。 而 对 于 JavaScript 动画 ,浏览 器 无 从 知晓 什么 时 候 开 始 。 因 此 他 的 方案 就 是 创造 一 个 新 方法 
mozRequestAnimationFrame ()， 通 过 它 告诉 浏览 髓 某 些 JavaScript 代码 将 要 执行 动画 。 这 样 浏 览 
可 以 在 运行 某 些 代码 后 进行 适当 的 优化 。 
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mozRequestAnimationFrame () 方 法 接收 一 个 参数 ， 即 在 重 绘 屏幕 前 调用 的 一 个 函数 。 这 个 函数 
负责 改变 下 一 次 重 绘 时 的 DOM 样式 。 为 了 创建 动画 循环 ， 可 以 像 以 前 使 用 setTimeout () 一 样 ， 把 多 
个 对 mozRequestAnimationFrame () 的 调用 连 级 起 来 。 比 如 : 




















function updateProgress(){ 
var div = document.getElementById("status"); 
div.style.width = (parseInt (div.style.width, 10) + 5) + "%"; 





if ‘(div.style. Left 1 “100%"){ 
mozRequestAnimationFrame (updateProgress); 
} 
} 


mozRequestAnimationFrame (updateProgress); 


因为 mozRequestAnimationFrame () 只 运行 一 次 传人 的 函数 ， 因 此 在 需要 再 次 修改 UI 从 而 生成 
动画 时 ， 需 要 再 次 手工 调用 它 。 同 样 ， 也 需要 同时 考虑 什么 时 候 停止 动画 。 这 样 就 能 得 到 非常 平滑 流畅 
的 动画 。 

目前 来 看 ，mozRequestAnimationFrame() 解 决 了 浏览 器 不 知道 JavaScript 动画 什么 时 候 开 始 、 
不 知道 最 佳 循环 间隔 时 间 的 问题 , 但 不 知道 代码 到 底 什 么 时 候 执行 的 问题 呢 ? 同样 的 方案 也 可 以 解决 这 
个 问题 。 

我 们 传递 的 mozRequestaAnimationFrame () 函数 也 会 接收 一 个 参数 ， 它 是 一 个 时 间 码 (从 1970 
年 1 月 1 日 起 至 今 的 毫秒 数 )， 表 示 下 一 次 重 绘 的 实际 发 生 时 间 。 注 意 ， 这 一 点 很 重要 : 
mozRequestAnimationFrame() 会 根据 这 个 时 间 码 设 定 将 来 的 某 个 时 刻 进行 重 绘 ， 而 根据 这 个 时 间 
码 ， 你 也 能 知道 那个 时 刻 是 什么 时 间 。 然 后 ， 再 优化 动画 效果 就 有 了 依据 。 

要 知道 距离 上 一 次 重 绘 已 经 过 去 了 多 长 时 间 , 可 以 查询 mozaAnimationStartTime, 其 中 包含 上 一 
次 重 绘 的 时 间 码 。 用 传人 回调 函数 的 时 间 码 减 去 这 个 时 间 码 ,就 能 计算 出 在 屏幕 上 重 绘 下 一 组 变化 之 前 
要 经 过 多 长 时 间 。 使 用 这 个 值 的 典型 方式 如 下 : 
























































function draw(timestamp)t{ 


/ /计算 两 次 重 绘 的 时 间 间 陋 


var diff = timestamp - startTime; 
// 使 用 diff 确定 下 一 步 的 绘制 时 间 


// 把 startTime 重 写 为 这 一 次 的 绘制 时 间 
startTime = timestamp; 


// 重 绘 UI 
mozRequestAnimationFrame (draw); 





Var startTime = mozAnimationStartTime; 
mozRequestAnimationFrame (draw); 


这 里 的 关键 是 第 一 次 读 取 mozAnimationSstartTime 的 值 ,必须 在 传递 给 mozRequestAnimation 
Frame() 的 回调 函数 外 面 进 行 。 如 果 是 在 回调 函数 内 部 读 取 mozAnimationstartTime, 得 到 的 值 与 传 
人 的 时 间 码 是 相等 的 。 
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25.1.4 webkitRegquestRAnimationFrame 与 nsReduestaAnimationFrame 


基于 mozRequestAnimationFrame(),Chrome 和 下 10+ 也 都 给 出 了 自己 的 实现 , 分 别 叫 webkit- 
RequestAnimationFrame () 和 msRequestAnimationFrame()。 这 两 个 版 本 与 Mozilla 的 版 本 有 两 个 


方面 的 微小 差异 。 首 先 ， 不 会 给 回调 函数 传递 时 间 码 ， 因此 你 无 法 知道 下 一 次 重 绘 将 发 生 在 什么 时 | 


本。 





其 次 , Chrome 又 增加 了 第 二 个 可 选 的 参数 ,即将 要 发 生变 化 的 DOM 元素。 知道 了 重 绘 将 发 生 在 页 卫 








[中 








哪个 特定 元 素 的 区 域内 ， 就 可 以 将 重 绘 限定 在 该 区 域 中 。 


既然 没有 下 一 次 重 绘 的 时 间 码 ， 那 Chrome 和 下 没有 提供 mozanimationSstartTime 的 实现 也 就 

















很 容易 理解 了 一 一 没有 那个 时 间 码 ， 实 现 这 个 属性 也 没有 什么 用 。 不 过 ，Chrome 倒是 又 提供 了 另 








人 





方法 webkitcancelaAnimationErame() ， 用 于 取消 之 前 计划 执行 的 重 绘 操作 。 


假如 你 不 需要 知道 精确 的 时 间 差 ， 那 么 可 以 在 Firefox 4+、IE10+ 和 Chrome 中 可 以 参考 以 下 模式 创 


建 动画 循环 。 


(function(){ 
function draw(timestamp)t{ 
// 计 算 两 次 重 绘 的 时 间 间 隔 


var drawStart = (timestamp || Date.now() )， 
diff = drawStart - startTime; 





// 使 用 diff 确定 下 一 步 的 绘制 时 间 


// 把 startTime 重 写 为 这 一 次 的 绘制 时 间 
startTime = drawStart; 


// 重 绘 UI 
requestAnimationFrame (draw); 


. 


var requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.webkitRequestAnimationFrame || 
window.msRequestAnimationFrame, 
startTime = window.mozAnimationStartTime || Date.now(); 
requestAnimationFrame (draw); 


}) (); 


以 上 模式 利用 已 有 的 功能 创建 了 一 个 动画 循环 ,大 致 计算 出 了 两 次 重 绘 的 时 间 间 隔 。 在 Firefox 中 ， 
计算 时 间 间 隔 使 用 的 是 既 有 的 时 间 码 ， 而 在 Chrome 和 正 中 ， 则 使 用 不 十 分 精确 的 Date 对 象 。 





式 可 以 大 致 体现 出 两 次 重 绘 的 时 间 间 隔 , 但 不 会 告诉 你 在 Chrome 和 了 E 中 的 时 间 间 隔 到 底 是 多 少 。 不 
大 致知 道 时 间 间 隔 总 比 一 点 儿 概 念 也 没有 好 些 。 

因为 首先 检测 的 是 标准 函数 名 ， 其 次 才 是 特定 于 浏览 器 的 版 本 ， 所 以 这 个 动画 循环 在 将 来 也 能 
使 用 。 








一 部 分 ，Mozilla 和 Google 下 共同 参与 该 标准 草案 的 制定 工作 。 
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目前 ，W3C 已 经 着 手 起 草 requestAnimationFrame() API， 而 且 作 为 Web Performance Group 的 
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25.2 Page Visibility API 


不 知道 用 户 是 不 是 正在 与 页 面 交 互 ， 这 是 困扰 广大 Web 开发 人 员 的 一 个 主要 问题 。 如 果 页 面 最 小 
化 了 或 者 隐藏 在 了 其 他 标签 页 后 面 ,那么 有 些 功能 是 可 以 停 下 来 的 , 比如 轮 询 服 务 器 或 者 某 些 动 画 效果 。 
而 Page Visibility API( 页 面 可 见 性 API ) 就 是 为 了 让 开发 人 员 知 道 页 面 是 否 对 用 户 可 见 而 推出 的 。 

这 个 API 本 身 非 常 简单 ， 由 以 下 三 部 分 组 成 。 
口 document .hidqen: 表示 页 面 是 否 隐藏 的 布尔 值 。 页 面 隐藏 包括 页 面 在 后 台 标 签 页 中 或 者 浏览 
器 最 小 化 。 

口 document .visibilityState: 表示 下 列 4 个 可 能 状态 的 值 。 
@ 页 面 在 后 台 标 签 页 中 或 浏览 器 最 小 化 。 
@ 页 面 在 前 台 标签 页 中 。 
时 实际 的 页 面 已 经 隐藏 , 但 用 户 可 以 看 到 页 面 的 预览 ( 就 像 在 Windows 7 中 , 用 户 把 鼠标 移动 到 
任务 栏 的 图 标 上 ， 就 可 以 显示 浏览 器 中 当前 页 面 的 预览 )。 
四 页 面 在 屏幕 外 执行 预 浑 染 处 理 。 

口 visibilitychange 事件 : 当 文 档 从 可 见 变 为 不 可 见 或 从 不 可 见 变 为 可 见 时 ， 触 发 该 事件 。 

在 编写 本 书 时 , 只 有 IE10 和 Chrome 支持 Page Visibility API。 IE 的 版 本 是 在 每 个 属性 或 事件 前 面 加 
上 ms 前 级 ， 而 Chrome 则 是 加 上 webkit 前 级 。 因 此 qdocument.hidden 在 正 的 实现 中 就 是 
document .msHidden， 而 在 Chrome 的 实现 中 则 是 aocument .wepbkitHidden。 检 查 浏 览 絮 是 否 支 持 
这 个 API 的 最 佳 方式 如 下 : 












































































































































function isHiddenSupported(){ 
时 ) return typeof (document.hidden || document.msHidden || 
document .webkitHidden) != "undefined"; 


PageVisibilityAPIExample01.htm 








类 似 地 ,使 用 同样 的 模式 可 以 检测 页 面 是 否 隐 藏 : 











if (document.hidden || document.msHidden | | document .webKitHidden)t{ 
// 页 面 隐藏 了 

} else { 
// 页 面 未 隐藏 


} 


PageVisibilityAPIExample01.htm 


注意 , 以 上 代码 在 不 支持 该 API 的 浏览 器 中 会 提示 页 面 未 隐藏 。 这 是 Page Visibility API 有 意 设计 的 
结果 ， 目 的 是 为 了 向 后 兼容 。 

为 了 在 页 面 从 可 见 变 为 不 可 见 或 从 不 可 见 变 为 可 见 时 收 到 通知 ， 可 以 侦 听 visipilitychange 事 
件 。 在 正 中 ， 这 个 事件 叫 msvisibilitychange， 而 在 Chrome 中 这 个 事件 叫 wepkitvisibility- 
change。 为 了 在 两 个 浏览 器 中 都 能 侦 听 到 该 事件 ， 可 以 像 下 面 的 例子 一 样 ， 为 每 个 事件 都 指定 相同 的 
事件 处 理 程序 : 
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function handleVisibilityChange(){ 
Var output = document .getElementById("output"), 





msg; 

if (document.hidden || document.msHidden || document .webkitHidden)t{ 
msg = "Page is now hidden. " + (new Date()) + "<br>"; 

} else { 
msg = "Page is now visible. " + (new Date()) + "<br>"; 


} 
output.innerHTML += msg; 
} 


// 要 为 两 个 事件 都 指定 事件 处 理 程序 
EventUtil.addHandler (document, "msvisibilitychange", handleVisibilityChange); 
EventUtil.addHandler (document, "webkitvisibilitychange", handleVvisibilityChange); 





PageVisibilityAPlExample01.htm 


以 上 代码 同时 适用 于 卫 和 Chrome。 而 且 ，API 的 这 一 部 分 已 经 相对 稳定 ， 因 此 在 实际 的 Web 开发 
中 也 可 以 使 用 以 上 代码 。 

关于 这 一 API 的 实现 ， 差 异 最 大 的 是 document .visibilityState 属性 。IE10 PR 2 的 
document .msVisibilityState 是 一 个 表示 如 下 4 种 状态 的 数字 值 。 

(1) document .MS_ PAGE_HIDDEN (0) 

(2) document .MS_PAGE_VISIBLE (1) 

(3) document .MS_ PAGE_PREVIEW (2) 

(4) document .MS_ PAGE_PRERENDER (3) 

在 Chrome 中 ，document .webkitVisibilityState 可 能 是 下 列 3 个 字符 串 值 : 

(1) "hidden" 

(2) "visible" 

(3) "prerender'" 

Chrome 并 没有 给 每 个 状态 定义 对 应 的 常量 ,但 最 终 的 实现 很 可 能 会 使 用 常量 。 
1 于 存在 以 上 差异 ， 所 以 建议 大 家 先 不 要 完全 依赖 带 前 级 的 document .visibilityState， 最 好 
只 使 用 document .higdqden 属 4 


25.3 Geolocation API 


地 理 定位 ( geolocation ) 是 最 令 人 兴奋 , 而 且 得 到 了 广 泛 支 持 的 一 个 新 API。 通过 这 套 API, JavaScript 
代码 能 够 访问 到 用 户 的 当前 位 置信 息 。 当 然 ， er 得 到 用 户 的 明确 许可 ， 即 同意 在 页 面 中 共享 
其 位 置信 息 。 如 果 页 面 尝 试 访问 地 理 定位 信息 ,浏览 器 就 会 显示 一 个 对 话 框 ,请 求 用 户 许 可 共享 其 位 置 
信息 。 图 25-1 展示 了 Chrome 中 的 这 样 一 个 对 话 框 。 


€ CC © diveintohtmls.orgigeolocation.html 家 
© diveintoh:ml5.org wants to track your physical location | Allow Learmmo.. * 25 


图 25-1 


Geolocation API 在 浏览 器 中 的 实现 是 navigator .geolocation 对 象 ， 这 个 对 象 包含 3 个 方法 。 
第 一 个 方法 是 getcurrentPosition() ,调用 这 个 方法 就 会 触发 请 求 用 户 共 享 地 理 定位 信息 的 对 话 框 。 
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这 个 方法 接收 3 个 参数 : 成 功 回 调 函 数 、 可 选 的 失败 回调 函数 和 可 选 的 选项 对 象 。 
基 中 ,成 功 回 调 函 数 会 接收 到 一 个 Position 对 象 参 数 ,该 对 象 有 两 个 属性 :coordqs 和 timestamp。 
而 coords 对 象 中 将 包含 下 列 与 位 置 相 关 的 信息 。 
口 latitude: 以 十 进 制 度数 表示 的 纬度 。 
口 longitude: 以 十 进 制 度数 表示 的 经 度 。 
口 ee 经 、 纬 度 坐标 的 精度 ， 以 米 为 单位 。 
有 些 浏览 可 能 会 在 coords 对 象 中 提供 如 下 属性 
口 altitude: 以 米 为 单位 的 海拔 高 度 ， 如 果 没 有 相关 数据 则 值 为 nul1lo。 
口 altitudeAccuracy: 海拔 高 度 的 精度 ， 以 米 为 单位 ， 数 值 越 大 越 不 精确 。 
口 heading: 指南 针 的 方向 ，0? 表 示 正 北 ， 值 为 NaN 表示 没有 检测 到 数据 。 
口 speed: 速度 ， 即 每 秒 移动 多 少 米 ， 如 果 没 有 相关 数据 则 值 为 nul1。 

在 实际 开发 中 ，1latitude 和 longitude 是 大 多 数 Web 应 用 最 常用 到 的 属性 。 例 如 ， 以 下 代码 将 
在 地 图 上 绘制 用 户 的 位 置 : 
































navigator.geolocation.getCurrentPosition(function(position)f{ 
drawMapCenteredAt (position.coords.latitude, positions.coords.longitude); 


} 3 


以 上 介绍 的 是 成 功 回 调 函 数 。getcurrentPosition() 的 第 二 个 参数 ， 即 失败 回调 函数 ， 在 被 调 
用 的 时 候 也 会 接收 到 一 个 参数 。 这 个 参数 是 一 个 对 象 , 包含 两 个 属性 :message 和 code。 其 中 ,message 
属性 中 保存 着 给 人 看 的 文本 消息 ， 解 释 为 什么 会 出 错 ， 而 code 属性 中 保存 着 一 个 数值 ， 表 示 错 误 的 类 
型 : 用 户 拒绝 共享 (1 )、 位 置 无 效 (2 ) 或 者 超时 (3 )。 实际 开发 中 ,大 多 数 Web 应 用 只 会 将 错误 消息 
保存 到 日 志文 件 中 ， 而 不 一 定 会 因此 修改 用 户 界面 。 例 如 : 
























































navigator.geolocation.getCurrentPosition(function(position)f{ 
drawMapCenteredAt (position.coords.latitude, positions.coords.longitude); 
}, function(error)t{ 


Console.log("Error code: " + error.code); 
console.log("Error message: " + error.message); 
和 
getCurrentPosition() 的 第 三 个 参数 是 一 个 选项 对 象 ， 用 于 设 定 信息 的 类 型 。 可 以 设置 的 选项 








有 三 个 : enableHighAccuracy 是 一 个 布尔 值 ， 表 示 必 须 尽 可 能 使 用 最 准确 的 位 置信 息 ; timeout 是 
以 毫秒 数 表 示 的 等 竺 位置 信息 的 最 长 时 间 ; maximumage 表示 上 一 次 取得 的 坐标 信息 的 有 效 时 间 ， 以 训 
秒表 示 ， 如 果 时 间 到 则 重新 取得 新 坐标 信息 。 例 如 : 















































navigator.geolocation.getCurrentPosition(function(position)t{ 
drawMapCenteredAt (position.coords.latitude, positions.coords.longitude); 
}, function(error)t{ 
console.log("Error code: " + error.code); 
console.log("Error message: " + error.message); 
}, { 
enableHighAccuracy: true, 
timeout: 5000, 
maximumAge: 25000 
}); 
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作 \» 








这 三 个 选项 都 是 可 选 的 ， 可 以 单独 设置 也 可 以 与 其 他 选项 一 起 设置 。 除 非 确实 需要 非常 精确 的 信 
否则 建议 保持 enableHighAccuracy 的 false 值 (默认 值 )。 将 这 个 选项 设置 为 true 需要 更 长 



































的 时 候 ， 而 且 在 移动 设备 上 还 会 导致 消耗 更 多 电量 。 类 似 地 ， 如 果 不 需要 频繁 更 新 用 户 的 位 置信 息 , 那 
么 可 以 将 maximumAge 设置 为 INEInity, 从 而 始终 都 使 用 上 次 的 坐标 信息 。 












































如 果 你 希望 跟踪 用 户 的 位 置 ， 那 么 可 以 使 用 男 一 个 方法 watchPosition()。 这 个 方法 接收 的 参数 











b= 








与 getCurrentPosition() 方 法 完全 相同 。 实 际 上 ，watchPosition() 与 定时 调用 
getCurrentPosition() 的 效果 相同 。 在 第 一 次 调用 watchPosition() 方 法 后 , 会 取得 当前 位 置 , 执 
行 成 功 回 调 或 者 错误 回调 。 然 后 ，watchPosition() 就 地 等 待 系统 发 出 位 置 已 改变 的 信号 ( 它 不 会 自 
己 轮 询 位 置 )。 



































调用 watchPosition() 会 返回 一 个 数值 标识 符 ， 用 于 跟踪 监控 的 操作 。 基 于 这 个 返回 值 可 以 取消 





监控 操作 ， 只 要 将 其 传递 给 clearwatch () 方 法 即 可 (与 使 用 setTimeout () 和 clearTimeout () 类 
似 )。 例如 : 








var watchId = navigator.geolocation.watchPosition(function(position)t 
drawMapCenteredAt (position.coords.latitude, positions.coords.longitude); 
}, function(error)t{ 
console.log("Error code: " + error.code); 
console.log("Error message: " + error.message); 
}); 


clearWatch (watchId); 


以 上 例子 调用 了 watchPosition() 方 法 ,将 返回 的 标识 符 保存 在 了 watcnId 中 。 然 后 ， 又 将 














watchId 传 给 了 clearwatch() ， 取 消 了 监控 操作 。 


支持 地 理 定位 的 浏览 器 有 IE9+、Firefox 3.5+、Opera 10.6+ 、Safari 5+、Chrome、iOS 版 Safari、Android 





版 WebKit。 要 了 解 使 用 地 理 定位 的 更 多 精彩 范例 ， 请 访问 http://html5demos.com/geo。 


25.4 File API 








不 能 直接 访问 用 户 计算 机 中 的 文件 ,一直 都 是 Web 应 用 开发 中 的 一 大 障碍 。2000 年 以 前 ， 处 理 文 











件 的 唯一 方式 就 是 在 表单 中 加 入 <input type="file"> 字 段 ， 仅 此 而 已 。File API (文件 API ) 的 宗旨 
是 为 Web 开发 人 员 提 供 一 种 安全 的 方式 ， 以 便 在 客户 端 访问 用 户 计算 机 中 的 文件 ， 并 更 好 地 对 这 些 文 
件 执行 操作 。 支 持 File API 的 浏览 器 有 IE10+、Firefox 4+、Safari 5.0.5+、Opera 11.1+ 和 Chrome。 




















File API 在 表单 中 的 文件 输入 字段 的 基础 上 ， 又 添加 了 一 些 直 接 访 问 文件 信息 的 接口 。HTMLS5 在 











DOM 中 为 文件 输入 元 素 添 加 了 一 个 files 集合 。 在 通过 文件 输入 字段 选择 了 一 或 多 个 文件 时 ，files 
集合 中 将 包含 一 组 File 对象， 每 个 File 对 象 对 应 着 一 个 文件 。 每 个 File 对 象 都 有 下 列 只 读 属性 。 








口 name: 本 地 文件 系统 中 的 文件 名 。 

口 size: 文件 的 字 节 大 小 。 

口 type: 字符 串 ， 文 件 的 MIME 类 型 。 

口 lastModifiedDate: 字符 串 ， 文 件 上 一 次 被 修改 的 时 间 ( 只 有 Chrome 实现 了 这 个 属性 )。 
举 个 例子 ， 通 过 侦 听 change 事件 并 读 取 files 集合 就 可 以 知道 选择 的 每 个 文件 的 信息 : 


var filesList = document.getElementById("files-list"); 
EventUtil.addHandler (filesList, "change", function(event)t 
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var files = EventUtil.getTarget (event) .files， 
i = 0， 
len = files.length; 
while (i < len)f{ 
console.log(files[i] .name + " (" + files[i].type + ", " + files[i].size + 


中 bytes) ") ; 
i++; 
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这 个 例子 把 每 个 文件 的 信息 输出 到 了 控制 台中 。 仅 仅 这 一 项 功能 ， 对 Web 应 用 开发 来 说 就 已 经 是 
非常 大 的 进步 了 。 不 过 ，File API 的 功能 还 不 止 于 此 ， 通 过 它 提供 的 FileReader 类 型 甚至 还 可 以 读 取 
文件 中 的 数据 。 























25.4.1 FileReader 类 型 














FileReader 类 型 实现 的 是 一 种 异步 文件 读 取 机 制 , 可 以 把 FileReader 想象 成 XMLHttpRequest， 
区 别 只 是 它 读 取 的 是 文件 系统 ， 而 不 是 远程 服务 器 。 为 了 读 取 文 件 中 的 数据 ，FileReader 提供 了 如 下 
几 个 方法 。 

口 readAsText (file, encoding) : 以 纯 文 本 形式 读 取 文件 ， 将 读 取 到 的 文本 保存 在 result 属 

性 中 。 第 二 个 参数 用 于 指定 编码 类 型 ， 是 可 选 的 。 

口 reagAsDataURL (file) : 读 取 文件 并 将 文件 以 数据 URI 的 形式 保存 在 result 属性 中 。 

口 readAsBinaryString (file): 读 取 文 件 并 将 一 个 字符 串 保 存在 result 属性 中 , 字符 串 中 的 

每 个 字符 表示 一 字 节 。 

口 readAsArrayBuffer (file): 读 取 文件 并 将 一 个 包含 文件 内 容 的 ArrayBuffer 保存 在 
result 属性 中 。 

这 些 读 取 文 件 的 方法 为 灵活 地 处 理 文件 数据 提供 了 极 大 便利 。 例 如， 可 以 读 取 图 像 文 件 并 将 其 保存 
为 数据 URI， 以 便 将 其 显示 给 用 户 , 或 者 为 了 解析 方便 ， 可 以 将 文件 读 取 为 文本 形式 。 

由 于 读 取 过 程 是 异步 的 ， 因 此 FileReader 也 提供 了 几 个 事件 。 其 中 最 有 Le a 
progress、error 和 1oad, 分 别 表示 是 否 义 读 取 了 新 数据 、 是 否 发 生 了 错误 以 及 是 否 已 经 读 完了 整个 
文件 。 
每 过 50ms 左右 ， 就 会 触发 一 次 progress 事件 ， 通 过 事件 对 象 可 以 获得 与 XHR 的 progress 事 
件 相 同 的 信息 (属性): lengthcomputable、loaded 和 total。 另 外 ， 尽 管 可 能 没有 包含 全 部 数据 ， 
但 每 次 progress 事件 中 都 可 以 通过 FileReader 的 result 属性 读 取 到 文件 内 容 。 

由 于 种 种 原因 无 法 读 取 文件 ， 就 会 触发 error 事件 。 触 发 error 事件 时 ， 相 关 的 信息 将 保存 到 
FileReader 的 error 属性 中 。 这 个 属性 中 将 保存 一 个 对 象 ， 该 对 象 只 有 一 个 属性 codqe， 即 错误 码 。 
这 个 错误 码 是 1 表示 未 找到 文件 ， 是 2 表示 安全 性 错误 ， 是 3 表示 读 取 中 断 ， 是 4 表示 文件 不 可 读 ， 是 
5 表示 编码 错误 。 

文件 成 功 加 载 后 会 触发 1oad 事件 ; 如 果 发 生 了 error 事件 ,就 不 会 发 生 1oad 事件 。 以 下 是 一 个 
使 用 上 述 三 个 事件 的 例子 。 
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var filesList = document.getElementById("files-list"); 
EventUtil.addHandler (filesList, "change", function(event)t 
var TNEd. TT, 
output = document .getElementById("output"), 
progress = document .getElementByIlid("progress"), 
files = EventUtil.getTarget (event) .files, 
type = "default", 
reader = new FileReader (); 

















if (/image/.test(files[0] .type))t{ 
reader.readAsDataURL (files[0]); 


type = "image"; 
} else { 
reader.readAsText (files[0]); 
type = "text"; 
} 
reader.onerror = function(){ 
output.innerHTML = "Could not read file, error code is " + 
reader .error.code; 
: 
reader.onprogress = function(event)t{ 
if (event.lengthComputable)t 
progress.innerHTML = event.loaded + "/" + event.total; 
} 
}3 


reader.onload = function()f{ 
Var html = 


switch(type)t{ 
case "image": 
html = "<img src=\"" + reader.result + "\">"; 
break; 
case "text": 
html = reader.result; 
break; 
} 
output.innerHTML = html; 
} > 
})3 
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这 个 例子 读 取 了 表单 字段 中 选择 的 文件 ， 并 将 其 内 容 显 示 在 了 页 面 中 。 如 果 文 件 有 MIMI 类 型 ， 表 
示 文 件 是 图 像 ， 因 此 在 1oad 事件 中 就 把 它 保 存 为 数据 URI， 并 在 页 面 中 将 这 幅 图 像 显 示 出 来 。 如 果 文 
件 不 是 图 像 ， 则 以 字符 串 形式 读 取 文件 内 容 ， 然 后 如 实在 页 面 中 显示 读 取 到 的 内 容 。 这 里 使 用 了 
progress 事件 来 跟踪 读 取 了 多 少 字 节 的 数据 ， 而 error 事件 则 用 于 监控 发 生 的 错误 。 

如 果 想 中 断 读 取 过 程 ， 可 以 调用 abort () 方 法 ,这 样 就 会 触发 abort 事件 。 在 触发 load、error 
或 abort 事件 后 ， 会 触发 另 一 个 事件 1oadqendq。loaqend 事件 发 生 就 意味 着 已 经 读 取 完整 个 文件 , 或 
者 读 取 时 发 生 了 错误 ,或 者 读 取 过 程 被 中 断 。 

实现 File API 的 所 有 浏览 器 都 支持 readAasText () 和 readAsDataURL () 方 法 。 但 IE10 PR 2 并 未 
实现 readAsBinarystring() 和 readAsArrayBuffer() 方 法 。 
































hu 

















图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


692 第 25 章 ， 新 兴 的 API 





25.4.2 ” 读 取 部 分 内 容 


有 时 候 , 我 们 只 想 读 取 文 件 的 一 部 分 而 不 是 全 部 内 容 。 为 此 , File 对 象 还 支持 一 个 slice () 方 法 ， 
这 个 方法 在 Firefox 中 的 实现 叫 mozSslice()， 在 Chrome 中 的 实现 叫 webkitslice()，Safari 的 S.1 及 
之 前 版 本 不 支持 这 个 方法 。slice () 方 法 接收 两 个 参数 : 起 始 字 节 及 要 读 取 的 字 节 数 。 这 个 方法 返回 一 
个 Blopb 的 实例 ,Blob 是 File 类 型 的 父 类 型 .下 面 是 一 个 通用 的 函数 ,可 以 在 不 同 实现 中 使 用 slice () 
方法 : 





五 



































function blobSlice(blob, startByte, length)t{ 
时) if (blob.slice)f{ 
return blob.slice(startByte, length); 
} else if (blob.webkitSslice)t{ 
return blob.webkitSlice(startByte, length); 
} else if (blob.mozSlice)t 
return blob.mozSlice(startByte, length); 
} else { 
return null; 


} 
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Blob 类 型 有 一 个 size 属性 和 一 个 type 属性 ， 而 且 它 也 支持 slice() 方 法 ， 以 便 进一步 切割 数 
据 。 通 过 FileReader 也 可 以 从 Blob 中 读 取 数据 。 下 面 这 个 例子 只 读 取 文件 的 32B 内 容 。 





本 








var filesList = document.getElementById("files-list"); 
中 EventUtil.addHandler (filesList, "change", function(event)t{ 
var 1nE0 Sr 1， 
output = document .getElementById("output"), 








progress = document .getElementById("progress"), 
files = EventUtil.getTarget (event) .files, 
reader = new FileReader(), 

blob = blobslice(files[0], 0, 32); 





if (blob)f{ 
reader.readAsText (blob); 


reader.onerror = function(){ 
output.innerHTML = "Could not read file, error code is " + 
reader.error.code; 


于 


reader.onload = function(){ 
output.innerHTML = reader.result; 
}3 
} else { 
alert ("Your browser doesn' 七 support slice()."); 


} 


_ 


FileAPIExample03.htm 
只 读 取 文 件 的 一 部 分 可 以 节省 时 间 ， 非 常 适合 只 关注 数据 中 某 个 特定 部 分 ( 如 文件 头 部 ) 的 情况 。 


图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


5 


25.4 File API 693 





25.4.3 ”对象 URL 


对 象 URL 也 被 称 为 blob URL, 指 的 是 引用 保存 在 File 或 Blob 中 数据 的 URL。 使 用 对 象 URL 的 
好 处 是 可 以 不 必 把 文件 内 容 读 取 到 JavaScript 中 而 直接 使 用 文件 内 容 。 为 此 ， 只 要 在 需要 文件 内 容 的 地 
方 提供 对 象 URL 即 可 。 要 创建 对 象 URL， 可 以 使 用 window.URL.createObjectURL() 方 法 ， 并 传人 
File 或 Blob 对 象 。 这 个 方法 在 Chrome 中 的 实现 叫 window .webkitURL.createObjectURL () ， 
此 可 以 通过 如 下 函数 来 消除 命名 的 差异 : 





function createObjectURL (blob)t{ 
if (window.URL)T 
return window.URL.createObjectURL (blob); 
} else if (window.webkitURL)IT 
return window.webkitURL.createObjectURL (blob); 
} else { 
return null; 





} 
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这 个 函数 的 返回 值 是 一 个 字符 串 ， 指 向 一 块 内 存 的 地 址 。 因 为 这 个 字符 串 是 URL, 所 以 在 DOM 中 
也 能 使 用 。 例 如 ， 以 下 代码 可 以 在 页 面 中 显示 一 个 图 像 文件 : 




















var filesList = document.getElementById("files-list"); 
EventUtil.addHandler (filesList, "change", function(event)t 
VaR THEO S TE 
output = document .getElementById("output"), 
progress = document .getElementById("progress"), 
files = EventUtil.getTarget (event) .files, 
reader = new FileReader(), 
url = createObjectURL(files[0]); 














TE (UEL)}T 
if (/image/.test(files[0] .type))t{ 
output.innerHTML = "<img src=\"" + Url + "\">";} 
} else { 
output.innerHTML = "Not an image."; 
} 
} else { 
output.innerHTML = "Your browser doesn't support object URLs."; 


} 
二 
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直接 把 对 象 URL 放 在 <img> 标 签 中 , 就 省 去 了 把 数据 先 读 到 JavaScript 中 的 麻烦 。 另 一 方面 , <img> 
标签 则 会 找到 相应 的 内 存 地 址 ， 直 接 读 取 数据 并 将 图 像 显示 在 页 面 中 。 

如 果 不 再 需要 相应 的 数据 , 最 好 释放 它 占 用 的 内 容 。 但 只 要 有 代码 在 引用 对 象 URL， 内 存 就 不 会 释 
放 。 要 手工 释放 内 存 ， 可 以 把 对 象 URL 传 给 window.URL.revoke0jbectURL() (在 Chrome 中 是 
window.webkitURL .revokeobjectURL () )。 要 兼容 这 两 种 方法 的 实现 ， 可 以 使 用 以 下 函数 : 
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25.4.4 


围绕 读 取 文件 信息 ， 结 合 使 用 HTMLS 拖 放 API 和 文件 API， 能 够 创造 出 令 人 瞩目 的 
面 上 创建 了 自 定 义 的 放置 目标 之 后 , 你 可 以 从 桌面 上 把 文件 拖 放 到 该 
类 似 ， 从 归 画 
中 读 取 到 被 放置 的 文人 


function revokeObjectURL (url1)t{ 
if (window.URL)T{ 





window.URL.revokeObjectURL (ur1); 


} else if 


(window.webkitURL)T{ 


window.webkitURL.revokeObjectURL (url1); 


} 
} 














页 面 秃 载 时 会 自动 释放 对 象 URL 占用 的 内 存 。 不 过 ， 为 了 而 


要 某 个 对 象 URL 时 ， 就 马上 手工 释放 其 占用 的 内 存 。 























支持 对 象 URL 的 浏览 器 有 IE10+、Firefox 4 和 Chrome。 


读 取 拖 放 的 文件 





























下 本 














var droptarget = 


function handleEvent (event){ 
Var LTnEo, SS 





document .getElementById(!( 














保 尽 可 能 少 地 占用 内 存 ， 最 好 在 不 需 









































"drop 


output = document .getElementById ("outpu 


fiLLes,. TT, Len: 


EventUtil.preventDefault (event); 


if (event.type == "drop")t{ 


files = event.dataTransfer.files; 
1 
len = files.length; 


while (i < len)t{ 


Info += files[i] .name + " (" 
" bytes)<br>"; 


++; 


} 
output.innerHTML = 


} 


EventUtil.addHandler (droptarget, 
EventUtil.addHandler (droptarget, 
EventUtil.addHandler (droptarget, 


LEOS 


与 之 前 展示 的 拖 放 示例 一 样 ， 这 里 也 必须 取消 aragen 


+ files[i] .type + " 





target"); 





EE 





"dragenter", handleEvent); 
"dragover", handleEvent); 
"drop", handleEvent); 








] 户 界面 ， 在 页 








目标 。 与 拖 放 一 张 图 片 或 者 一 个 链接 
[上 把 文件 拖 放 到 浏览 器 中 也 会 触发 arop 事件 。 而 且 可 以 在 event .dataTransfer. files 
FE， 当然 此 时 它 是 一 个 File 对 象 ， 与 通过 文件 输入 字段 取得 的 File 对 象 一 样 。 

j 这 个 例子 会 将 放置 到 页 面 中 自 定 义 的 放置 目标 中 的 文件 信息 显示 出 来 : 











" + files[i].size + 
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ter、dragover 和 drop 的 默认 行为 。 在 


drop 事件 中 ， 可 以 通过 event .dataTransfer .files 读 取 文件 信息 。 还 有 一 种 利用 这 个 功能 的 流行 
做 法 ， 即 结合 XMLHttpRequest 和 拖 放 文件 来 实现 上 传 。 
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25.4.5 ”使 用 XHR 上 传 文件 


通过 File API 能 够 访问 到 文件 内 容 ， 利 用 这 一 点 就 可 以 通过 XHR 直接 把 文件 上 传 到 服务 器 。 当 然 
send () 方 法 中 ， 再 通过 POST 请 求 ， 的 确 很 容易 就 能 实现 上 传 。 但 这 样 做 传递 的 
是 文件 内 容 ， 因 而 服务 器 端 必须 收集 提交 的 内 容 ， 然 后 再 把 它们 保存 到 另 一 个 文件 中 。 其 实 ， 更 好 的 做 
法 是 以 表单 提交 的 方式 来 上 传 文件 。 

这 样 使 用 FormData 类 型 就 很 容易 做 到 了 ( 第 21 章 介绍 过 FormData ),。 首 先 ,要 创建 一 个 FormData 
对 象 ， 通 过 它 调 用 append () 方 法 并 传人 相应 的 File 对 象 作 为 参数 。 然 后 ， 再 把 FormData 对 象 传递 


啦 ， 把 文件 内 容 放 到 


给 XHR 的 send () 方 


Var droptarget 


function hangdl 


Var info = "" 


output 
data, 
files, 


EventUtil. 





if (event. 
data = 
files 
ty 
len = 


while 
da 
i+ 


Xxhr = 

Xxhr .op 

Xxhr .on 
if 


} 
xhr.se: 
} 
EventUtil .addH 


EventUtil .addH 
EventUtil .addH 


















































法 ， 结 果 与 通过 表单 上 传 一 模 一 样 。 


= document .getElementById("droptarget"); 





eEvent (event){ 





= document .getElementById("output"), 
xhr, 
i, len; 


preventDefault (event); 

type == "drop")t{ 

new FormData(); 

= event.dataTransfer.files; 
files.length; 

(i < len)f{ 


ta.append("file" + i, files[i]); 
+; 


new XMLHttpRequest (); 

















en("post", "FileAPIExample06Upload.php", true); 


readystatechange = function()f{ 
(xhr.readyState == 4){ 
alert (xhr.responseText); 


nd(data); 





andler (droptarget, "dragenter", handleEvent); 
andler (droptarget, "dragover", handleEvent); 








andler (droptarget, "drop", handleEvent); 
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这 个 例子 创建 一 个 FormData 对 象 , 与 每 个 文件 对 应 的 键 分 别 是 file0、file1、file2 这 样 的 格 
式 。 注意 , 不 用 额外 写 任 何 代码 ,这些 文件 就 可 以 作为 表单 的 值 提交 。 
只 要 传人 File 对 象 即 可 。 





而 且 





| ， 也 不 必 使 用 FileReader， 
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使 用 Formpata 上 传 文件 , 在 服务 器 端 就 好 像 是 接收 到 了 常规 的 表单 数据 一 样 , 一 切 按部就班 地 处 
理 即 可 。 换 句 话说， 如 果 服 务 器 端 使 用 的 是 PHP， 那 么 $_FILES 数组 中 就 会 保存 着 上 传 的 文件 。 支 持 























以 这 种 方式 上 传 文件 的 浏览 器 有 Firefox 4+ 、Safari S+ 和 Chrome。 


25.5 Web 计时 








页 面 性 能 一 直 都 是 Web 开发 人 员 最 关注 的 领域 。 但 直到 最 近 ， 度 量 页 面 性 能 指标 的 唯一 方式 ， 就 


























是 提高 代码 复杂 程度 和 巧妙 地 使 用 JavaScript 的 Date 对 象 。Web Timing API 改变 了 这 个 局 面 ， 让 玫 
人 员 通 过 JavaScript 就 能 使 用 浏览 器 内 部 的 度量 结果 ， 通 过 直接 读 取 这 些 信 息 可 以 做 任何 想 做 的 分 析 。 



































[发 





与 本 章 介绍 过 的 其 他 API 不同，Web Timing API 实际 上 已 经 成 为 了 W3C 的 建议 标准 ， 只 不 过 目前 支持 


它 的 浏览 絮 还 不 够 多 。 





Web 计时 机 制 的 核心 是 window.performance 对 象 。 对 页 面 的 所 有 度量 信息 ， 包 括 那 些 规范 中 已 
经 定义 的 和 将 来 才能 确定 的 ， 都 包含 在 这 个 对 象 里 面 。Web Timing 规范 一 开始 就 为 berformance 对 象 


定义 了 两 个 属性 。 





其 中 , performance.navigation 属性 也 是 一 个 对 象 , 包含 着 与 页 面 导 航 有 关 的 多 个 属性 , 如 下 所 示 。 








口 redirectCount: 页 面 加 载 前 的 重 定 向 次 数 。 
口 type: 数值 常量 ， 表 示 刚 刚 发 生 的 导航 类 型 。 


四 Dezformance.navigation.TYPE NAVIGATE (0) : 页 面 第 一 次 加 载 。 




















同 
此 





performance.navigation.TYPE_RELOAD (1): 页 面 








上 performance.navigation.TYPE_BACK_FORWARD (2) : 页 面 是 通过 “后 退 ” 或 “前 

















钮 打开 的 。 


另外 ，performance.timing 属性 也 是 一 个 对 象 ， 但 这 个 对 象 的 属性 都 是 时 间 戳 (从 软件 纪元 开 





始 经 过 的 毫秒 数 )， 不 同 的 事件 会 产生 不 同 的 时 间 值 。 这 些 属 性 如 下 所 示 。 
口 navigationstart: 开始 导航 到 当前 页 面 的 时 间 。 

















面 来 自 同一 个 域 时 这 个 属性 才 会 有 值 ; 否则 ， 值 为 0。 

















来 自 同 一 个 域 时 这 个 属性 才 会 有 值 ; 否则 ， 值 为 0。 




















个 属性 才 会 有 值 ; 否则 ， 值 为 0。 











属性 才 会 有 值 ; 否则 ， 值 为 0。 

口 fetchSstart: 开始 通过 HTTP GET 取得 页 面 的 时 间 。 

口 domainLookupStart: 开始 查询 当前 页 面 DNS 的 时 间 。 
口 dgomainLookupEnd: 查询 当前 页 面 DNS 结束 的 时 间 。 
口 connectStart: 浏览 器 尝试 连接 服务 器 的 时 间 。 

口 connectEnd: 浏览 器 成 功 连接 到 服务 器 的 时 间 。 




















时 ， 这 个 属性 的 值 为 0。 
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口 unloagdEventEnd: 前 一 个 页 面 的 unload 事件 结束 的 时 间 。 但 只 有 在 前 一 个 页 面 与 当前 页 面 


口 unloadEventStart: 前 一 个 页 面 的 unloaq 事件 开始 的 时 间 。 但 只 有 在 前 一 个 页 面 与 当前 页 

















口 redirectstart: 到 当前 页 面 的 重 定向 开始 的 时 间 。 但 只 有 在 重 定 向 的 页 面 来 自 同 一 个 域 时 这 


口 redirectEnd: 到 当前 页 面 的 重 定向 结束 的 时 间 。 但 只 有 在 重 定 向 的 页 面 来 自 同一 个 域 时 这 个 


口 secureConnectionStart: 浏览 器 尝试 以 SSL 方式 连接 服务 器 的 时 间 。 不 使 用 SSL 方式 连接 
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口 requestSstart: 浏览 器 开始 请 求 页 面 的 时 间 。 
口 responseStart: 浏览 需 接 收 到 页 面 第 一 字 节 的 时 间 。 
口 responseEnd: 浏览 器 接收 到 页 面 所 有 内 容 的 时 间 。 


口 dgomLoading: document .readyState 变 为 "loadqing" 的 时 间 。 





口 domInteractive: dqocument .readyState 变 为 "interactive" 的 时 间 。 
口 domcontentLoadedEventStart: 发 生 DoMcontentLoaded 事件 的 时 间 。 
口 domContentLoadedEventEnd: DOMContentLoaded 事件 已 经 发 生 且 执行 完 所 有 事件 处 理 程 
序 的 时 间 。 
口 aomcompblete: document .readyState 变 为 "complete" 的 时 间 。 
口 loadEventstart: 发 生 1oad 事件 的 时 间 。 
口 loadEventEnd: load 事件 已 经 发 生 且 执行 完 所 有 事件 处 理 程序 的 时 间 。 

通过 这 些 时 间 值 , 就 可 以 全 面 了 解 页 面 在 被 加 载 到 浏览 器 的 过 程 中 都 经 历 了 哪些 阶段 ,而 哪些 阶段 
可 能 是 影响 性 能 的 瓶颈 。 给 大 家 推荐 一 个 使 用 Web Timing API 的 绝 好 示例 ， 地 址 是 
http://webtimingdemo.appspot.com/。 

支持 Web Timing API 的 浏览 器 有 IE10+ 和 Chrome。 


25.6 Web Workers 


随 着 Web 应 用 复杂 性 的 与 日 俱 增 , 越 来 越 复杂 的 计算 在 所 难免 。 长 时 间 运 行 的 JavaScript 进程 会 
致 浏览 器 冻结 用 户 界面 ,让 人 感觉 屏幕 “冻结 ”了 。Web Workers 规范 通过 让 JavaScript 在 后 台 运 行 解决 
了 这 个 问题 。 浏 览 器 实现 Web Workers 规范 的 方式 有 很 多 种 ， 可 以 使 用 线程 、 后 台 进 程 或 者 运行 在 其 他 
处 理 右 核心 上 的 进程 ， 等 等 。 具体 的 实现 细节 其 实 没 有 那么 重要 ,重要 的 是 开发 人 员 现 在 可 以 放心 地 运 
行 JavaScript， 而 不 必 担 心 会 影响 用 户 体验 了 。 
目前 支持 Web Workers 的 浏览 器 有 IE10+、Firefox 3.5S+、Safari 4+ 、Opera 10.6+、Chrome 和 iOS 版 
的 Safari。 
































































































































25.6.1 使 用 Worker 
实例 化 Worker 对 象 并 传人 要 执行 的 JavaScript 文件 名 就 可 以 创建 一 个 新 的 Web Worker。 例 如 : 


Var worker = new Worker ("stufftodo.js"); 

这 行 代码 会 导致 浏览 带 下 载 stufftodo.js, 但 只 有 Worker 接收 到 消息 才 会 实际 执行 文件 中 的 代 
码 。 要 给 Worker 传递 消息 , 可 以 使 用 postMessage() 方 法 (与 XDM 中 的 postMessage() 方 法 类 似 ): 

worker.postMessage( “start! "); 

消息 内 容 可 以 是 任何 能 够 被 序列 化 的 值 ， 不 过 与 XDM 不 同 的 是 ， 在 所 有 支持 的 浏览 带 中 ， 
postMessage () 都 能 接收 对 象 参 数 ( Safari 4 是 支持 Web Workers 的 浏览 器 中 最 后 一 个 只 支持 字符 串 参 
数 的 )。 因 此 ， 可 以 随便 传递 任何 形式 的 对 象 数据 ， 如 下 面 的 例子 所 示 : 


Worker .PostMessage({ 
type: "command", 
message: "start! " 


下 
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一 般 来 说 ， 可 以 序列 化 为 JSON 结构 的 任何 值 都 可 以 作为 参数 传递 给 postMessage () 。 换 句 话 说， 
这 就 意味 着 传人 的 值 是 被 复制 到 Worker 中 ， 而 非 直接 传 过 去 的 (与 XDM 类 似 )。 

Worker 是 通过 message 和 error 事件 与 页 面 通信 的 ,这 里 的 message 事件 与 XDM 中 的 message 
事件 行为 相同 ， 来自 Worker 的 数据 保存 在 event .data 中 。Worker 返回 的 数据 也 可 以 是 任何 能 够 被 序 
列 化 的 值 : 


worker.onmessage = function(event)t{ 
var data = event.data; 
































Ih 


// 对 数据 进行 处 理 
} 


Worker 不 能 完成 给 定 的 任务 时 会 触发 error 事件 。 具 体 来 说 ，Worker 内 部 的 JavaScript 在 执行 过 
程 中 只 要 遇 到 错误 , 就 会 触发 error 事件 。 发 生 error 事件 时 , 事件 对 象 中 包含 三 个 属性 : filename、 
lineno 和 message， 分 别 表 示 发 生 错误 的 文件 名 、 代 码 行 号 和 完整 的 错误 消息 。 

worker.onerror = function(event){ 


console.log("ERROR: " + event .filename + " (" + event.lineno + "): "+ 
event .message); 









































}; 
建议 大 家 在 使 用 Web Workers 时 ， 始 终 都 要 使 用 onerror 事件 处 理 程序 ， 即 使 这 个 函数 ( 像 上 面 
例子 所 示 的 ) 除了 把 错误 记录 到 日 志 中 什么 也 不 做 都 可 以 。 和 否则，Worker 就 会 在 发 生 错 误 时 ,， 悄 无 声息 
地 失败 了 。 

任何 时 候 ， 只 要 调用 terminate () 方 法 就 可 以 停止 Worker 的 工作 。 而 且 ，Worker 中 的 代码 会 立即 
停止 执行 ， 后 续 的 所 有 过 程 都 不 会 再 发 生 〈 包 括 error 和 message 事件 也 不 会 再 触发 )。 


worker.terminate(); // 立 即 停 止 Worker 的 工作 











25.6.2 ”Worker 全 局 作用 域 


关于 Web Worker， 最 重要 的 是 要 知道 它 所 执行 的 JavaScript 代码 完全 在 另 一 个 作用 域 中 ， 与 当前 网 
页 中 的 代码 不 共享 作用 域 。 在 Web Worker 中 ， 同 样 有 一 个 全 局 对 象 和 其 他 对 象 以 及 方法 。 但 是 ，Web 
Worker 中 的 代码 不 能 访问 DOM， 也 无 法 通过 任何 方式 影响 页 面 的 外 观 。 

Web Worker 中 的 全 局 对 象 是 worker 对 象 本 身 。 也 就 是 说 ， 在 这 个 特殊 的 全 局 作用 域 中 ，this 和 
self 引用 的 都 是 worker 对 象 。 为 便于 处 理 数据 ，Web Worker 本 身 也 是 一 个 最 小 化 的 运行 环境 。 
口 最 小 化 的 navigator 对 象 , 包括 onLine、appName、appVersion、userAgent 和 Platform 
属性 ; 
口 只 读 的 location 对 象 ; 
口 setTimeout () 、setInterval() 、clearTimeout() 和 clearInterval () 方 法 ; 
口 XMLHttpRequest 构造 函数 。 
显然 ，Web Worker 的 运行 环境 与 页 面 环境 相 比 ， 功 能 是 相当 有 限 的 。 

当 页 面 在 worker 对 象 上 调用 postMessage () 时 , 数据 会 以 异步 方式 被 传递 给 worker, 进而 触发 
worker 中 的 message 事件 。 为 了 处 理 来 自 页 面 的 数据 ， 同 样 也 需要 创建 一 个 onmessage 事件 处 理 
程序 。 
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//Web Worker 内 部 的 代码 
self.onmessage = function(event)t 
var data = event.data; 


/ /处理 数 据 
}; 
大 家 看 清楚 , 这 里 的 self 引用 的 是 Worker 全 局 作用 域 中 的 worker 对 象 (与 页 面 中 的 Worker 对 
象 不 同一 个 对 象 )。Worker 完成 工作 后 ， 通 过 调用 postMessage () 可 以 把 数据 再 发 回 页 面 。 例 如 ， 下 
面 的 例子 假设 需要 Worker 对 传人 的 数组 进行 排序 ， 而 Worker 在 排序 之 后 又 将 数组 发 回 了 页 面 : 


//Web Worker 内 部 的 代码 
C9 self.onmessage = function(event){ 
var data = event.data; 


















































// 别 忘 了 ， 上 默认 的 sort () 方 法 只 比较 字符 囊 
data.sort (function(a, b)t{ 
return a - b; 
}); 
self.postMessage (datal) 


WebWorkerExample01.js 


传递 消息 就 是 页 面 与 Worker 相互 之 间 通 信 的 方式 。 在 Worker 中 调用 postMessage () 会 以 异步 方 
式 触 发 页 面 中 Worker 实例 的 message 事件 。 如 果 页 面 想 要 使 用 这 个 Worker， 可 以 这 样 : 
// 在 页 面 中 


var data = [23,4,7;9,2;14,6,651,87,41,7798,24]; 
worker = new Worker ("WebWorkerExample01.js"); 




















worker.onmessage = function(event)t{ 
var data = event.data; 


// 对 排序 后 的 数组 进行 操作 
5 


// 将 数组 发 送 给 worker 排序 
worker.postMessage (data); 


WebWorkerExample01.htm 


排序 的 确 是 比较 消耗 时 间 的 操作 ， 因 此 转交 给 Worker 做 就 不 会 阻塞 用 户 界面 了 。 另 外 ， 把 彩色 图 
像 转 换 成 灰 阶 图 像 以 及 加 密 解密 之 类 的 操作 也 是 相当 费时 的 。 

在 Worker 内 部 ， 调 用 close () 方 法 也 可 以 停止 工作 。 就 像 在 页 面 中 调用 terminate () 方 法 一 样 ， 
Worker 停止 工作 后 就 不 会 再 有 事件 发 生 了 。 


//Web Worker 内 部 的 代码 


self.close(); CE 


25.6.3 含 其 他 脚本 
既然 无 法 在 Worker 中 动态 创建 新 的 <script> 元 素 ， 那 是 不 是 就 不 能 向 Worker 中 添加 其 他 脚本 了 
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呢 ? 不 是 ，Worker 的 全 局 作用 域 提供 这 个 功能 ， 即 我 们 可 以 调用 importscripts () 方 法 。 这 个 方法 接 
收 一 个 或 多 个 指向 JavaScript 文件 的 URL。 每 个 加 载 过 程 都 是 异步 进行 的 ， 因 此 所 有 脚本 加 载 并 执行 之 
后 ，importScripts() 才 会 执行 。 例 如 : 


//Web Worker 内 部 的 代码 
importSecripts ("filel.js"; "file2,js")s 


即使 file2 .js 先 于 filel .js 下载 完 , 执行 的 时 候 仍 然 会 按照 先后 顺序 执行 。 而且, 这 些 脚 本 是 
在 Worker 的 全 局 作用 域 中 执行 ， 如果 脚 本 中 包含 与 页 面 有 关 的 JavaScript 代 码 , 那么 脚本 可 能 无 法 正确 
运行 。 请 记 住 ，Worker 中 的 脚本 一 般 都 具有 特殊 的 用 途 ， 不 会 像 页 面 中 的 脚本 那么 功能 宽泛 。 





















































25.6.4 ”Web Workers 的 未 来 


Web Workers 规范 还 在 继续 制定 和 改进 之 中 。 本 节 所 讨论 的 Worker 目前 被 称 为 “专用 Worker” 
( dedicated worker )， 因 为 它们 是 专门 为 某 个 特定 的 页 面 服 务 的 ,不 能 在 页 面 间 共 享 。 该 规范 的 另外 一 个 
概念 是 “共享 Worker”( shared worker )， 这 种 Worker 可 以 在 浏览 器 的 多 个 标签 中 打开 的 同一 个 页 面 间 
共享 。 虽 然 Safari 5、Chrome 和 Opera 10.6 都 实现 了 共享 Worker， 但 由 于 该 规范 尚未 完稿 ， 因 此 很 可 能 
还 会 有 变动 。 

另外 ， 关 于 在 Worker 内 部 能 访问 什么 不 能 访问 什么 ， 到 如 今 仍然 争论 不 休 。 有 人 认为 Worker 应 该 
像 页 面 一 样 能 够 访问 任意 数据 ,不光 是 XHR，, 还 有 localStorage、sessionStorage、Indexed DB、 
Web Sockets 、Server-Send Events 等 。 好 像 支持 这 个 观点 的 人 更 多 一 些 ， 因 此 未 来 的 Worker 全 局 作用 域 
很 可 能 会 有 更 大 的 空间 。 


25.7 ”小结 


与 HTML5 同时 兴起 的 是 另外 一 批 JavaScript API。 从 技术 规范 角度 讲 ， 这 批 API 不 属于 HTMLS5， 
但 从 整体 上 可 以 称 它 们 为 HTML5 JavaScript API。 这 些 API 的 标准 有 不 少 虽 然 还 在 制定 当中 ,但 已 经 得 
到 了 浏览 器 的 广泛 支持 ， 因 此 本 章 重点 讨论 了 它们 。 
口 requestAnimationFrame(): 是 一 个 着 眼 于 优化 JavaScript 动画 的 API， 能 够 在 动画 运行 期 间 
发 出 信号 。 通 过 这 种 机 制 ， 浏 览 器 就 能 够 自动 优化 屏幕 重 绘 操作 。 
口 Page Visibility API: 让 开发 人 员 知 道 用 户 什么 时 候 正 在 看 着 页 面 ， 而 什么 时 候 页 面 是 隐藏 的 。 
口 Geolocation API: 在 得 到 许可 的 情况 下 ， 可 以 确定 用 户 所 在 的 位 置 。 在 移动 Web 应 用 中 ， 这 个 
API 非 常 重要 而 且 常 用 。 
口 File API: 可 以 读 取 文件 内 容 ， 用 于 显示 、 处 理 和 上 传 。 与 HTML5 的 拖 放 功能 结合 ， 很 容易 就 
能 创造 出 拖 放 上 传 功能 。 
口 Web Timing: 给 出 了 页 面 加 载 和 泻 染 过 程 的 很 多 信息 ， 对 性 能 优化 非常 有 价值 。 
口 Web Workers: 可 以 运行 异步 JavaScript 代码 ， 避 免 阻塞 用 户 界面 。 在 执行 复杂 计算 和 数据 处 理 
的 时 候 ， 这 个 API 非常 有 用 ; 要 不 然 ， 这 些 任务 轻 则 会 占用 很 长 时 间 ， 重 则 会 导致 用 户 无 法 与 
页 面 交 互 。 
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附录 A 


ECMAScript Harmony 





2004 年 Web 开发 重新 焕发 生机 的 大 背景 下 , 浏览 器 开发 商 和 其 他 相关 组 织 之 间 进 行 了 一 系列 

下 会 谈 , 讨论 应 该 如 何 改 进 JavaScript。ECMA-262 第 四 版 的 制定 工作 就 建立 在 两 大 相互 竞争 的 

提案 基础 上 : 一 个 是 Netscape 的 JavaScript 2.0， 另 一 个 是 Microsoft 的 JScriptNET。 各 方 抛 开 在 浏览 基 

领域 的 竞争 ， 聚 集 在 ECMA 磨 下 ， 提 出 了 和 希望 能 以 JavaScript 为 蓝本 设计 出 一 门 新 语言 的 建议 方案 。 最 

初 的 工作 草案 叫做 ECMAScript4， 而 且 很 长 时 间 以 来 ， 它 好 像 就 是 JavaScript 的 下 一 个 版 本 。 后 来 ,一 

个 叫 ECMAScript3.1 反 提 案 的 加 入 , 令 JavaScript 的 未 来 再 次 充满 了 疑问 ,在 反复 争论 之 后 , ECMAScript 

3.1 成 为 了 JavaScript 的 下 一 个 版 本 ,而且 未 来 的 工作 成 果 代号 Harmony ( 和 谐 )， 将 力争 让 
ECMAScript 4 向 ECMAScript 3.1 靠拢 。 

ECMAScript 3.1 最 终 改 名 为 ECMAScript 5， 很 快 就 完成 了 标准 化 。ECMAScript 5 的 详细 内 容 本 书 
已 经 介绍 过 了 。ECMAScript 5 的 标准 化 工作 一 完成 , Harmony 立即 被 担 上 日 程 。Harmony 与 ECMAScript 
5 的 指导 思想 比较 一 致 ， 就 是 只 进行 增 量 调整 ， 不 彻底 改造 语言 。 虽 然 到 2011 年 的 时 候 ，Harmony， 也 
就 是 未 来 的 ECMAScript 6， 还 没有 全 部 制定 完成 ， 但 其 中 的 几 个 部 分 已 经 尘埃 落 定 。 本 附录 所 要 介绍 
的 就 是 那些 将 来 肯定 能 进入 最 终 规范 的 部 分 。 不 过 也 提醒 一 下 大 家 , 在 将 来 的 实现 中 , 这 些 内 容 的 细节 
有 可 能 与 你 在 这 里 看 到 的 不 一 样 。 


A.1 一 般 性 变化 


Harmony 为 ECMAScript 引入 了 一 些 基 本 的 变化 。 对 这 门 语言 来 说 ， 这 些 虽然 不 算是 大 的 变化 ,但 
的 确 也 弥补 了 它 功能 上 的 一 些 缺 憾 。 







































































TT 


A.1.1 常量 

没有 正式 的 常量 是 JavaScript 的 一 个 明显 缺陷 。 为 了 弥补 这 个 缺陷 ,标准 制定 者 为 Harmony 增加 了 
用 const 关键 字 声 明 常 量 的 语法 。 使 用 方式 与 var 类 似 , 但 const 声明 的 变量 在 初始 赋值 后 ， 就 不 能 
再 重新 赋值 了 。 来 看 一 个 例子 。 

const MAX_SIZE = 25; 

可 以 像 声明 变量 一 样 在 任何 地 方 声明 常量 。 但 在 同一 作用 域 中 ,常量 名 不 能 与 其 他 变量 或 函数 名 重 
名 ， 因 此 下 列 声明 会 导致 错误 : 


const FLAG = true; 
var FLAG = false; // 错 误 | 
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除了 值 不 能 修改 之 外 ,可 以 像 使 用 任何 变量 一 样 使 用 常量 。 修 改 常量 的 值 ， 不 会 有 任何 效果 ,如 下 
所 示 : 
const FLAG = true; 


FLAG = false; 
alert (FLAG); //true 


支持 常量 的 浏览 器 有 Firefox、Safari3+、Opera 9+ 和 Chrome。 在 Safari 和 Opera 中 ，const 与 var 
的 作用 一 样 ， 因 为 前 者 定义 的 常量 的 值 是 可 以 修改 的 。 


A.1.2 ” 块 级 作用 域 及 其 他 作用 域 


本 书 时 不 时 就 会 提醒 读者 一 句 : JavaScript 没有 块 级 作用 域 。 换 句 话 说， 在 语句 块 中 定义 的 变量 与 
在 包含 函数 中 定义 的 变量 共享 相同 的 作用 域 Harmony 新 增 了 定义 块 级 作用 域 的 语法 :使 用 let 关键 字 。 

与 const 和 var 类 似 , 可 以 使 用 let 在 任何 地 方 定 义 变量 并 为 变量 赋值 。 区 别 在 于 , 使 用 let 定 
义 的 变量 在 定义 它 的 代码 块 之 外 没有 定义 。 比 如 说 吧 ， 下 面 是 一 个 非常 常见 的 代码 块 : 


for (var i=0; i < 10; i++) { 


/ /执行 菜 些 操作 












































} 


alert (i); //10 


在 上 面 的 代码 块 中 ， 变 量 i 是 作为 代码 块 所 在 函数 的 局 部 变量 来 声明 的 。 ee 在 for 循环 
执行 完毕 后 ， 仍 然 能 够 读 取 i 的 值 。 如 果 在 这 里 使 用 let 代替 var， 则 循环 之 后 ， 变 量 i 将 不 复 存在 。 
看 下 面 的 例子 。 


for (let i=0; i < 10; i++) { 
/ /执行 菜 些 操作 














} 

alert (i); // 错 误 | 变量 i 没有 定义 

以 上 代码 执行 到 最 后 一 行 的 时 候 ， 就 会 出 现 错误 ， 因 为 for 循环 一 结束 ， 变 量 i 就 已 经 没有 定义 
了 。 因 为 不 能 对 没有 定义 的 变量 执行 操作 ， 所 以 发 生 错误 是 自然 的 。 

还 有 另外 一 种 使 用 let 的 方式 ， 即 创建 let 语句 ， 在 其 中 定义 只 能 在 后 续 代 码 块 中 使 用 的 变量 ， 
像 下 面 的 例子 这 样 : 


Var num = 5; 

















let (num=10, multiplier=2)f{ 
alert (num * multiplier); //20 


} 


alert (num); //5 

以 上 代码 通过 let 语句 定义 了 一 个 区 域 ， 这 个 区 域 中 的 变量 num 等 于 10，multiplier 等 于 2。 
此 时 的 num 覆盖 了 前 面 用 var 声明 的 同名 变量 ,因此 在 let 语句 块 中 ,num 乘 以 multiplier 等 于 20。 
而 出 了 let 语句 块 之 后 , num 变量 的 值 仍然 是 5。 这 是 因为 1et 语句 创建 了 自己 的 作用 域 , 这 个 作用 域 
里 的 变量 与 外 面 的 变量 无 关 。 





























图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


附录 A ECMAScript Harmony 703 








使 用 同样 的 语法 还 可 以 创建 let 表达 式 ， 其 中 的 变量 只 在 表达 式 中 有 定义 。 再 看 一 个 例子 。 


Var result = let (num=10, multiplier=2) num * multiplier; 
alert (result); //20 


这 里 的 let 表达 式 使 用 两 个 变量 计算 后 得 到 一 个 值 , 保存 在 变量 result 中 ,执行 表达 式 之 后 , num 
和 multiplier 变量 就 不 存在 了 。 
在 JavaScript 中 使 用 块 级 作用 域 ， 可 以 更 精细 地 控制 代码 执行 过 程 中 变量 的 存 废 。 


A.2 函数 


大 多 数 代 码 都 是 以 函数 方式 编写 的 ， 因 此 Harmony 从 几 个 方面 改进 了 区 数 ， 使 其 更 便于 使 用 。 与 
Harmony 中 其 他 部 分 类 似 ， 对 函数 的 改进 也 集中 在 开发 人 员 和 实现 人 员 共 同 面临 的 难题 上 。 


A.2.1 剩余 参数 与 分 布 参数 


Harmony 中 不 再 有 arguments 对 象 ， 因 此 也 就 无 法 通过 它 来 读 取 到 未 声明 的 参数 。 不 过 ， 使 用 剩 
余 参 数 (restarguments ) 语法 ， 也 能 表示 你 期 待 给 函数 传人 可 变数 量 的 参数 。 剩 余 参 数 的 语法 形式 是 三 
个 点 后 跟 一 个 标识 符 。 使 用 这 种 语法 可 以 定义 可 能 会 传 进来 的 更 多 参数 , 然后 把 它们 收集 到 一 个 数组 中 。 
来 看 一 个 例子 。 
function sum(numl, num2, ...nums)t{ 
Var result = numl + num2; 


for (let i=0, len=nums.length; i < len; i++){ 
result += nums[i]; 










































































: 


return result; 


} 

Var result = sum(1, 2, 3, 4, 5, 6); 

以 上 代码 定义 了 一 个 sum() 函数 ,接收 至 少 两 个 参数 。 这 个 函数 还 能 接收 更 多 参数 ， 而 其 余 参 数 都 
将 保存 在 nums 数组 中 。 与 原来 的 arguments 对 象 不 同 ， 剩 余 参 数 都 保存 在 Array 的 一 个 实例 中 ， 因 
此 可 以 使 用 任何 数组 方法 来 操作 它们 。 另 外 ,即使 并 没有 多 余 的 参数 传人 函数 ,剩余 参数 对 象 也 是 Array 
的 实例 。 

与 剩余 参数 紧密 相关 的 另 一 种 参数 语法 是 分 布 参数 ( spread arguments )。 通 过 分 布 参数 ， 可 以 向 函 
数 中 传人 一 个 数组 ,然后 数组 中 的 元 素 会 映射 到 函数 的 每 个 参数 上 。 分 布 参数 的 语法 形式 与 剩余 参数 的 
语法 相同 ， 就 是 在 值 的 前 面 加 三 个 点 。 唯 一 的 区 别 是 分 布 参数 在 调用 函数 的 时 候 使 用 ， 而 剩余 参数 在 定 
义 函 数 的 时 候 使 用 。 比 如 ， 我 们 可 以 不 给 sum () 函数 一 个 一 个 地 传人 参数 ， 而 是 传人 分 布 参数 : 


Var result = sum(...[1, 2, 3, 4, 5, 6]); 


在 这 里 ,我 们 将 一 个 数组 作为 分 布 参数 传 给 了 sum() 函数 ,以 上 代码 在 功能 上 与 下 面 这 行 代码 等 价 : 


Var result = sum.apply (this, [1, 2, 3, 4, 5, 6]); 
A.2.2 默认 参数 值 
ECMAScript 函数 中 的 所 有 参数 都 是 可 选 的 ， 因 为 实现 不 会 检查 传人 的 参数 数量 。 不 过 ， 除 了 手工 




































































图 灵 社 区 会 员 stinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


704 附录 A ECMAScript Harmony 








今 查 传人 了 哪个 参数 之 外 ， 你 还 可 以 为 参数 指定 默认 值 。 如 果 调 用 函数 时 没有 传 入 该 参数 ,那么 该 参数 
就 会 使 用 默认 值 。 
要 为 参数 指定 默认 值 ， 可 以 在 参数 名 后 面 直接 加 上 等 于 号 和 默认 值 ， 就 像 下 面 这 样 : 


function sum(numl, num2=0){ 
return numl + num2; 




















} 


Var result1 
Var result2 


这 个 sum() 函数 接收 两 个 参数 ,但 第 二 个 参数 是 可 选 的 ， 因 为 它 的 默认 值 为 0。 使 用 可 选 参数 的 好 
处 是 开发 人 员 不 用 再 去 检查 是 否 给 某 个 参数 传人 了 值 ， 如 果 没 有 的 话 就 使 用 某 个 特定 的 值 。 默 认 参 数值 
帮 你 解除 了 这 个 困扰 。 


A.2.3 生成 器 


所 谓 生 成 器 ， 其实 就 是 一 个 对 象 ， 它 每 次 能 生成 一 系列 值 中 的 一 个 。 对 Harmony 而 言 , 要 创建 生成 
器 ， 可 以 让 函数 通过 yiela 操作 符 返 回 某 个 特殊 的 值 。 对 于 使 用 yiela 操作 符 返 回 值 的 函数 ， 调 用 它 
时 就 会 创建 并 返回 一 个 新 的 Generator 实例 。 然 后 ， 在 这 个 实例 上 调用 next () 方 法 就 能 取得 生成 器 
的 第 一 个 值 。 此 时 ， 执 行 的 是 原来 的 函数 ， 但 执行 流 到 yiela 语句 就 会 停止 ， 只 返回 特定 的 值 。 从 这 
个 角度 看 , yield 与 return 很 相似 。 如 果 再 次 调用 next () 方 法 , 原来 函数 中 位 于 yield 语句 后 的 代 
码 会 继续 执行 ， 直 到 再 次 遇见 yiela 语句 时 停止 执行 ， 此 时 再 返回 一 个 新 值 。 来 看 下 面 的 例子 。 
function myNumbers(){ 


for (var i=0; i < 10; i++){ 
yield i * 2:; 


sum(5); 
sum(5, 5); 




































































} 
} 


Var generator = myNumbers (); 


try { 
while(true)t{ 
document .write(generator.next() + "<br />"); 
} 
} catch(ex){ 
// 有 意 没有 写 代 码 
} finally { 
generator.close(); 


} 


调用 myNumbers () 函数 后 ， 会 得 到 一 个 生成 锅 。myNumbers () 函数 本 身 非常 简单 ， 包 含 一 个 每 次 
循环 都 产生 一 个 值 的 for 循环 。 每 次 调用 next () 方 法 都 会 执行 一 次 for 循环 , 然后 返回 下 一 个 值 。 第 
一 个 值 是 0, 第 二 个 值 是 2, 第 三 个 值 是 4, 依 此 类 推 。 在 myNumbers () 函数 完成 退出 而 没有 执行 yiela 
语句 时 ( 最 后 一 次 循环 判断 i 不 小 于 10 的 时 候 )， 生 成 器 会 抛 出 stopIteration 错误 。 因 此 , 为 了 输 
出 生成 器 能 产生 的 所 有 数值 , 这 里 用 一 个 try-catch 结构 包装 了 一 个 while 循环 ,以 避免 出 错时 中 断 
代码 执行 。 

如 果 不 再 需要 某 个 生成 器 , 最 好 是 调用 它 的 close() 方 法 。 这 样 会 执行 原始 函数 的 其 他 部 分 , 包括 
try-catch 相关 的 finally 语句 块 。 
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在 需要 一 系列 值 ， 而 每 一 个 值 又 与 前 一 个 值 存在 某 种 关系 的 情况 下 ， 可 以 使 用 生成 器 。 





A.3 数组 及 其 他 结构 


Harmony 的 另 一 个 重点 是 数组 。 数 组 是 JavaScript 使 用 最 频繁 的 一 种 数据 结构 ， 因 此 定义 一 些 更 直 





观 更 方便 地 使 用 数组 的 方式 ， 绝 对 是 改进 这 门 语言 时 最 优先 考虑 的 事 。 
A.3.1 和 迭代 器 








和 欠 代 器 也 是 一 个 对 象 , 它 能 迭代 一 系列 值 并 每 次 返回 其 中 一 个 值 。 想象 一 下 使 用 for 或 for-in 循 
环 ， 这 时 候 就 是 在 迭代 一 批 值 ， 而 且 每 次 操作 其 中 的 一 个 值 。 和 迭代 器 的 作用 相同 ， 只 不 过 用 不 着 使 用 循 

















环 了 。Harmony 为 各 种 类 型 的 对 象 都 定义 了 迭代 需 。 




















要 为 对 象 创建 迭代 器 ,可 以 调用 Iterator 构造 丽 数 ,传人 想 要 迭代 其 值 的 对 象 。 要 取得 对 象 中 的 
下 一 个 值 ， 可 以 调用 迭代 器 的 next () 方 法 。 默 认 情况 下 ， 这 个 方法 会 返回 一 个 数组 。 如 果 和 迭代 的 是 数 











组 , 那么 返回 数组 的 第 一 个 元 素 是 值 的 索引 ， 如 果 和 迭代 的 是 对 象 , 那么 返回 数组 的 第 一 个 元 素 是 值 的 属 
性 名 ; 返回 数组 的 第 二 个 元 素 是 值 本 身 。 如 果 所 有 值 都 已 经 迭代 了 一 遍 ， 则 再 调用 next () 会 抛 出 





StopIteration 错误 。 看 下 面 这 个 例子 。 


Var person = { 
name: "Nicholas", 
age: 29 





}; 


Var iterator = new Iterator(person); 


try { 
while(true)t 
let value = iterator.next(); 
document .write(value.join(":") + "<br>"); 
} 
} catch(ex){ 
// 有 意 没 有 写 代码 
} 














以 上 代码 为 person 对 象 创建 了 一 个 迭代 器 。 第 一 次 调用 next () 方 法 ， 返 回 数组 ["name",， 























"Nicholas"]， 第 二 次 调用 返回 数组 ["age"，29]。 以 上 代码 的 输入 结果 为 : 





name:Nicholas 
age:29 





如 果 为 非 数 组 对 象 创建 狗 代 器 ,， 则 迭代 器 会 按照 与 使 用 for-in 循环 一 样 的 顺序 , 返 
属性 。 这 就 意味 着 迭代 右 也 只 能 返回 对 象 的 实例 属性 ,而 且 返 回 属性 的 顺序 也 会 因 实现 而 异 。 为 数组 创 

















建 的 迭代 器 也 类 似 ， 即 按 数 组 元 素 顺 序 依次 返回 值 ， 下 面 是 一 个 例子 。 


Var colors = ["red", "green", "blue"]; 
var iterator = new Iterator(colors); 





try { 
while(true)t 
let value = iterator.next(); 
document .write(value.join(":") + "<br>"); 
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} 
} catch(ex){ 


} 
以 上 代码 的 输出 结果 如 下 : 


0:red 
1:green 
2:blue 


如 果 你 只 想 让 next () 方 法 返回 对 象 的 属性 名 或 者 数组 的 索引 值 ,可 以 在 创建 迭代 器 时 为 Iterator 
构造 函数 传人 第 二 个 参数 true， 如 下 所 示 : 

var iterator = new Iterator(colors, true); 

在 这 样 创建 的 迭代 器 上 每 次 调用 next () 方 法 ， 只 会 返回 数组 中 每 个 值 的 索引 ， 而 不 会 返回 包含 索 
引 和 值 数 组 。 


















如 果 想 为 自 定义 类 型 创建 迭代 器 ， 需 要 定义 一 个 特殊 的 方法 iterator _ ()， 
这 个 方法 应 该 返回 一 个 包含 next () 方 法 的 对 象 。 当 把 自 定义 类 型 传 给 Iterator 构 
造 函 数 时 ， 就 会 调用 那个 特殊 的 方法 。 






A.3.2 ”数组 领情 

所 谓 数组 领悟 〈 array comprehensions )， 指 的 是 用 一 组 符合 某 个 条 件 的 值 来 初始 化 数组 。Harmony 
定义 的 这 项 功能 借鉴 了 Python 中 流行 的 一 个 语言 结构 。JavaScript 中 数组 领悟 的 基本 形式 如 下 : 

array = [ value for each (variable in values) condition ]; 

其 中 ，value 是 实际 会 包含 在 数组 中 的 值 ， 它 源 自 values 数组 。for each 结构 会 循环 values 
中 的 每 一 个 值 ， 并 将 每 个 值 保 存在 变量 variaple 中 。 如 果 保 存在 variable 中 的 值 符合 condition 
条 件 ， 就 会 将 这 个 值 添加 到 结果 数组 中 。 下 面 是 一 个 例子 。 


// 原 始 数组 
Var numbers = [0,1,2,3,4,5,6,7,8,9,10]; 




















// 把 所 有 元 素 复 制 到 新 数组 


var duplicate = [i for each (i in numbers)]; 


// 只 把 偶数 复制 到 新 数组 
var evens = [i for each (i in numbers) if (i % 2 == 0)]; 


// 把 每 个 数 乘 以 2 后 的 结果 放 到 新 数组 中 


Var doubled = [i*2 for each (i in numbers)]; 


// 把 每 个 奇数 乘 以 3 后 的 结果 放 到 新 数组 中 

var tripledOdds = [i*3 for each (i in numbers) if (i % 2 > 0)]; 

在 以 上 代码 的 数组 领悟 部 分 , 我 们 使 用 变量 i 迭代 了 numbers 中 的 所 有 值 , 而 其 中 一 些 语句 给 出 了 
条 件 ， 以 筛选 最 终 包 含 在 数组 中 的 结果 。 本 质 上 讲 ， 只 要 条 件 求 值 为 true,， 该 值 就 会 添加 到 数组 中 。 与 
自己 编写 同样 功能 的 for 循环 相 比 ， 数 组 领悟 的 语法 稍 有 不 同 ， 但 却 更 加 简洁 。Firefox 2+ 是 唯一 支持 数 
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组 领悟 的 浏览 器 ， 而 且 要 使 用 这 个 功能 ， 必 须 将 <script> 的 type 属性 值 指 定 为 "application/ 


javascript;version=1.7", 





数组 领悟 语法 的 values 也 可 以 是 一 个 生成 器 或 者 一 个 迭代 器 。 





A.3.3 ”解构 赋值 


从 一 组 值 中 挑 出 一 或 多 个 值 ， 然 后 把 它们 分 别 赋 给 独立 的 变量 , 这 也 是 一 个 很 常见 的 需求 。 就 拿 j 
代 咒 的 next () 方 法 返回 的 数组 来 说 ， 假 设 这 个 数组 包含 着 对 象 中 一 个 属性 的 名 称 和 值 。 为 了 把 这 个 居 
性 和 值 分 别 保存 在 各 自 的 变量 中 ， 需 要 写 两 个 语句 ， 如 下 所 示 。 


Var nextValue = ["color", "red"]; 
Var name = nextValue[0]; 
Var Value = nextValuel[1]; 


而 使 用 解构 赋值 ( destructuring assignments ) 语法 ， 用 一 条 语句 即 可 解决 问题 : 





昼 嵌 











Var [name, value] = ["color", "red"]; 
alert (name); // "EGLO" 
alert (value); //"red" 


在 传统 的 JavaScript 中 ， 数 组 字面 量 是 不 能 出 现在 等 于 号 ( 赋值 操作 符 ) 左边 的 。 解 构 赋值 的 这 种 
语法 表示 的 是 把 等 于 号 右边 数组 中 包含 的 值 ， 分 别 赋 给 等 于 号 左边 数组 中 的 变量 。 结 果 就 是 变量 name 
的 值 为 "color"， 变 量 value 的 值 为 "red"。 

如 果 你 不 想 取得 数组 中 所 有 的 值 ， 可 以 只 在 数组 字面 量 中 给 出 对 应 的 变量 ， 比 如 : 


Var [, value] = ["color", "red"]; 
alert (value); //"red" 


这 样 就 只 会 给 变量 value 赋值 ， 值 为 "red"。 
有 了 解构 赋值 ， 还 可 做 点 有 创意 的 事 儿 ， 比 如 交换 变量 的 值 。 在 ECMAScript 3 中 ， 要 交换 两 个 变 
量 的 值 ， 一 般 是 要 这 样 写 代码 的 : 


Var Value1l 
Var Value2 











’ 


3 
0% 


Var temp = valuel; 
valuel = value2; 
value2 = temp; 


利用 解构 后 的 数组 赋值 ， 可 以 省 掉 那 个 临时 变量 temp ， 比 如 : 


Var valuel = 5; 
Var Value2 = 10; 
[value2, valuel] = [valuel, value2]; 
解构 赋值 同样 适用 于 对 象 ， 看 下 面 这 个 例子 : 
var person = { 

name: "Nicholas", 


age: 29 
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var { name: personName, age: personAge } = person; 


alert (personName); //"Nicholas" 
alert (personAge); //29 


与 使 用 数组 字面 量 一 样 ， 看 到 等 于 号 左边 出 现 了 对 象 字 面 量 , 那 就 是 解构 赋值 表达 式 。 这 条 语句 实 
际 上 定义 了 两 个 变量 ，personName 和 personAge， 它 们 分 别 得 到 了 person 对 象 中 对 应 的 值 。 与 数 
组 解构 赋值 一 样 ， 在 对 象 解构 赋值 中 也 可 以 选择 要 取得 的 值 ， 比 如 : 


Var { age: personAge } = person; 
alert (personAge); //29 


以 上 代码 只 取得 了 person 对 象 中 age 属性 的 值 ， 将 它 赋 给 了 变量 personage。 


A.4 ”新 对 象 类 型 


Harmony 为 JavaScript 定义 了 几 个 新 的 对 象 类 型 。 这 几 个 新 类 型 提供 了 以 前 只 有 JavaScript 引擎 才能 
使 用 的 功能 。 


A.4.1 代理 对 象 


Harmony 为 JavaScript 引入 了 代理 的 概念 。 所 谓 代理 ( proxy )， 就 是 一 个 表示 接口 的 对 象 ， 对 它 的 
操作 不 一 定 作 用 在 代理 对 象 本 身 。 举 个 例子 ,设置 代理 对 象 的 一 个 属性 ,实际 上 可 能 会 在 另 一 个 对 象 上 
调用 一 个 函数 。 代 理 是 一 种 非常 有 用 的 抽象 机 制 ， 能 够 通过 API 只 公开 部 分 信息 ， 同 时 还 能 对 数据 源 进 
行 全 面 控制 。 

要 创建 代理 对 象 ， 可 以 使 用 Proxy .create() 方 法 , 传人 一 个 nandler (处 理 程序 ) 对 象 和 一 个 
可 选 的 prototype (原型 ) 对 象 : 


Var proxy = Proxy.create (handler); 































































































/ /创建 一 个 以 myObject 为 原型 的 代理 对 象 
Var proxy = Proxy.create(handler, myObject); 


其 中 ，handler 对 象 包含 用 于 定义 捕捉 器 (trap ) 的 属性 。 捕 捉 需 本 身 是 函数 ， 用 于 处 理 ( 捕捉 ) 

原生 功能 ， 以 便 该 功能 能 够 以 男 一 种 方式 来 处 理 。 要 确保 代理 对 象 能 够 按照 预期 工作 ， 至 少 要 实现 以 下 

7 种 基本 的 捕 提 器 。 

口 getownPropertyDescriptor: 当 在 代理 对 象 上 调用 object .getownPropertyDescriptor () 
时 调用 的 函数 。 这 个 函数 以 接收 到 的 属性 名 作为 参数 ， 返回 属性 描述 符 , 或 者 在 属性 不 存在 时 返 
回 null。 

口 getPropertyDescriptor: 当 在 代理 对 象 上 调用 object .getPropertyDescriptor () 时 调 
用 的 函数 。( 这 是 Harmony 中 的 新 方法 。) 这 个 函数 以 接收 到 的 属性 名 作为 参数 ， 返 回 属性 描述 
符 , 或 者 在 属性 不 存在 时 返回 nul1。 

口 getownPropertyNames: 当 在 代理 对 象 上 调用 object .getownPropertyNames () 时 调用 的 

函数 。 这 个 函数 以 接收 到 的 属性 名 作为 参数 ， 应 该 返回 一 个 字符 串 数组 。 

口 getPropertyNames: 当 在 代理 对 象 上 调用 object .getPropertyNames () 时 调用 的 函数 。 

(这 是 Harmony 中 的 新 方法 。) 这 个 函数 以 接收 到 的 属性 名 作为 参数 , 应 该 返回 一 个 字符 串 数组 。 
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口 defineProperty: 当 在 代理 对 象 上 调用 object .defineProperty () 时 调用 的 函数 。 这 个 区 
数 以 接收 到 的 属性 名 和 属性 描述 符 作为 参数 。 

口 delete: 定义 在 对 象 属性 上 使 用 aelete 操作 符 时 调用 的 函数 。 属 性 名 以 参数 形式 传 进来 ， 如 
果 删 除 成 功 则 返回 true， 删 除 失败 返回 false。 


口 fix: 当 调 用 object.freeze()、object.seal1() 或 object.preventExtensions () 时 调 



































用 的 函数 。 当 在 代理 对 象 上 调用 这 几 个 方法 时 ， 返 回 undefined 以 抛 出 错误 。 
除了 这 7 个 基本 的 捕 提 器 , 还 有 6 个 派生 的 捕捉 器 (derivedtrap )。 与 基本 捕捉 器 不 同 ， 少 定义 一 
或 几 个 派生 捕捉 器 不 会 导致 错误 。 每 个 派生 的 捕捉 器 都 会 覆盖 一 种 默认 的 JavaScript 行为 。 


数 ， 返 











D enumerate: 


回 true 











口 get: 在 读 取 属 | 性 
名 。 这 个 对 象 引 用 可 能 是 代理 对 象 本 身 ， 也 可 能 是 继承 了 代理 对 象 的 对 象 。 

口 set: 在 写 人 属性 时 调用 的 函数 。 这 个 函数 接收 三 个 参数 ， 即 包含 被 写 属性 的 对 象 的 引用 、 属 性 名 
和 属性 值 。 与 get 类 似 ， 这 个 对 象 引 用 可 能 是 代理 对 象 本 身 ， 也 可 能 是 继承 了 代理 对 象 的 对 象 。 
当代 理 对 象 被 放 在 for-in 循环 中 时 调用 的 函数 。 这 个 函数 必须 返回 一 个 字符 串 




















口 has 在 对 象 上 使 用 in 操作 符 (例如 "name" in object ) 时 调用 的 函数 。 以 接收 到 的 属性 名 作 
为 参数 ， 返 回 true 表示 对 象 包含 该 属性 ， 和 否则 返回 false。 
口 nasown: 在 代理 对 象 上 调用 hasownProperty () 方 法 时 调用 的 函数 。 以 接收 到 的 属性 名 作为 参 

















表示 对 象 包含 该 属性 ， 否 则 返回 false。 
性 时 调用 的 函数 。 这 个 函数 接收 两 个 参数 ， 即 包含 被 读 属 性 的 对 象 的 引用 及 属 











el 






































数组 ， 其 中 包含 在 for-in 循环 中 使 用 的 相应 属性 名 。 

口 keys: 当 在 代理 对 象 上 调用 object .keys () 时 调用 的 函数 。 与 enumerate 类 似 ， 这 个 函数 也 
必须 返回 一 个 字符 串 数组 。 

在 需要 公开 API， 而 同时 又 要 避免 使 用 者 直接 操作 底层 数据 的 时 候 ， 可 以 使 用 代理 。 例 如 ， 假 设 你 








想 实现 一 个 传统 的 栈 数据 类 型 。 虽 然 数 组 可 以 作为 栈 来 使 用 ,但 你 想 保证 人 们 只 
和 length。 在 这 种 情况 下 ， 就 可 以 基于 数组 创建 一 个 代理 对 象 ， 只 对 外 公开 这 





/* 
* 实 验 ES 6 代理 对 象 。 这 个 实验 在 数组 的 基础 上 创建 一 个 栈 数据 结构 





使 用 push()、pop() 


三 个 对 象 成 员 。 


* 代 理 在 此 用 于 从 接口 过 滤 "push"、"pop" 和 "length" 之 外 的 成 员 ， 让 数组 成 为 一 个 纯粹 的 栈 ， 


* 任 何人 不 能 直接 操作 其 内 容 。 
A 


var Stack = (function(){ 


var stack = [], 
allowed = ["push", "pop", "length" ]; 


return Proxy.createl(t{ 
get: function(receiver, name) 
if (allowed.indexOof (name) > -1)f{ 
if(typeof stack[name] == "function")t{ 
return stack[namel] .bind(stack); 
} else { 
return stacklnamel]; 


{; 


} 
} else { 
return undefined; 


} 
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3 
3 
Var mystack = new Stack(); 


mystack.push ("hi"); 
mystack.push("goodbye"); 


console.log(mystack.length); 


console.log(mystack[0]); 
console.log(mystack.pop()); 


以 上 代码 创建 了 一 个 构造 函数 stack。 但 它 没 有 使 用 this， 而 是 返 


//1 


// 未 定义 
//"goodbye" 








回 了 一 个 对 数组 操作 进行 包装 


的 代理 对 象 。 这 个 代理 对 象 只 定义 了 一 个 get 捕 提 咒 , 该 函数 检测 了 一 组 允许 的 属性 , 然后 才 返 回 相应 








的 值 。 如 果 引 用 的 是 不 被 允许 的 属性 ,那么 捕捉 器 就 返回 undefined; 如 果 引 
和 length， 则 一 切 正 常 。 这 里 的 关键 是 get 捕捉 器 ， 它 根据 允 询 























用 的 是 push() 、pop () 
F 的 成 员 过 滤 了 对 象 的 成 员 。 如 果 该 成 





员 是 函数 ， 就 返回 一 个 与 底层 数组 对 象 绑 定 的 函数 ， 这 样 操作 针对 的 就 是 数组 而 非 代 理 对 象 。 





A.4.2 ”代理 函数 





除了 创建 代理 对 象 之 外 ，Harmony 还 支持 创建 代理 函数 (proxy function )。 代 理 函 数 与 代理 对 象 的 
区 别 是 它 可 以 执行 。 要 创建 代理 函数 ,可 以 调用 Proxy .createFunction() 方 法 , 传人 一 个 handler 
(处理 程序 ) 对 象 、 一 个 调用 捕捉 器 函数 和 一 个 可 选 的 构造 函数 捕捉 器 函数 。 例 如 : 


Var proxy = Proxy.createFunction(handler, 
与 代理 对 象 一 样 ，handler 对 象 也 有 同样 多 的 捕 提 器 。 调 用 捕捉 器 函数 是 在 代表 
proxy () ) 时 运行 的 代码 。 构 造 函 数 捕捉 器 是 在 用 new 操作 符 调用 代 弄 
有 捉 器 ， 则 使 用 调用 捕捉 器 作为 构造 函数 。 











行 的 代码 。 如 果 没 有 指定 构造 函数 
映射 与 集合 








A.4.3 





Map 类 型 ， 也 称 为 简单 映射 ， 只 有 一 个 目的 : 保存 一 组 键 值 对 儿 。 玫 





function(){}, function(){}); 









































保存 键 值 对 儿 , 但 问题 是 那样 做 会 导致 键 容易 与 原生 属性 混淆 ,简单 映射 能 做 到 键 和 值 与 
从 而 保证 对 象 属性 的 安全 存储 。 以 下 是 使 用 简单 映射 的 几 个 例子 。 


var map = new Map(); 


map.set ("name", "Nicholas"); 


map.set ("book", 


console.log(map.has ("name")); 
console.log(map.get ("name")); 


map.delete ("name"); 


简单 映射 的 基本 API 包 括 get () 、 


是 原始 值 ， 也 可 是 引用 值 。 








"Professional JavaSsScript"); 


//true 
//"Nicholas" 














set () 和 delete()， 每 个 方法 的 作 


EE 也 数 执行 ( 如 


EE 的 数 ( 如 new proxy () ) 时 运 











F 发 人 员 通 常 都 使 用 普通 对 象 来 











对 象 属性 分 离 ， 


用 看 名 字 就 知道 了 。 键 可 以 


与 简单 映射 相关 的 是 set 类 型 。 集 合 就 是 一 组 不 重复 的 元 素 。 与 简单 映射 不 同 的 是 , 集合 中 只 有 键 ， 
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没有 与 键 关联 的 值 。 在 集合 中 ,添加 元 素 要 使 用 adqa ( ) 方 法 , 检查 元 素 是 否 存在 要 使 用 has () 方 法 , 而 
删除 元 素 要 使 用 aelete () 方 法 。 以 下 是 基本 的 使 用 示例 。 


Var Set = new Set(); 
set.add ("name"); 














console.log(set.has ("name")); //true 
set.delete("name"); 


console.log(set.has ("name")); //false 
截止 到 2011 年 10 月 , 规范 中 关于 Map 和 set 的 内 容 还 没有 最 后 定稿 。 因 此 , 在 JavaScript 引擎 实 
现 该 规范 时 ， 有 些 细节 可 能 会 发 生变 化 。 








A.4.4 WeakMap 


WeakMap 是 ECMAScript 中 唯一 一 个 能 让 你 知道 什么 时 候 对 象 已 经 完全 解除 引用 的 类 型 。weakMap 
与 简单 映射 很 相似 ， 也 是 用 来 保存 键 值 对 儿 的 。 它 们 的 主要 区 别 在 于 ，weakMap 的 键 必须 是 对 象 ， 而 
在 对 象 已 经 不 存在 时 ， 相 关 的 键 值 对 儿 就 会 从 weakMap 中 被 删除 。 例 如 : 


{}, 
new WeakMap (); 



































var key 
map 


map.set (key, "Hello!"); 


/ /解除 对 键 的 引用 ， 从 而 删除 该 值 
key = null; 


至 于 什么 情况 下 适合 使 用 weakMap， 目 前 还 不 清楚 。 不 过 ，Java 中 倒是 有 一 个 相同 的 数据 结构 叫 
WeakHashMap; 于 是 ，JavaScript 又 多 了 一 种 数据 类 型 。 








A.4.5 StructType 


JavaScript 一 个 最 大 的 不 足 是 使 用 一 种 数据 类 型 表示 所 有 数值 。WebGL 为 解决 这 个 问题 引入 了 类 型 
化 数组 ， 而 ECMAScript 6 则 引入 了 类 型 化 结构 ， 为 这 门 语言 带 来 了 更 多 的 数值 数据 类 型 。 结 构 类 型 
(structType ) 与 C 语 言 中 的 结构 类 似 ; 在 C 语 言 中 , 可 以 把 多 个 属性 组 合成 一 条 记录 。 对 于 JavaScript 
的 结构 类 型 ， 通 过 指定 属性 及 其 保存 的 数据 类 型 ， 也 可 以 创建 类 似 的 数据 结构 。 早 期 的 实现 定义 了 以 下 
几 种 块 类 型 。 
D uint8: 无 符号 8 位 整数 。 
口 int8: 有 符号 8 位 整数 。 
口 uint16: 无 符号 16 位 整数 。 
口 int16: 有 符号 16 位 整数 。 
口 uint32: 无 符号 32 位 整数 。 
口 int32: 有 符号 32 位 整数 。 
口 float32: 32 位 浮 点 数 。 
口 float64: 64 位 浮 点 数 。 
这 些 块 类 型 都 只 能 包含 一 个 值 。 将 来 还 有 望 在 这 8 种 类 型 基础 上 进一步 扩展 。 
要 创建 结构 类 型 的 对 象 , 可 以 使 用 new 操作 符 调用 stzructType, 传人 对 象 字面 量 形式 的 属性 定义 。 
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var Size = new StructType({ width: uint32, height: uint32 }); 

以 上 代码 创建 了 一 个 名 为 size 的 新 结构 类 型 ， 该 类 型 带 有 两 个 属性 : width 和 height。 这 两 个 
属性 都 应 该 保存 无 符号 32 位 整数 。 而 变量 size 实际 上 是 一 个 构造 函数 ， 可 以 像 使 用 对 象 的 构造 函数 
一 样 使 用 它 。 要 实例 化 这 个 结构 类 型 ， 需 要 向 构造 函数 中 传 和 一 个 带 属性 值 的 对 象 字 面 量 。 

Var boxSize = new Size({ width: 80, height: 60 }); 


console.log(boxSize.width); //80 
console.log(boxSize.height); //60 


这 样 ， 就 创建 了 size 的 一 个 宽 为 80 、 高 为 60 的 实例 。 实 例 的 属性 可 以 被 读 写 ， 但 始终 都 必须 包 
含 32 位 无 符号 整数 。 
将 属性 定义 为 另 一 个 结构 类 型 ， 可 以 得 到 更 复杂 的 结构 类 型 。 例 如 : 


Var Location = new StructType({ x: int32, y: int32 }); 
Var Box = new StructType({ size: Size, location: Location }); 





























Var boxInfo = new Box({ size: { width:80, height:60 }, location: { x: 0, y: 0 }}); 
console.log(boxIinfo.size.width); //80 


这 个 例子 创建 了 一 个 简单 的 结构 类 型 Location， 又 创建 了 一 个 复杂 的 结构 类 型 Box。Box 的 属性 
本 身 也 是 结构 类 型 。Box 构造 函数 仍然 接收 对 象 字面 量 参数 ， 以 便 为 每 个 属性 定义 值 , 但 它 会 检查 传人 
值 的 数据 类 型 ， 以 确保 作为 属性 值 的 数据 类 型 正确 。 

















A.4.6 ArrayType 


与 结构 类 型 密切 相关 的 是 数组 类 型 。 通过 数组 类 型 ( ArrayType ) 可 以 创建 一 个 数组 ,并 限制 数组 
的 值 必须 是 某 种 特定 的 类 型 (与 WebGL 中 的 类 型 化 数组 很 相似 )。 要 创建 新 的 数组 类 型 ， 可 以 调 月 
ArrayType 构造 函数 ， 并 传 入 它 应 该 保存 的 数据 类 型 以 及 应 该 保存 的 元 素数 目 。 例 如 : 


Var SizeArray = new ArrayType (Size, 2); 
Var boxes = new BoxArray ([ { width: 80, height: 60 }, { width: 50, height: 50 } ]); 


以 上 代码 创建 了 一 个 名 为 Sizearray 的 数组 类 型 ， 这 个 数组 类 型 只 能 保存 size 的 实例 ， 同 时 也 
给 数组 分 配 了 两 个 该 实例 的 位 置 。 要 实例 化 数组 类 型 ， 可 以 传人 一 个 数组 ， 其 中 包含 应 该 转换 的 数据 。 
数据 可 以 是 字面 量 ， 只 要 该 字面 量 能 提升 为 正确 的 数据 类 型 即 可 ( 比如 在 这 个 例子 中 , 传人 的 字面 量 可 
以 提升 为 结构 类 型 )。 


A.5 类 


开发 人 员 一 直 吵 着 要 在 JavaScript 中 增加 一 种 语法 , 用 于 定义 类 似 于 Java 的 类 。ECMAScript 6 最 终 
确实 定义 了 这 种 语法 。 但 JavaScript 中 的 类 只 是 一 种 语法 糖 ， 覆 盖 在 目前 基于 构造 函数 和 基于 原型 的 方 
式 和 类 型 之 上 。 先 看 看 下 面 的 类 型 定义 。 

function Person (name，age){ 


this.name = name; 
this.age = age; 





























nn 

































































} 


Person.prototype.sayName = function(){ 
alert (this.name); 
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}3 


Person.prototype.getOlder = function(years)t{ 
this.age += years; 


}3 
再 看 看 使 用 新 语法 定义 的 类 : 





class Person { 


constructor (name, age)t{ 
public name = name; 
public age = age; 


} 


sayName (){ 
alert (this.name); 


} 


getOlder (years)t{ 
this.age += years; 


} 
} 


新 语法 以 关键 字 class 开头 ,然后 就 是 类 型 名 ， 而 花 括号 中 定义 的 是 属性 和 方法 。 定 义 方法 不 必 
再 使 用 function 关键 字 ， 有 方法 名 和 圆 括号 就 可 以 。 如 果 把 方法 命名 为 constructor， 那 它 就 是 这 
个 类 的 构造 函数 ( 与 前 一 个 例子 中 的 Person 函数 一 样 )。 在 这 个 类 中 定义 的 方法 和 属性 都 会 添加 到 原 
型 上 ， 具 体 来 说 ，sayName () 和 getolder () 都 是 在 Person.prototype 上 定义 的 。 

在 构造 函数 中 , public 和 private 关键 字 用 于 创建 对 象 的 实例 属性 。 这 个 例子 中 的 name 和 age 
都 是 公有 属性 。 


A.5.1 私有 成 员 

关于 类 语法 的 建议 是 默认 支持 私有 成 员 的 , 包括 实例 中 的 私有 成 员 和 原型 中 的 私有 成 员 。private 
关键 字 表 示 成 员 是 私有 的 ， 不 能 在 类 方法 之 外 访问 。 要 访问 私有 成 员 ， 可 以 使 用 一 种 特殊 的 语法 ， 即 调 
用 private () 函数 并 传人 this 对象， 然后 再 访问 私有 成 员 。 例 如 ,下 面 这 个 例子 把 Person 类 的 age 
改 成 为 私有 属性 : 


class Person { 




































































ts 





constructor (name, age)t{ 
public name = name; 
private age = age; 


} 


sayName (){ 
alert (this.name); 


} 
getOlder (years)t{ 


private(this) .age += years; 


} 
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这 种 用 于 访问 私有 成 员 的 语法 还 没有 定论 ， 将 来 很 可 能 会 改变 。 
A.5.2 getter 和 和 setter 


新 的 类 语法 支持 直接 为 属性 定义 getter 和 setter, 从 而 避免 了 调用 opject.defineProperty () 
的 麻烦 。 为 属性 定义 getter 和 setter 与 定义 方法 类 似 ， 只 不 过 要 在 方法 名 前 加 上 get 和 set 关键 
年 5 例如 : 


class Person { 





constructor (name, age)t{ 
public name = name; 
public age = age; 
private innerTitle = ""7 


get title()t{ 
return innerTitle; 


} 


set title(value){ 
innerTitle = value; 
} 
} 
sayName (){ 
alert (this.name); 


} 


getOlder (years)t{ 
this.age += years; 
站 
} 


A 


这 个 Person 类 为 title 属性 定义 了 一 个 getter 和 一 个 setter。 这 两 个 操作 innerTitle 变量 
的 函数 都 定义 在 了 构造 函数 中 。 要 为 原型 属性 定义 getter 和 setter, 语法 相同 , 但 要 在 构造 函数 外 
部 定义 。 

















A.5.3 ”继承 


使 用 类 语法 而 不 是 过 去 那 种 JavaScript 语法 ， 最 大 的 好 处 是 容易 实现 继承 。 有 了 类 语法 ， 只 要 使 用 
与 其 他 语言 相同 的 extends 关键 字 就 能 实现 继承 ， 而 不 必 去 考虑 借用 构造 函数 或 者 原型 连 级 。 例 如 : 
class Employee extends Person { 


constructor (name, age){ 
super (name,age); 











} 
} 


以 上 代码 创建 了 一 个 新 类 Employee， 它 继承 了 Person 类 。 在 简单 的 语法 背后 ,已 经 自动 实现 了 
原型 连 级 ,而 且 通过 使 用 super () 函数 ,也 正式 支持 了 借用 构造 函数 。 从 逻辑 上 看 ,上面 的 代码 与 下 面 
的 代码 是 等 价 的 : 


function Employee (name, age)t{ 
Person.call (this, name, age); 


























} 
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Employee.prototype = new Person(); 
除了 这 种 风格 的 继承 ， 类 语法 还 允许 直接 将 对 象 指定 为 其 原型 ， 方 法 就 是 用 prototype 关键 字 代 


替 extends: 











Var basePerson = { 
sayName: function()f{ 
alert (this.name); 


}, 


getOlder: function(years)t{ 
this.age += years; 
} 
于 


class Employee prototype basePerson { 
constructor (name, age)t{ 
public name = name; 
public age = age; 





} 
} 


这 个 例子 将 basePerson 对 象 直接 指定 为 Employee.prototype， 从 而 实现 了 与 目前 使 用 
Object .create() 实 现 的 一 样 的 继承 。 


A.6 模块 


模块 (或 者 “命名 空间 ”、“ 包 ”) 是 组 织 JavaScript 应 用 代码 的 重要 方法 。 每 个 模块 都 包含 着 独立 于 
其 他 模式 的 特定 、 独 一 无 二 的 功能 。JavaScript 开发 中 曾 出 现 过 一 些 临 时 性 的 模块 格式 ， 而 ECMAScript 6 
则 对 如 何 创建 和 管理 模块 给 出 了 标准 的 定义 。 

模块 在 其 自己 的 顶级 执行 环境 中 运行 ， 因 而 不 会 污染 导 和 人 它 的 全 局 执行 环境 。 默 认 情况 下 ,模块 中 
声明 的 所 有 变量 、 函 数 、 类 等 都 是 该 模块 私有 的 。 对 于 应 该 向 外 部 公开 的 成 员 , 可 以 在 前 面 加 上 export 
关键 字 。 例 如 : 

module MyModule { 

/ /公开 这 些 成 员 


export let myobject = {}; 
export function hello(){ alert("hello"); }; 





























// 隐 藏 这 些 成 员 
function goodbye()t{ 
人 
} 
} 


这 个 模块 公开 了 一 个 名 为 myobject 的 对 象 和 一 个 名 为 hello() 的 函数 。 可 以 在 页 面 或 其 他 模块 
中 使 用 这 个 模块 ， 也 可 以 只 导入 模块 中 的 一 个 成 员 或 者 两 个 成 员 。 导 人 模块 要 使 用 import 命令 : 
// 只 导入 myobject 


import myobject from MyModule; 
console.log (myobject); 





// 叶 入 所 有 公开 的 成 员 
import * from MyModule; 
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console.log (myobject); 
console.log (hello); 


// 列 出 要 导入 的 成 员 名 

import {myobject, hello} from MyModule; 
console.log (myobject); 

console.log (hello); 


// 不 导入 ， 直 接 使 用 模块 
console.log (MyModule.myobject); 
console.log (MyModule.hello); 


在 执行 环境 能 够 访问 到 模块 的 情况 下 ,可 以 直接 调用 模块 中 对 外 公开 的 成 员 。 导 入 操作 只 不 过 是 把 
模块 中 的 个 别 成 员 拿 到 当前 执行 环境 中 ， 以 便 直接 操作 而 不 必 3 引 用 模块 。 


外 部 模块 


通过 提供 模块 所 在 外 部 文件 的 URL, 也 可 以 动态 加 载 和 导 和 模块。 为 此 , 首先 要 在 模块 声明 后 面 加 
上 外 部 文件 的 URL， 然 后 再 导入 模块 成 员 : 


module MyModule from "mymodule.js"; 
import myobject from MyModule; 


以 上 声明 会 通知 JavaScript 引擎 下 载 mymodule.js 文件 ， 然 后 从 中 加 载 名 为 MyModule 的 模块 。 
请 读者 注意 ， 这 个 调用 会 阻塞 进程 。 换 句 话说 ，JavaScript 引擎 在 下 载 完 外 部 文件 并 对 其 求 值 之 前 ， 不 
会 处 理 后 面 的 代码 。 

如 果 你 只 想 包含 模块 中 对 外 公开 的 某 些 成 员 ， 不 想 把 整个 模块 都 加 载 进来 ， 可 以 像 下 面 这 样 使 用 


import 指令 : 







































































import myobject from "mymodule.js"; 


总 之 ,模块 就 是 一 种 组 织 相关 功能 的 手段 ， 而 且 能 够 保护 全 局 作用 域 不 受 污染 。 
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严格 模式 


























FE 了 “严格 模式 ”( strict mode ) 的 概念 。 通 过 严格 模式 ， 可 以 在 函数 内 部 


选择 进行 较为 严格 的 全 























存在 的 错误 ， 及 时 捕获 一 些 可 能 导致 编程 错误 的 ECMAScript 行为 。 
理解 严格 模式 的 规则 非常 重要 ，ECMAScript 的 下 一 个 版 本 将 以 严格 模式 为 基础 制定 。 支 持 严格 模 
式 的 浏览 器 包括 IE10+、Firefox 4+、Safari 5.1+ 和 Chrome。 


B.1 选择 使 用 
要 选择 进入 严格 模式 ， 可 以 使 用 严格 模式 的 编译 指示 ( pragma )， 实 际 上 就 是 一 个 不 会 赋 给 任何 变 


量 的 字符 串 : 


"use strict"; 





局 或 局 部 的 错误 条 件 检测 。 使 用 严格 模式 的 好 处 是 可 以 提早 知道 代码 中 





这 种 语法 (从 ECMAScript3 开始 支持 ) 可 以 向 后 兼容 那些 不 支持 严格 模式 的 JavaScript 引 苟 。 支 持 
严格 模式 的 引擎 会 启动 这 种 模式 ， 而 不 支持 该 模式 的 引擎 就 当 遇 到 了 一 个 未 赋值 的 字符 串 字 面 量 , 会 忽 


略 这 个 编译 指示 。 
如 果 是 在 全 局 作 





如 果 把 带 有 这 个 编译 

















用 域 中 ( 孔 数 外 部 ) 给 出 这 个 编译 指示 , 则 整个 脚本 都 将 使 


























用 严格 模式 。 换 名 话说 ， 








指示 的 脚本 放 到 其 他 文件 中 ， 则 该 文件 中 的 JavaScript 代码 也 将 处 于 严格 模式 下 。 


也 可 以 只 在 函数 中 打开 严格 模式 ， 就 像 下 面 这 样 : 


function doSomething(){ 
"use strict"; 


// 其 他 代码 
} 


妇 


B.2 变量 


I 





果 你 没有 控制 页 面 











中 所 有 脚本 的 权力 ， 建 议 只 在 需要 测试 的 特定 函数 中 开启 严格 模式 。 








在 严格 模式 下 ,什么 时 候 创 建 变 量 以 及 怎么 创建 变量 都 是 有 限制 的 。 首先, 不 允许 意外 创建 全 局 变 





量 。 在 非 严 格 模式 下 
// 未 声明 变量 





， 可 以 像 下 面 这 样 创建 全 局 变量 : 














// 非 严格 模式 : 创建 全 局 变量 


// 严 格 模式 : 抛 出 





ReferenceError 


message = "Hello world! " 
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即使 message 前 面 没有 var 关键 字 ， 即 使 没有 将 它 定义 为 某 个 全 局 对 象 的 属性 ,也 能 将 message 
创建 为 全 局 变量 。 但 在 严格 模式 下 ， 如 果 给 一 个 没有 声明 的 变量 赋值 ， 那 代码 在 执行 时 就 会 抛 出 
ReferenceErroro。o 
其 次 ,不 能 对 变量 调用 aelete 操作 符 。 非 严格 模式 允许 这 样 操作 ， 但 会 静默 失败 ( 返回 false )。 
而 在 严格 模式 下 ， 删 除 变 量 也 会 导致 错误 。 























/ /删除 变量 
// 非 严格 模式 : 静默 失败 
// 严 格 模式 : 抛 出 ReferenceError 





Var color = "red"; 
delete color; 


严格 模式 下 对 变量 名 也 有 限制 。 特 别 地 ， 不 能 使 用 implements、interface、let、package、 
private、protected、public、static 和 yield 作为 变量 名 。 这 些 都 是 保留 字 , 将 来 的 ECMAScript 
版 本 中 可 能 会 用 到 它们 。 在 严格 模式 下 ， 用 以 上 标识 符 作为 变量 名 会 导致 语法 错误 。 


B.3 ”对象 


在 严格 模式 下 操作 对 象 比 在 非 严 格 模式 下 更 容易 导致 错误 。 一 般 来 说 , 非 严格 模式 下 会 静默 失败 的 
情形 ， 在 严格 模式 下 就 会 抛 出 错误 。 因 此 ， 在 开发 中 使 用 严格 模式 会 加 大 早 发 现 错误 的 可 能 性 。 

在 下 列 情形 下 操作 对 象 的 属性 会 导致 错误 : 
口 为 只 读 属 性 赋值 会 抛 出 TypeError; 
口 对 不 可 配置 的 (nonconfigurable ) 的 属性 使 用 aelete 操作 符 会 抛 出 TypeError; 
口 为 不 可 扩展 的 (nonextensible ) 的 对 象 添 加 属性 会 抛 出 TypeError。 

使 用 对 象 的 另 一 个 限制 与 通过 对 象 字面 量 声明 对 象 有 关 。 在 使 用 对 象 字 面 量 时 ， 属 性 名 必须 唯一 。 
例如 : 

// 重 名 属性 


// 非 严格 模式 : 没有 错误 ， 以 第 二 个 属性 为 准 
// 严 格 模式 : 抛 出 语法 错误 










































































Var person = { 
name: "Nicholas", 
name: "Greg" 
} 
这 里 的 对 象 person 有 两 个 属性 ， 都 叫 name。 在 非 严 格 模 式 下 ，person 对 象 的 name 属性 值 是 第 
二 个 ， 而 在 严格 模式 下 ， 这 样 的 代码 会 导致 语法 错误 。 


B.4 函数 
首先 ， 严 格 模式 要 求 命名 函数 的 参数 必须 唯一 。 以 下 面 这 个 函数 为 例 : 




















// 重 名 参数 
// 非 严格 模式 : 没有 错误 ， 只 能 访问 第 二 个 参数 
/7 严格 模式 : 抛 出 语法 错误 





图 灵 社 区 会 员 StinkBC(StinkBC@gmail.com) 专 享 尊重 版 权 


附录 B 严格 模式 719 





function sum (num，mnum) { 
//do something 
} 


在 非 严 格 模式 下 ， 这 个 函数 声明 不 会 抛 出 错误 。 通 过 参数 名 只 能 访问 第 二 个 参数 ,要 访问 第 一 个 参 
数 必 须 通过 arguments 对 象 。 

在 严格 模式 下 ，arguments 对 象 的 行为 也 有 所 不 同 。 在 非 严 格 模式 下 ， 修 改 命名 参数 的 值 也 会 
映 到 arguments 对 象 中 ， 而 严格 模式 下 这 两 个 值 是 完全 独立 的 。 例 如 : 











// 修 改 命 名 参数 的 值 
/7 非 严格 模式 ， 修改 会 反映 到 arguments 中 
// 严 格 模式 : 修改 不 会 反映 到 arguments 中 


function showValue (value) { 


Value = "Foo" 
alert (value); lo 
alert (arguments [0]); // 非 严格 模式 : "Foo" 


/ /严格 模式 : "Hi" 
} 


showValue ("Hi"); 





以 上 代码 中 , 函数 showvalue () 只 有 一 个 命名 参数 value。 交 用 这 个 数 时 人 8 入 了 一 个 参半 "91 5 
这 个 值 赋 给 了 value。 而 在 函数 内 部 ，value 被 改 为 "Foo" 。 在 非 严格 模式 下 ， 这 个 修改 也 会 改变 
arguments [0] 的 值 ， 但 在 严格 模式 下 ，arguments [0] 的 值 仍然 是 传人 的 值 。 
一 个 变化 是 淘汰 了 arguments .callee 和 arguments.caller。 在 非 严 格 模式 下 , 这 两 个 属 
性 一 个 引用 孔 数 本 身 ， 一 个 引用 调用 函数 。 而 在 严格 模式 下 ， 访 问 哪个 属性 都 会 抛 出 TypeError。 
例如 : 























// 访 问 arguments .callee 
// 非 严格 模式 : 没有 问题 
/ /严格 模 式 : 抛 出 TypeError 





function factorial (num){ 
if (num <= 1) { 
return 1; 
} else { 
return num * arguments.callee (num-1) 


} 
} 


Var result=factorial (5); 


类 似 地 ， 尝 试 读 写 函数 的 caller 属性 ， 也 会 导致 抛 出 TypeError。 所 以 ,对 于 上 面 的 例子 而 言 ， 
访问 factorial.caller 也 会 抛 出 错误 。 
与 变量 类 似 ,严格 模式 对 函数 名 也 做 出 了 限制 ,不 允许 用 implements interface.let .package、 
private、 protected、 public、 static 和 yield 作为 函数 名 。 
对 函数 的 最 后 一 点 限制 ， 就 是 只 能 在 脚本 的 顶级 和 在 函数 内 部 声明 函数 。 也 就 是 说 ， 在 if 语句 中 
声明 函数 会 导致 语法 错误 : 
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// 在 iE 语 铅 中 声明 函数 
// 非 严格 模式 : 将 函数 提升 到 if 语句 外 部 
/ /严格 模式 抛 出 语法 错误 


if (true){ 
function doSomething(){ 
Vo 
} 
} 





在 非 严 格 模式 下 ， 以 上 代码 能 在 所 有 浏览 器 中 运行 ， 但 在 严格 模式 下 会 导致 语法 错误 。 
B.S eval() 

















饱 受 诉 病 的 eval () 函数 在 严格 模式 下 也 得 到 了 提升 。 最 大 的 变化 就 是 它 在 包含 上 下 文中 不 再 创建 
变量 或 函数 。 例 如 : 


7 





// 使 用 eval () 创建 变 量 
// 非 严格 模式 : 弹出 对 话 框 显示 10 
/7/ 严 格 模式 : 调用 alert (x) 时 会 抛 出 ReferenceError 


function dqoSomething(){ 
eval ("var x=10"); 
alert (x); 


} 























如 果 是 在 非 严 格 模式 下 ,以 上 代码 会 在 函数 dosomething () 中 创建 一 个 局 部 变量 x, 然 后 alert () 
还 会 显示 该 变量 的 值 。 但 在 严格 模式 下 , 在 dosomething () 函数 中 调用 eval () 不 会 创建 变量 x， 因 此 
调用 alert () 会 导致 抛 出 ReferenceError， 因 为 x 没有 定义 。 

可 以 在 eval () 中 声明 变量 和 函数 ， 但 这 些 变量 或 函数 只 能 在 被 求 值 的 特殊 作用 域 中 有 效 ， 随 后 就 
将 被 销毁 。 因 此 ， 以 下 代码 可 以 运行 ， 没 有 问题 ; 

















"use strict",; 
Var result = evall("var x=10, y=11; x+y"); 
alert (result); //21 


这 里 在 eval () 中 声明 了 变量 x 和 y， 然 后 将 它们 加 在 一 起 ， 返 回 了 它们 的 和 。 于 是 ，result 变 
量 的 值 是 21， 即 x 和 相 加 的 结果 。 而 在 调用 alert() 时 ， 尽 管 x 和 y 已 经 不 存在 了 了，result 变量 
的 值 仍然 是 有 效 的 。 











B.6 _ eval 与 arguments 


严格 模式 已 经 明确 禁止 使 用 eval 和 arguments 作为 标识 符 ， 也 不 允许 读 写 它们 的 值 。 例 如 : 


// 把 eval 和 arguments 作为 变量 引用 
// 非 严格 模式 : 没 问 题 ， 不 出 错 
// 严 格 模式 : 抛 出 语法 错误 


Var eval = 10; 
Var arguments = "Hello world!"; 
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在 非 严 格 模式 下 ， 可 以 重 写 eval, 也 可 以 给 arguments 赋值 。 但 在 严格 模式 下 ， 这样 做 会 导致 语 
法 错误 。 不 能 将 它们 用 作 标 识 符 ， 意 味 着 以 下 几 种 使 用 方式 都 会 抛 出 语法 错误 : 
口 使 用 var 声明 ; 











口 赋予 男 一 个 值 ; 
口 尝试 修改 包含 的 值 ， 如 使 用 + ; 
口 用 作 函 数 名 ; 


口 用 作 命 名 的 函数 参数 ; 
口 在 try-catch 语句 中 用 作 例 外 名 。 


B.7 抑制 this 


JavaScript 中 一 个 最 大 的 安全 问题 ， 也 是 最 容易 让 人 迷茫 的 地 方 ， 就 是 在 某 些 情况 下 如 何 抑制 this 
的 值 。 在 非 严格 模式 下 使 用 函数 的 apply () 或 call () 方 法 时 , null 或 undefined 值 会 被 转换 为 全 局 
对 象 。 而 在 严格 模式 下 ， 函 数 的 this 值 始终 是 指定 的 值 ， 无 论 指定 的 是 什么 值 。 例 如 : 











// 访 问 属性 
// 非 严格 模式 : 访问 全 局 属性 
// 严 格 模式 : 抛 出 错误 ， 因 为 this 的 值 为 nul1 


Var color = "red"; 
function displayColor(){ 
alert (this.color)s 


} 


displayColor.call (null); 





以 上 代码 向 displayColor .call() 中 传人 了 nul1 ,如果 在 是 非 严格 模式 下 ,这 意味 着 函数 的 this 
值 是 全 局 对 象 。 结果 就 是 弹出 对 话 框 显示 "red"。 而 在 严格 模式 下 ， 这 个 函数 的 this 的 值 是 nul1， 
此 在 访问 nul1 的 属性 时 就 会 抛 出 错误 。 


B.8 其 他 变化 


严格 模式 还 有 其 他 一 些 变 化 , 希望 读者 也 能 留意 。 首 先是 抛弃 了 with 语句 。 非 严格 模式 下 的 with 
语句 能 够 改变 解析 标识 符 的 路 径 , 但 在 严格 模式 下 ,with 被 简化 掉 了 。 因 此 , 在 严格 模式 下 使 用 with 
会 导致 语法 错误 。 

















//with 的 语句 用 法 
// 非 严格 模式 : 允许 
// 严 格 模式 : 抛 出 语法 错误 


with(location)t{ 
alert (href); 
} 


严格 模式 也 去 掉 了 JavaScript 中 的 八进制 字面 量 。 以 0 开头 的 八进制 字面 量 过 去 经 常会 导致 很 多 错 
误 。 在 严格 模式 下 ， 八 进 制 字面 量 已 经 成 为 无 效 的 语法 了 。 
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// 使 用 八进制 字面 量 
// 非 严格 模式 : 值 为 8 
// 严 格 模式 : 抛 出 语法 错误 


Var Value = 010; 


本 书 前 面 提 到 过 , ECMAScript 5 也 修改 了 严格 模式 下 parseInt () 的 行为 。 如 今 , 八进制 字面 量 在 
严格 模式 下 会 被 当 作 以 0 开头 的 十 进 制 字面 量 。 例 如 : 




















// 使 用 parseInt() 解 析 八 进 制 字面 量 
// 非 严格 模式 : 值 为 8 
// 严 格 模式 : 值 为 10 


Var Value = parseInt("010"); 
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avaScript 库 可 以 帮助 我 们 跨越 浏览 器 差异 的 鸿沟 ， 并 对 复 林 的 浏览 器 功能 提供 更 为 简便 的 访问 

方式 。 程 序 库 有 两 种 形式 : 通用 库 和 专用 库 。 通 用 JavaScript 库 提供 了 对 常见 浏览 器 功能 的 访 
问 ， 可 以 作为 网 站 或 者 Web 应 用 的 基础 。 专 用 库 则 只 做 特定 的 事 ， 仅 用 于 网 站 或 者 Web 应 用 的 某 些 部 
分 。 本 附录 给 出 了 这 些 库 与 其 功能 的 概况 ， 并 提供 了 相关 网 站 作为 你 的 参考 资源 。 


C.1 通用 库 


通用 JavaScript 库 提 供 横 跨 几 个 主题 的 功能 。 所 有 的 通用 库 都 尝试 通过 使 用 新 API 包装 常见 功能 3 
统一 浏览 絮 的 接口 、 减 小 实现 差异 。 某 些 API 看 上 去 与 原生 功能 很 相似 ， 而 另 一 些 则 完全 不 同 。 通 用 库 
般 提供 与 DOM 交互 的 功能 、 支 持 Ajax 、 同 时 还 有 一 些 协助 常见 任务 的 工具 方法 。 























































































































C.1.1 YUI 


它 是 一 个 开源 JavaScript 与 CSS 库 ， 以 一 种 组 件 方式 设计 的 。 这 个 库 不 只 有 一 个 文件 ; 它 包含 了 
很 多 文件 ， 提 供 各 种 不 同 的 配置 ， 让 你 可 以 按 需 载 人 。YUI ( Yahoo!User Interface Library， 和 雅虎 用 户 
界面 库 ) 涵盖 了 JavaScript 的 所 有 方面 ， 从 基本 的 工具 及 帮助 函数 到 完善 的 浏览 器 部 件 。 在 雅虎 有 一 支 
专门 的 软件 工程 师 团队 负责 YUI， 他 们 提供 了 优秀 的 文档 和 支持 。 
口 协议 : BSD 许可 证 
口 网 站 : http:/yuilibrary.com 




























































































C.1.2 Prototype 


它 是 一 个 提供 了 常见 任务 API 的 开源 库 。 最 初 是 针对 了 Ruby on Rails 框架 中 的 使 用 而 开发 的 ,Prototype 
是 类 驱动 的 ， 旨 在 为 JavaScript 提供 类 定义 和 继承 。 因 此 ，Prototype 提供 了 很 多 类 ， 用 于 将 常见 或 复杂 
功能 封装 为 简单 的 API 调用。Prototype 只 有 一 个 单独 的 文件 , 可 以 很 容易 地 放 和 任意 页 面 。 它 是 由 Sam 
Stephenson 撰写 并 维护 的 。 

口 协议 : MIT 许可 证 或 者 是 Creative Commons Attribution-Share Alike 3.0 Unported 
口 网 站 : http://www.prototypejs.org/ 







































































C.1.3 Dojo Toolkit 


Dojo Toolkit 开源 库 基于 一 种 包 系统 建 模 ， 一 组 功能 组 成 一 个 包 ， 可 以 按 需 载 人 。Doijo 提供 了 范围 
广泛 的 选项 和 配置 ， 几 乎 涵盖 了 你 要 用 JavaScript 做 的 任何 事情 。Dojo Toolkit 由 Alex Russell 创建 ， 并 
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由 Dojo 基金 会 的 雇员 和 志愿 者 维护 。 
口 协议 : 新 BSD 许可 证 或 学 术 自 由 协议 2.1 版 
口 网 站 : http:/www.dojotoolkit.org/ 


C.1.4 MooTools 


MooTools 是 一 个 为 了 精简 和 优化 而 设计 的 开源 库 ， 它 为 内 置 JavaScript 对 象 添 加 了 各 种 方法 ， 以 通 
过 接近 的 接口 提供 新 功能 , 或 者 直接 提供 新 的 对 象 。MooTools 的 短小 精 悍 受到 一 些 Web 开发 者 的 青睐 。 
口 协议 : MIT 许可 证 
口 网 站 : http://www.mootools.net/ 


C.1.5 jQuery 


jQuery 是 一 个 给 JavaScript 提供 了 函数 式 编程 接口 的 开源 库 。 它 是 一 个 完整 的 库 ， 其 核心 是 构建 于 
CSS 选择 器 上 的 ， 用 来 操作 DOM 元 素 。 通 过 链 式 调用 ，jQuery 代码 看 上 去 更 像 是 对 于 应 该 发 生 什么 的 
描述 而 不 是 JavaScript 代码 。 这 种 代码 风格 在 设计 师 和 原型 制作 人 中 非常 流行 。jQuery 是 由 John Resig 
撰写 并 维护 的 。 

口 协议 : MIT 许可 证 或 通用 公共 许可 证 (GPL ) 
口 网 站 : http://jquery.com/ 
C.1.6 MochiKit 

MochKit 是 一 个 由 一 些小 工具 组 成 的 开源 库 ， 它 以 完善 的 文档 和 完整 的 测试 见长 ,拥有 大 量 API 及 

相关 范例 文档 以 及 数 百 个 测试 来 确保 质量 。MochiKit 是 由 Bob Ippolito 撰写 并 维护 的 。 


口 协议 : MIT 许 可 者 或 学 术 自 由 许可 证 2.1 版 
口 网 站 : http:/www.mochikit.com/ 



















































































































































































C.1.7 Underscore.js 


虽然 严格 来 讲 Underscore.js 并 不 是 一 个 通用 的 库 ， 但 它 的 确 为 JavaScript 中 的 功能 性 编程 提供 了 很 
多 额外 的 功能 ,其 文档 称 Underscore.js 是 对 jQuery 的 补充 ,提供 了 操作 对 象 、 数 组、 函数 和 其 他 JavaScript 
数据 类 型 的 更 多 的 低级 功能 。Underscore.js 由 DcoumentCloud 的 Jeremy Ashkenas 维护 。 
口 协议 : MIT 许可 证 
口 网 站 : http://documentcloud.github.com/underscore/ 


C.2 互联 网 应 用 


互联 网 应 用 库 是 针对 于 简化 完整 的 Web 应 用 开发 而 设计 的 。 它 们 并 不 提供 应 用 问题 的 小 块 组 件 ， 
而 是 提供 了 快速 应 用 开发 的 整个 概念 框架 。 虽然 这 些 库 也 可 能 提供 一 些 底层 功能 , 但 他 们 的 目标 是 帮助 
用 户 快 速 开 发 Web 应 用 。 


C.2.1 Backbone.js 
Backbone.js 是 构建 于 Underscore.js 基础 之 上 的 一 个 迷你 MVC 开源 库 ， 它 针对 单 页 应 用 进行 优化 ， 
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让 你 能 够 随 着 应 用 状态 变化 方便 地 更 新 页 面 的 任意 部 分 。Backbone.js 由 DcoumentCloud 的 Jeremy 
Ashkenas 维护 。 

口 协议 : MIT 许 可 证 

口 网 站 : http://documentcloud.github.com/backbone/ 






































C.2.2 Rico 


Rico 是 一 个 开源 库 ， 旨 在 让 行为 丰富 的 互联 网 应 用 的 开发 更 加 简单 。 它 提供 了 Ajax、 动 画 、 样 式 
以 及 部 件 的 工具 。 这 个 库 由 一 些 志愿 者 组 成 的 小 团队 维护 ， 但 是 2008 年 起 开发 速度 大 大 减 慢 了 。 
口 协议 : Apache 许可 证 2.0 
口 网 站 : http://openrico.org/ 





















































C.2.3 qdooxdoo 


它 是 一 个 旨 在 为 整个 互联 网 应 用 开发 周期 提供 帮助 的 开源 库 。qooxdoo 实现 了 它 自 己 的 类 和 接口 ， 
用 于 创建 类 似 于 传统 面向 对 象 语言 的 编程 模型 .这 个 库 包 含 了 一 个 完整 的 GUI 工具 包 以 及 用 于 简化 前 端 
构建 过 程 的 编译 器 。qooxdoo 起 初 是 1&1webhosting 公司 (www.landl.com ) 的 内 部 使 用 库 ， 后 来 基于 
开源 协议 发 布 。1&1 允 用 了 一 些 全 职 开 发 者 来 维护 和 开发 这 个 库 。 
口 协议 : GNU 较 宽 松 公共 许可 证 (LGPL ) 或 者 Eclipse 公共 许可 证 (EPL ) 
口 网 站 : http://www.qooxdoo.org/ 


C.3 ”动画 和 特效 


动画 和 其 他 视觉 特效 也 成 为 了 Web 开发 的 重要 部 分 。 在 网 页 上 做 出 流畅 的 动画 是 一 个 很 重要 的 任 
务 ， 一 些 开 发 者 已 经 做 出 了 易 用 的 库 ， 提 供 流畅 的 动画 和 特效 。 前 面 提 到 的 很 多 通用 JavaScript 库 也 有 
动画 功能 。 












































































































































C.3.1 script.aculo.us 


script.aculo.us 是 Prototype 的 “同伴 ”, 它 提供 了 出 色 特 效 的 简单 使 用 方式 ,使 用 的 东西 不 超过 是 CSS 
和 DOM。Prototype 必须 在 使 用 script.aculo.us 之 前 载 人 。script.aculo.us 是 最 流行 的 特效 库 之 一 ， 世 界 上 
很 多 网 站 和 Web 应 用 都 在 使 用 它 。 它 的 作者 Thomas Fuchs 积极 地 维护 着 script.aculo.us。 
口 协议 : MIT 许可 证 
口 网 站 : http://script.aculo.us/ 









































C.3.2 moo.fx 


moo. 低 开源 动画 库 是 设计 在 Prototype 或 者 MooTools 之 上 运行 的 。 它 的 目标 是 尽 可 能 小 (最 新 的 版 
本 是 3KB), 并 支持 开发 人 员 用 尽 可 能 少 的 代码 创建 动画 。MooTools 是 默认 包含 moo.f 的, 但 也 可 以 单 
独 下 载 用 于 Prototype 中 。 

口 协议 : MIT 许可 证 
口 网 站 : http:/moofx.mad4milk.net/ 
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C.3.3 Lightbox 


Lightbox 是 一 个 用 于 在 任意 页 面 上 创建 图 像 浮 动 层 的 JavaScript 库 ， 依 赖 于 Prototype 和 
script.aculo.us 来 实现 它 的 视觉 特效 。 基 本 的 理念 是 让 用 户 在 一 个 浮动 层 中 浏览 一 个 或 者 一 系列 图 像 ， 
而 不 必 离 开 当 前 页 面 。Lightbox 浮动 层 无 论 是 外 观 还 是 过 渡 效 果 都 可 以 自 定义 。Lightbox 由 Lokesh 
Dhakar 开发 并 维护 。 

口 协议 : 创作 共用 协议 2.5 
口 网 站 : http://www.huddletotegher.com/projects/lightbox2/ 







































































C.4 ”加密 


随 着 Ajax 应 用 的 流行 ， 对 于 浏览 器 端 加 密 以 确保 通讯 安全 的 需求 也 越 来 越 多 。 幸 好 ， 一 些 人 已 经 
在 JavaScript 中 实现 了 常用 的 安全 算法 。 这些 库 大 部 分 并 没有 其 作者 的 正式 支持 , 但 还 是 被 广泛 应 用 着 。 


C.4.1 JavaScript MD5 


该 开源 库 实现 了 MD4、MD5 以 及 SHA-1 安全 散 列 函数 。 作 者 Paul Johnston 和 其 他 一 些 贡 献 者 将 每 
个 算法 作为 一 个 文件 ,创建 了 这 个 用 于 Web 应 用 的 丰富 的 库 。 主 页 上 提供 了 散 列 算法 的 概述 、 对 于 其 
弱点 的 讨论 以 及 适当 的 使 用 方法 。 
口 协议 : BSD 许可 证 
口 网 站 : http://pajhome.org.uk/crypt/md5 













































































C.4.2 JavaScrypt 


该 JavaScript 库 实 现 了 MD5 和 AES (256 位) 加 密 算法 。JavaScrypt 的 网 站 提供 了 很 多 关于 密码 学 
历史 及 其 在 计算 机 中 应 用 的 信息 。 但 是 缺乏 关于 如 何 将 该 库 集 成 到 Web 应 用 中 的 基本 文档 ，JavaScrypt 
的 代码 里 面 全 都 是 深奥 的 数学 处 理 和 计算 。 

口 协议 : 公共 域 
口 网 站 : http://www.fourmilab.ch/javascrypt/ 
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JavaScript 工 具 

















中 一 :JavaScript 代码 和 用 其 他 语言 编写 代码 很 像 ， 使 用 工具 能 够 提高 工作 效率 。 JavaScript 开发 人 

与 员 可 用 的 工具 数量 一 度 爆 发 性 增长 , 使 得 查找 问题 、 优 化 和 部 署 基 于 JavaScript 的 解决 方案 更 
为 简单 。 其 中 一 些 工 具 是 专 为 JavaScript 设计 使 用 的 ， 而 其 他 一 些 可 以 在 浏览 带 之 外 运行 。 本 附录 对 其 
中 一 些 工具 给 出 了 概述 ， 并 额外 提供 了 信息 资源 。 


D.1 校 验 器 
JavaScript 调试 有 一 个 问题 ， 很 多 IDE 并 不 能 在 输入 的 时 候 自动 指出 语法 错误 。 大 多 数 开发 者 写 了 


一 部 分 代码 之 后 要 将 其 载 人 到 浏览 器 中 查找 错误 。 你 可 以 通过 在 部 署 之 前 校 验 JavaScript 代码 ， 以 便 显 
著 地 减少 此 类 错误 。 校 验 器 提供 了 基本 的 语法 检查 ， 并 给 出 某 些 风格 的 警告 。 














































































































D.1.1 JSLint 


JSLint 是 一 个 由 Douglas Crockford 撰写 的 JavaScript 校 验 右 。 它 通过 跨 浏 览 器 问题 的 最 小 共同 点 检 
查 ， 能 够 从 核心 层次 上 检查 语法 错误 。( 它 遵 循 最 严格 的 规则 来 确保 代码 到 处 都 能 运行 。) 你 可 以 启用 
Crockford 对 于 代码 风格 的 警告 ,包括 代码 格式 ,未 声明 的 全 局 变量 的 使 用 以 及 其 他 更 多 和 警告 .尽管 JSLint 
是 用 JavaScript 写 的 ， 但 是 通过 基于 Java 的 Rhino 解释 器 ， 它 可 以 在 命令 行 中 运行 ， 或 者 通过 WScript 
或 者 其 他 JavaScript 解释 器 。 网 站 上 提供 了 针对 各 种 命令 行 解释 器 的 自 定 义 版 本 。 
口 网 站 : http:/www.jslint.com/ 







































































D.1.2 JSHint 


JSHint 是 JSLint 的 一 个 分 文 ， 为 应 用 规则 提供 了 更 多 的 自 定 义 功 能 。 与 JSLint 类 似 , 它 首先 检查 语 
法 错误 ， 然 后 检查 有 问题 的 编码 模式 。JSLint 的 每 一 项 检查 JSHint 都 有 , 但 开发 人 员 可 以 更 好 地 控制 应 
用 什么 规则 。 与 JSLint 一 样 ，JSHint 也 能 使 用 Rhino 在 命令 行 中 运行 。 
口 网 站 : http:/www.jshint.com/ 


























D.1.3 JavaScript Lint 


它 和 JSLint 完全 不 相干 ，JavaScript Lint 是 Matthias Miller 写 的 一 个 基于 C 的 JavaScript 校 验 絮 。 它 
使 用 了 SpiderMonkey ( 即 Firefox 所 用 的 JavaScript 解释 器 ) 来 分 析 代 码 并 查找 语法 错误 。 这 个 工具 包含 
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大 量 选项 ,可 以 启用 额外 关于 编码 风格 的 警告 ,以 及 未 声明 的 变量 和 不 可 到 达 的 代码 警告 。Windows 和 
Macintosh 上 都 有 可 用 的 JavaScript Lint， 源 代码 也 可 以 自由 取得 。 
口 网 站 : http:/www.javascriptlint.comy/ 


D.2 压缩 器 


JavaScript 构建 过 程 中 很 重要 的 一 部 分 ， 是 压缩 输出 并 移 除 多 余 的 字符 。 这 样 做 可 以 确保 传送 到 浏 
览 器 的 字 节 数 最 少 ， 最 终 加 速 了 用 户 体验 。 有 几 种 压缩 比率 不 同 的 工具 可 以 选择 。 
























































D.2.1 JSMin 


JSMin 是 由 Douglas Crockford 写 的 一 个 基于 C 的 压缩 器 ， 进 行 最 基本 的 JavaScript 压 缩 。 它 主要 是 
移 除 空白 和 注释 , 确保 最 终 的 代码 依然 可 以 被 顺利 执行 。JSMin 有 Windows 执行 程序 , 包括 C 版 本 代码 ， 
还 有 其 他 语言 的 代码 : 
口 网 站 : http:/www.crockford.com/javascript/jsmin.html 





























D.2.2 Dojo ShrinkSafe 


负责 Dojo Toolkit 的 同一 批 人 开发 了 一 个 叫做 ShrinkSafe 的 工具 ， 它 使 用 了 Rhino JavaScript 解释 器 
首先 将 JavaScript 代码 解析 为 记号 流 ， 然 后 用 它们 来 安全 压缩 代码 。 和 JSMin 一 样 ，ShrinkSafe 移 除 多 
余 的 空白 符 (不 包括 换行 ) 和 注释 ,但 是 还 更 进一步 将 局 部 变量 替换 为 两 个 字符 长 的 变量 名 。 最 后 可 以 
比 JSMin 产生 更 小 输出 ， 而 没有 引入 语法 错误 的 风险 。 

口 价格 : 免费 
口 网 站 : http://shrinksafe.dojotoolkit.org/ 



































D.2.3 YUI Compressor 


YUI 小 组 有 一 个 叫做 YUI Compressor 的 压缩 器 。 和 ShrinkSafe 类 似 ，YUI Compressor 利用 了 Rhino 
解释 器 将 JavaScript 代码 解析 为 记号 流 , 并 移 除 注释 和 空白 字符 并 替换 变量 名 。 与 ShrinkSafe 不 同 , YUI 
Compressor 还 移 除 换行 并 进行 一 些 细微 的 优化 进一步 节省 字 市 数 。 一 般 来 说 , YUI Compressor 处 理 过 的 
文件 要 小 于 JSMin 或 者 ShrinkSafe 处 理 过 的 文件 。 

口 网 站 : http://yuilibrary.com /projects/yuicompressor 


D.3 单元 测试 


TDD ( Test-driven development， 测试 驱动 开发 ) 是 一 种 以 单元 测试 为 核心 的 软件 开发 过 程 。 直 到 最 
近 , 才 出 现 了 一 些 对 JavaScript 进行 单元 测试 的 工具 。 现在 多 数 JavaScript 库 都 在 它们 自己 的 代码 中 使 用 
了 某 种 形式 的 单元 测试 ， 其 中 一 些 发 布 了 单元 测试 框架 让 他 人 使 用 。 
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D.3.1 JsUnit 


最 早 的 JavaScript 单元 测试 框架 ， 不 绑 定 于 任何 特定 的 JavaScript 库 。JsUnit 是 Java 知名 的 JUnit 测 
试 框 架 的 移植 。 测 试 在 页 面 中 和 运行， 并 可 以 设置 为 自动 测试 并 将 结果 提交 到 服务 需 。 它 的 网 站 上 包含 了 
例子 和 基本 的 文档 : 
口 网 站 : http:/www.jsunit.net/ 





















































D.3.2 YUI Test 


作为 YUI 的 一 部 分 ，YUI Test 不 仅 可 以 用 于 测试 使 用 YUI 的 代码 ， 也 可 以 测试 网 站 或 者 应 用 中 的 
任何 代码 。YUI Test 包含 了 简单 和 复杂 的 断言 ， 以 及 一 种 模拟 简单 的 鼠标 和 键盘 事件 的 方法 。 该 框架 在 
Yahoo! Developer Network 上 有 完整 的 文档 描述 ， 包含 了 例子 、API 文档 和 更 多 内 容 。 测 试 时 在 浏览 器 中 
运行 ， 结 果 输 出 在 页 面 上 。YUI 便 使 用 YUI Test 来 测试 整个 库 。 

口 网 站 : http://yuilibrary.com/projects/yuitest/ 













































































D.3.3 DOH 


DOH( Dojo Object Harness ) 在 发 布 给 大 家 使 用 之 前 , 最 初 是 作为 Dojo 内 部 的 单元 测试 工具 出 现 的 。 
和 其 他 框架 一 样 ， 单 元 测试 是 在 浏览 器 中 运行 的 。 
口 网 站 : http://www.dojotoolkit.org/ 














D.3.4 qUnit 


qUnit 是 为 测试 jQuery 而 开发 的 一 个 单元 测试 框架 。jQuery 本 身 的 确 使 用 qUnit 进行 各 项 测试 。 除 
此 之 外 ，qUnit 与 jQuery 并 没有 绑 定 关系 ， 也 可 以 用 它 来 测试 所 有 JavaScript 代码 。qUnit 的 特点 是 简单 
易 用 ， 一 般 开 发 人 员 很 容易 上 手 。 
口 网 站 : https://github.com/jquery/qunit 


D.4 文档 生成 器 


大 多 数 IDE 对 于 主流 语言 都 包含 了 文档 生成 器 。 由 于 JavaScript 并 没有 官方 的 IDE， 过 去 文档 一 般 
都 是 手工 完成 ， 或 者 是 利用 针对 其 他 语言 的 文档 生成 器 。 然 而 ， 现 在 终于 有 一 些 专门 针对 JavaScript 的 
文档 生成 项 了 。 


D.4.1 JsDoc Toolkit 

JsDoc Toolkit 是 最 早出 现 的 JavaScript 文 档 生 成 器 之 一 。 它 要 求 你 在 代码 中 输入 类 似 Javadoc 的 注释 ， 
然后 处 理 这 些 注释 并 输出 为 HTML 文件 。 你 可 以 自 定义 HTML 的 格式 ， 这 需 使 用 预定 义 的 JsDoc 模板 
或 者 创建 自己 的 模版 。JsDoc Toolkit 可 以 以 Java 包 的 形式 获得 。 
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口 网 站 : http://code.google.com/p/jsdoc-toolkit/ 





D.4.2 YUI Doc 


YUI Doc 是 YUI 的 文档 生成 器 。 该 生成 器 以 Python 书写 ， 所 以 它 要 求 安装 有 Python 运行 时 环境 。 
YUI Doc 可 以 输出 集成 了 属性 和 方法 搜索 (用 YUI 的 自动 完成 挂件 实现 的 ) 的 HTML 文件 。 和 JsDoc 
一 样 , YUI Doc 要 求 源 代码 中 使 用 类 似 Javadoc 的 注释 。 默 认 的 HTML 可 以 通过 修改 默认 的 HTML 模板 
文件 和 相关 的 样式 表 来 更 改 。 

口 价格 : 免费 
口 网 站 : http://www.yuilibrary.com/projects/yuidoc/ 


D.4.3 AjaxDoc 


AjaxDoc 的 目标 和 前 面 提 到 的 生成 器 有 些 差异 。 它 不 为 JavaScript 文档 生成 HTML 文件 ， 而 是 创建 
与 针对 .NET 语言 (如 C# 和 Visual Basic. NET ) 所 创建 文件 相同 格式 的 XML 文件 。 这样 做 就 可 以 由 标准 
的 .NET 文档 生成 器 创建 HTML 文件 形式 的 文档 。AjaxDoc 使 用 类 似 于 所 有 .NET 语言 用 到 的 文档 注释 格 
式 。 创 建 AjaxDoc 是 针对 ASPNET 的 Ajax 解决 方案 , 但 是 它 也 可 以 用 于 单独 的 项 目 。 
口 网 站 : http://www.codeplex.com/ajaxdoc 


D.5 安全 执行 环境 


随 着 mashup 应 用 越 来 越 流行 ,对 于 允许 来 自 外 界 的 JavaScript 存在 于 同一 个 页 面 上 并 执行 有 着 越 来 
越 多 的 需求 。 这 导致 了 一 些 访问 受 限 功能 的 安全 问题 。 以 下 工具 旨 在 创建 安全 的 执行 环境 ， 其 中 不 同 来 
源 的 JavaScript 可 以 共存 ， 而 不 会 互相 影响 。 


D.5.1 ADsafe 


由 Douglas Crockford 创建 ，ADsafe 是 JavaScript 的 子 集 ， 这 个 子 集 被 认为 可 以 被 第 三 方 脚本 安全 访 
问 。 对 于 用 ADsafe 运行 的 代码 ， 页 面 必须 包含 ADsafe JavaScript 库 并 标记 为 ADsafe 挂件 格式 。 因 此 ， 
代码 可 以 在 任何 页 面 上 安全 执行 。 
口 网 站 : http:/www.adsafe.org/ 


















































































































































D.5.2 Caja 


Caja 用 一 种 独特 的 方式 来 确保 JavaScript 的 安全 执行 。 类 似 于 ADsafe，Caja 定义 了 JavaScript 的 一 
个 可 以 用 安全 方式 使 用 的 子 集 。Caja 继而 可 以 清理 JavaScript 代码 并 验证 它 只 按照 预期 的 方式 运行 。 作 
为 该 项 目的 一 部 分 ， 有 一 种 叫做 Cajita 的 语言 ， 它 是 JavaScript 功能 的 一 种 更 小 的 子 集 。Caja 还 处 于 幼 
年 期 但 是 已 经 展示 了 很 多 前 景 ， 允 许多 个 脚本 在 同一 个 页 面 执行 而 没有 恶意 活动 的 可 能 。 
口 网 站 : http://code.google.com/p/google-caja/ 
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1995 年 ，Brendan Eich 创 造 了 JavaScript。 

2005 年 ， 席 卷 全 球 的 “Ajax 热 ”激发 了 全 世界 Web 开 发 人 员 学 习 JavaScript 的 热情 。 与 此 同时 ， 本 书 第 1 版 诞 
Ed sd 

2005 年 到 2009 年 ， 前 端 开 发 社区 在 实践 中 充分 检验 了 这 门 语言 的 各 种 实现 和 扩展 ，JavaScript 从 被 戏 让 的 “ 玩 
具 语 言 ”一 跃 成 为 软件 业 举 足 轻 重 的 通用 编程 语言 。2009 年 1 月 本 书 第 2 版 应 运 而 生 ， 凝 聚 作者 和 社区 专家 多 年 宝贵 
经 验 的 这 一 技术 名 著 再 次 得 到 读者 认可 和 褒扬 ， 中 文 版 销量 达到 2 万 册 。 

2009 年 到 2011 年 ， ECMAScript 5 和 HTML5 在 标准 之 争 中 双双 胜出 ， 使 大 量 专 有 实现 和 客户 端 扩展 正式 进入 规 
范 ， 同 时 也 为 这 门 语言 增添 了 很 多 适应 未 来 发 展 的 新 特性 。2012 年 初 本 书 第 3 版 面世 ， 中 文 版 也 紧 随 其 后 。 第 3 版 除 
增加 5 章 全 新 内 容 外 ， 其 他 章节 也 有 较 大 幅度 的 增补 和 修订 ， 新 内 容 篇 幅 约 占 三 分 之 一 。 

作为 JavaScript 技 术 经 典 名 著 ， 本 书 承继 了 之 前 版 本 全 面 深入 、 贴 近 实 战 的 特点 ， 在 详细 讲解 了 JavaScript 语 言 
的 核心 之 后 ， 条 分 缕 析 地 为 读者 展示 了 现 有 规范 及 实现 为 开发 Web 应 用 提供 的 各 种 支持 和 特性 。 

本 书 主要 内 容 包 括 : 

全 对 JavaScript 实 现 各 个 组 成 部 分 的 详尽 解读 ; 

命 对 JavaScript 面 向 对 象 编程 的 全 方位 阐述 ; 

令 对 DOM、BOM 及 浏览 器 事件 模型 的 透彻 剖析 ; 

令 Web 应 用 基本 数据 格式 JSON、XML 及 其 存 取 ; 

合 Ajax、Comet 服 务 器 端 通 信和 基于 File API 的 拖 放 式 文件 上 传 ; 

令 ECMAScript 5 定义 的 最 新 核心 语言 特性 ; 

令 HTML 5 涵盖 的 表单 、 媒 体 、Canvas ( 包括 WebGL ) ; 

倒 Selectors、Web Workers、 地 理 定位 及 跨 文档 传递 消息 等 最 新 APl; 

令 离 线 应 用 及 客户 端 存储 ( 包括 IndexedDB ) ; 

令 维 护 、 性 能 、 部 署 相关 的 最 佳 开 发 实践 ; 

售 新 兴 API 及 ECMAScript Harmony 展 望 。 

本 书 适合 有 一 定编 程 经 验 的 Web 应 用 开发 人 员 阅 读 ， 也 可 作为 高 校 及 社会 实用 技术 培训 相关 专业 课程 的 教材 。 


Copies of this book sold without a Wiley sticker 
on the cover are unauthorized and illegal. 
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